pnpm add @strategies/uiThere are two types of components in the system: interface components and portals.
The interface components specify the child elements to act as portals that you can declaratively pass your content into. Regardless of declaration order, these named portals will place their children inside of the elements specified by the interface component.
import { Modal, Title, Body, Buttons, Button } from '@strategies/ui';
<Modal>
<Title>My Modal</Title>
<Body>
<p>This is the body of my modal</p>
</Body>
<Buttons>
<Button onClick={cancel}>
Cancel
</Button>
<Button onClick={save}>
Save
</Button>
</Buttons>
</Modal>The interface components that are available are:
- Accordion
- Button
- Checkbox
- CheckboxPill
- ColorItem
- IconButton
- List
- ListItem
- MenuBar
- Modal
- Panel
- Pill
- RadioSlider
- Select
- Slider
pnpm run build@use '~@strategies/tokens/color';
@use '~@strategies/tokens/font';
.YourComponent {
color: color.$blue;
font-size: font.$size-small;
}- the `token`` function is for getting the value by passing in a path string
- to use the
tokenfunction, please install another package@strategeies/ui
pnpm add --save-dev @strategies/ui- usage example
import { ConfigProvider } from 'antd';
import { token } from '@strategeies/ui';
export const ButtonAntConfig = ({children}) => {
return (
<ConfigProvider
theme={{
token: {
/* token fn here */
colorPrimary: token('color.text.danger', '#ff0000'),
}
}}>
{children}
</ConfigProvider>
)
}
export default ButtonAntConfig;