尾风回放 UI
编号 : 正如"0.#.#"的版本号所显示的那样,这仍然有很多工作在进行中,因此在V1发行被固化之前不会遵循语义化的版本. 期望在小版本跳出时会发生中断更改 .
Tailwind React UI 提供了可用的已建组件 尾风 CSS 公用事业框架.
若您不熟悉 Tailwind背后的概念, 请访问https://tailwindcs.com/docs/What-is-tailwind:
创建构建自定义 UIs 的框架,意味着您无法在按钮,窗体,卡片,导航等通常的级别提供抽象. 取而代之的是,Tailwind提供了高度可调和,低级的公用类,使得建立复杂的用户界面变得容易.
Tailwind React UI 利用这些公用类来提供各种项目中常见的基等组件,同时仍然提供自定义输出的能力来匹配您的工程风格.
特征
无样式构建
Tailwind React UI的组件没有内置/封装样式(禁止一些用于CSS过渡),因此没有特定问题,JS工具链中也没有新的CSS可以应用. 图书馆只使用由 尾风 CSS 您的整个应用程序将使用可用钩子来指定应用的类.
工具类道具
引入 道具 API 用于 Tailwind 的自定义类和快速原型
- 通过
withTailind更高级的顺序组件,或者通过使用组件原始来处理下风
可配置 主题
有个 可配置主题 应用设计系统方法来设计部件的基质
-
用途 反应上下文 用于自定义默认应用的颜色 / 空格 / 等类
-
仍然可以利用所有组件中的公用道具来以任何你想要的方式来覆盖默认的发型,同时在再生成组件中应用合理默认,例如.
<FillButton bg="purple-dark" text="white" />还将对由此产生的要素采用交互式样式<button className="bg-purple text-white hover:bg-purple-darker focus:bg-purple-darker" />
可构成组件
Tailwind React UI的成套组件具有高度的可调和性,可以有很大的灵活性.
-
部件基本上可以使用,但可酌情提供包装来控制UI状态来打开/关闭/etc.
-
组件具备无障碍最佳做法;投入将读出相关的帮助/错误文本,可切换组件正确呼出其开放状态等
PurgeCSS 支助
清洗 当使用 TailwindCSS 来剥去任何未使用的公用设施时, 并避免任何复杂情况时, 库会提供您的主题将从组件生成的类的白名单, 以及解析组件使用的公用类道具的自定义提取器 .
示例
使用工具组件
<Box maxW="md" m={{ x: 'auto' }}>
<Box border shadow bg="white">
<Box p={4}>
<Text is="h1" text={['blue', 'xxl']} m={{ b: 4 }}>
Hello World
</Text>
</Box>
<Flex items="end" wrap reverse>
<Touchable
p={{ x: 4, y: 2 }}
border={[true, 'transparent']}
bg="blue"
bg-hocus="blue-dark"
text="white"
w="full"
w-sm="1/5"
>
Foo
</Touchable>
<Touchable
p={{ x: 4, y: 2 }}
border={[true, 'blue']}
text="blue"
text-hocus="white"
bg-hocus="blue"
w="full"
w-sm="1/5"
>
Bar
</Touchable>
</Flex>
</Box>
</Box>
使用 UI 组件
<Container maxW="md">
<Card border shadow>
<CardBody>
<Title size={6} text="blue">
Hello World
</Title>
</CardBody>
<CardFooter wrap>
<FillButton brand="primary" w="full" w-sm="1/5">
Foo
</FillButton>
<OutlineButton brand="primary" w="full" w-sm="1/5">
Bar
</OutlineButton>
</CardFooter>
</Card>
</Container>