砖头UI
React 19 和 Next.js 的回放组件: Text, Flex, Button, Card, Chip, Skeleton,, 图标按钮, 循环导航和进步栏 .
发展
npm install
npm run typecheck
npm run build
npm run storybook
使用量
import { Button, Flex, Text } from "@divayth/brick-ui";
import "@divayth/brick-ui/styles.css";
<Flex alignItems="center">
<Text weight="medium">Brick UI</Text>
<Button>Continue</Button>
</Flex>;
邮包船汇编了CSS;消费者不需要Tailwind. 不包括全球CSS重设。 颜色可以通过 CSS 变量被覆盖 . 交互按钮保留其“ 使用客户端” 指令; Text and Flex 仍然与服务器兼容 .
输入和文本区域
使用 Input 用于单行字段和 Textarea 用于多行文本.
替换 <Input multiline rows={5} /> 与 <Textarea rows={5} />。 。 。 .
两个组件都保持了相同的字段样式,标签,出错,图标和大小.
他们的本土道具,事件,和校对都符合各自的HTML元素.
Textarea 随内容而增长:使用 minRows 财务报告和审定财务报表 maxRows 来设定限度.
上层 maxRows,内容滚动到域内. rows 用作
最小时间 minRows 未提供.
选择和自动完成
数值类型推断自 options;不需要明确的JSX类型论证.
SelectProps 财务报告和审定财务报表 AutocompleteProps 默认描述单项选择.
使用 SelectProps<number, true> 或者说 AutocompleteProps<number, true> 用于多个选择的包装.
multiple 财务报告和审定财务报表 clearable 默认关闭。 添加 clearable 允许清除;
清除单个选择返回 undefined。 。 。 . multiple 返回数组.
<Autocomplete
options={[{ value: 1, label: "Alice" }]}
onChange={(id) => console.log(id)} // number
/>
SelectProps 描述选择控件. AutocompleteProps 还包括
onSearchChange, (中文(简体) ), searchPlaceholder,以及 filterOptions。 。 。 . SelectCommonProps
包含共享道具、选项和加载状态.
选项不默认过滤 。 过 filterOptions 能够进行本地搜索,
或用途 onSearchChange 从服务器获取选项。 替换旧的
<Select searchable /> API 为 <Autocomplete />。 。 。 .
主题
Provider 包括光和暗调色板。 它恢复主题从
theme 未提供初始或控制主题时的 cookie .
import { Provider, useProvider } from "@divayth/brick-ui";
function ToggleTheme() {
const { theme, onChangeTheme } = useProvider();
return (
<button onClick={() => onChangeTheme(theme === "dark" ? "light" : "dark")}>
Toggle theme
</button>
);
}
<Provider locale="en">
<ToggleTheme />
</Provider>;
" SSR " 中,读取服务器上的饼干并传递其验证值为
defaultTheme应用 getThemeStyle(theme) 财务报告和审定财务报表 data-theme={theme} 改为
html 以避免水合前的光闪烁。 下一个.js不是一个依赖.
对于自定义调色板, 通过 themes 两者 Provider 财务报告和审定财务报表 getThemeStyle。 。 。 .
可选 defaultTheme 道克设定了初始主题,并优先于饼干.
挂载全球提供商:主题样式和门户共享文档根.
对于 Tailwind v4 应用程序, 请在您的全球 CSS 中注册库符 :
@import "tailwindcss";
@import "@divayth/brick-ui/theme.css";
继续导入 @divayth/brick-ui/styles.css 用于组件样式.
结构
src/ui——组件,CSS模块和故事本.src/lib——共享大小尺度,类型和标志.
Size数字 : xs | sm | md | lg | xl。 。 。 .
按钮支持所有5个大小(高24 / 32 / 40 / 48. 56 px).
Flex差距支持相同的比例(4 / 8 / 16 / 24 / 32 px).
文本使用相同名称和默认值 md。 。 。 .
文本还支持 inherit, (中文(简体) ), 2xl, (中文(简体) ), 3xl 财务报告和审定财务报表 4xl。 。 。 .
控制高度和水平垫可以被覆盖
--height-* 财务报告和审定财务报表 --padding-* CSS变量.