构建美妙的东西。
使用样式属性、颜色模式、主题和变体的快速 UI 开发库。
样式属性
将任何 CSS 属性用作属性，快速设置组件样式。
响应式样式
通过几个按键添加移动端优先的响应式样式。
主题支持
使用一个主题来设置字体、颜色和间距。
变体
将样式提取到主题中。重复使用它们。对其进行组合。
颜色模式
添加暗模式。添加亮模式。添加任何颜色模式。
Typescript
Typescript 已开箱即用，支持 Intellisense 和 Emmet。
无需学习过程。
你早已知道如何使用它。将任何 CSS 属性用作样式属性，快速设置组件样式。无需学习新语法或类名。
代码
<button>
按钮
</button>
预览
Reflexjs 还包含一些可选帮助属性，例如 bg 表示 backgroundColor、p 表示 padding、mt 表示 marginTop、 rounded 表示 borderRadius 等。
使用更少的键入字符响应变化。
通过几个按键添加移动端优先的响应式样式。
代码
<div
display="grid"
col="1"
gap="4"
>
<Cube />
<Cube />
<Cube />
<Cube />
</div>
预览
一
二
三
四
通过用竖线分隔你的值，使任何样式属性响应变化 |。这是添加响应式样式的最简单方法。
构建设计系统。
使用一个主题来设置字体、颜色和间距，以实现基于约束的样式属性。
主题
const theme = {
colors: {
primary: "#06f"
},
fontSizes: {
sm: "0.8rem",
lg: "2.4rem"
}
radii: {
sm: "1rem",
xl: "4rem"
}
}
代码
<button>
按钮
</button>
预览
一流的变体支持。
将样式提取到主题中。重复使用它们。将它们嵌套。对其进行组合。
主题
const theme = {
colors: {
primary: "#06f",
secondary: "#fb3640",
}
button: {
rounded: "md",
cursor: "pointer",
px: 4,
px: 3,
primary: {
bg: "primary"
}
secondary: {
bg: "secondary"
}
lg: {
px: 5
py: 4
}
}
}
代码
<button>Primary</button>
预览
颜色模式。
添加暗模式。添加亮模式。添加任何颜色模式。
主题
const theme = {
colors: {
background: "#fff",
color: "#111"
}
}
代码
<div bg="background" color="text">
<h4>Heading</h4>
<p>Consectetur maxime similique quae.</p>
</div>
预览
标题
Consectetur maxime similique quae.
更多内容...
Typescript、Intellisense、Emmet。作为一名开发者，你需要的一切。