构造器 UI 组件库
导言
UI组件库是Resact组件的集合,可用于为Constructionor.io产品构建UI.
我们 故事书 Docs 全面概述每个组成部分,包括其行为、变化和配置选项.
所需资源
- 节点.js v22.1.8.0 (LTS Jod)
- 反应 :
- 反应 DOM QQ16.12.0
安装
npm i @constructor-io/constructorio-ui-components
用法图案
正常使用
import { Button } from '@constructor-io/constructorio-ui-components';
import '@constructor-io/constructorio-ui-components/styles.css'
function App() {
return <Button>Click me</Button>;
}
使用 asChild
import { Badge } from '@constructor-io/constructorio-ui-components';
import '@constructor-io/constructorio-ui-components/styles.css'
function App() {
return (
<Badge asChild variant="outline">
<a href="#">
A link that looks like a badge
</a>
</Badge>
);
}
组件覆盖
import { Button } from '@constructor-io/constructorio-ui-components';
import '@constructor-io/constructorio-ui-components/styles.css'
function App() {
return (
<Button
componentOverrides={{
reactNode: <span>A span rendered in place of a button</span>
}}
>
This will be overridden
</Button>
);
}
通过数据属性
import { Button } from '@constructor-io/constructorio-ui-components';
import '@constructor-io/constructorio-ui-components/styles.css'
function App() {
return <Button data-cnstrc-price={23.25}>Purchase</Button>;
}
复合组件
import { ProductCard } from '@constructor-io/constructorio-ui-components';
import '@constructor-io/constructorio-ui-components/styles.css'
function App() {
return (
<ProductCard
product={{
id: 'highland-golf-pants',
variationId: 'highland-golf-pants--navy',
name: "Highland Golf Pants",
imageUrl: 'https://example.com/pants.jpg',
price: '799',
rating: 4.8,
reviewsCount: 203,
description: 'Premium golf pants designed for comfort and performance on the course',
}}
className='overflow-hidden max-w-md'
>
<div className='grid grid-cols-2 gap-4 p-4'>
<ProductCard.ImageSection />
<div className='space-y-2'>
<ProductCard.PriceSection />
<ProductCard.TitleSection />
<ProductCard.RatingSection />
</div>
</div>
<ProductCard.Footer>
<ProductCard.AddToCartButton />
</ProductCard.Footer>
</ProductCard>
);
}
尾风 CSS 前缀
此库使用 Tailwind CSS v4 并带有 cio: 用于避免与应用程序的 Tailwind 类相冲突。 所有公用分类和CSS变量都被命名空格来保证样式不会出漏或相撞.
类别
代码库使用两个不同的类名空间. 它们看起来相似,但用途不同:
cio-*(无结肠) —— 与组件根和关键子元素相接的平版 CSS 钩/ BEM 标识符(例如,cio-components, (中文(简体) ),cio-badge, (中文(简体) ),cio-product-card-image, (中文(简体) ),cio-filter-visual-swatch) (中文(简体) ). 这些是用于外形覆盖和测试的稳定选择器;它们是 没有 尾风公用事业公司 永远 前缀为cio:。 。 。 .cio:*(用结肠) - 尾风 v4 功能类,由prefix(cio)导入指令(例如,cio:flex, (中文(简体) ),cio:hover:bg-primary/90) (中文(简体) ). 本节其余部分的公约适用于这些公约.
// Both kinds appear together on the same element:
<div className="cio-badge cio:inline-flex cio:items-center cio:gap-1.5">
类别命名公约
当在此库中添加或定制 Tailwind 类时, 总是使用 cio: 前缀 :
// Correct
<div className="cio:flex cio:items-center cio:gap-2">
// Incorrect - will not work
<div className="flex items-center gap-2">
备选案文和修改
前缀必须来 在此之前 任何变体(覆盖、焦点、响应等):
// Correct - prefix first, then variant, then utility
<button className="cio:bg-primary cio:hover:bg-primary/90 cio:disabled:opacity-50">
// Incorrect - variant before prefix
<button className="hover:cio:bg-primary/90 disabled:cio:opacity-50">
响应断点
// Correct
<div className="cio:p-2 cio:sm:p-4 cio:lg:p-6">
// Incorrect
<div className="cio:p-2 sm:cio:p-4 lg:cio:p-6">
任意值和选择器
// Correct
<div className="cio:w-[200px] cio:[&_svg]:size-4">
// Incorrect
<div className="[&_svg]:cio:size-4">
CSS 变量
CSS 变量的前缀为 --cio-数字 :
:root {
--cio-primary: oklch(0.1969 0.0101 276.49);
--cio-background: oklch(1 0 0);
--cio-radius: 0.625rem;
}
自定义主题
您可以通过设置应用程序中的 CSS 变量来覆盖默认主题 :
:root {
--cio-primary: #your-brand-color;
--cio-radius: 0.5rem;
}
地方发展
开发脚本
npm ci # Install dependencies for local dev
npm run dev # Start a local dev server for Storybook
npm run lint # Run lint
npm run test # Run unit tests
构建脚本
npm run compile # Compile the library, remove aliases, copy styles
npm run build-storybook # Build Storybook
npm run serve-built-storybook # Serve the built Storybook
捐款
- 叉出 repo 创建新分支( C) .
- 运行 npm 安装以安装依赖 .
- 提交公关审查.
许可证
麻省理工学院 建筑师.io