甜点盒
从 React 组件轻松消耗您设计符号的库, 用于 香草摘录。 。 。 .
这个图书馆会消耗你的 喷洒 从一个反应组件 微风。 它提供零CSS运行时间 <Box /> 组件(类似于 布罗德 或者说 查克罗) (中文(简体) ).
它通过消费发挥作用 atoms 创建于 vanilla-extract和 sprinkles向"求求"的团队大喊大叫 制作这些很棒的图书馆!
- 第一步,用您的
atoms用喷出物创建 :
// Box.tsx
import { createBox } from '@dessert-box/react';
import { atoms } from './sprinkles.css';
const { Box } = createBox({
atoms,
// optional: pass your CSS reset className here
// useful if you want to scope your reset to your Box element
defaultClassName: 'resetClassName',
});
export default Box;
- 步骤2,导入它享受甜蜜:
// OtherFileOrComponent.tsx
import Box from './Box';
const MyComponent = () => {
return <Box padding="large">What a sweet treat!</Box>;
};
想知道为什么使用Box组件可能是一个好主意吗? 或者Box组件是什么? 检查 财务问题。 。 。 .
想知道如何使用
variants这个图书馆? 看看这个 变体 节.
使用量
安装软件包 :
$ npm install @dessert-box/react
配置 香草摘录 财务报告和审定财务报表 sprinkles 并准备好你的原子:
// atoms.css.ts
import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
const space = {
none: 0,
small: 4,
medium: 8,
large: 16,
};
const colors = {
primary: 'blue',
// ...
};
const atomicStyles = defineProperties({
conditions: {
mobile: {},
tablet: { '@media': 'screen and (min-width: 768px)' },
desktop: { '@media': 'screen and (min-width: 1024px)' },
},
properties: {
padding: space,
backgroundColor: colors,
// ...
},
// ...
});
export const atoms = createSprinkles(atomicStyles);
检查
sprinkles文档 用于创建这些原子.
现在让我们创造我们 <Box /> 使用这些原子:
// Box.ts
import { createBox } from '@dessert-box/react';
import { atoms } from './sprinkles.css';
const { Box } = createBox({ atoms });
export default Box;
// otherFile.tsx
import Box from './Box';
const App = () => {
return <Box padding="large">Hello</Box>;
};
注意,我们可以通过每一个财产, 简称,或者条件 我们通常可以通过我们 atomsFn 函数。 例如,我们可以利用这些条件来设计应对能力:
<Box padding={{ mobile: 'none', tablet: 'small', desktop: 'large' }} />
如果需要使标记与标记不同 div,可以使用 as 道具 :
<Box as="a" href="https://example.com" padding="small">
Link to example
</Box>
备选案文
官员 @vanilla-extract/recipes (英语) 软件包有处理变体的优秀API,这可以和我们的 Box 要创建的组件 基于变体的组件数字 :
注: (假设您已经创建了自己的 Box (按以上例子排列).
- 首先用
recipe函数 :
// Button.css.ts
import { recipe } from '@vanilla-extract/recipes';
import { atoms } from '../atoms.css';
export const buttonRecipe = recipe({
variants: {
kind: {
primary: atoms({ background: 'blue50' }),
secondary: atoms({ background: 'yellow' }),
},
size: {
md: atoms({ fontSize: 'large' }),
lg: atoms({ fontSize: 'extraLarge' }),
},
},
});
export type ButtonVariants = Parameters<typeof buttonRecipe>[0];
- 那就用那个
recipes函数创建变量并将其应用到您的Box数字 :
// Button.tsx
import { Box } from './Box';
import { buttonRecipe, ButtonVariants } from './Button.css';
type Props = {
children: React.ReactNode;
} & ButtonVariants;
export const Button = ({
children,
size = 'md',
kind = 'secondary',
}: Props) => {
return (
<Box as="button" className={buttonRecipe({ size, kind })}>
{children}
</Box>
);
};
export default Button;
关于更多背景,参见: @vanilla-extract/recipe (英语) 或者觉得自由 在该项目中打开一个问题 如果融合没有你预期的那样有效!
API 密码
创建框( 选项 : {原子: 原子Fn, 默认分类Name: string })
创建一个 <Box /> 在根位取出原子的组件.
import { createBox } from '@dessert-box/react';
import { atoms } from './atoms.css';
const Box = createBox({ atoms });
<Box padding="small" />;
创建 BoxWith Atoms Prop( 选项 : {原子: AtomsFn, 默认类Name: string })
创建一个 <Box /> 将原子作为道具的组件 atoms。 。 。 .
import { createBoxWithAtomsProp } from '@dessert-box/react';
import { atoms } from './atoms.css';
const Box = createBoxWithAtomsProp({ atoms });
<Box atoms={{ padding: 'small' }} />;
运行示例应用程序
运行 npm install 接下来 npm run build 在根文件夹中(有此 README 文件的) .
然后移动到示例文件夹中 cd example 运行 npm install 财务报告和审定财务报表 npm start。 。 。 .
怎么会这样?
这个工程依赖于构建时生成的 CSS 喷洒,然后使用 atomsFn 在运行时间中查找类名。 所以它确实有一个运行时间的足迹, 但应该非常小。 我仍然在尝试看是否有可能去除它, 但其他的方法可能导致其他的限制或类似的运行时间.
谢谢
财务问题
- Box 组件是什么?
这是一种通用的元素,可以让你快速地原型并取取出各种造型道具(考虑将许多CSS属性暴露在一个组件上作为道具).
- 我为什么要用Box组件?
Box 组件有很多版本和口味,有些更多 灵活,而其他人则更多 限制性。这个库中的"盒子"属于后一类(限制性),它更适合成为您设计系统的下级API(或作为它的灵感).
这个Box组件是用来作为消费设计符号的原始,在灵活性和约束之间给予你一个很好的平衡. 您可以使用它作为较低等的 API 执行您的其他组件(按钮,卡,布局组件,.),也可以作为原型和一般用法组件:
- 作为一个原型化工具,它允许您使用所有的设计符来生成新的设计并评估您是否需要在您的地基上进行拓扑,或者验证它们是否为您的使用案例工作.
- 对于一般的用法,你仍然可以保证你的系统的用户不会做任何不可能的事(例如:使用一个不是设计符号的一部分的值),但仍有在UI上工作的生产性经验.