@apify/ui-library

浏览元件 主机故事本。 。 。 .

Apify's React design- system library——原始的,主题符号,以及跨Apify Console和营销网络共享的有风格的组件.

安装

pnpm add @apify/ui-library

同伴依赖关系( 如果还没有在您的项目中安装的话) :

• react 17.x; 18.x; 19.x; 19
• react-dom 17.x; 18.x; 19.x; 19
• styled-components ^ 6.1.1.19 (韩语)

快开始

import { Box, Button, Text } from '@apify/ui-library';

export const SaveBar = ({ onSave }: { onSave: () => void }) => (
    <Box pt="space8" pb="space8">
        <Text size="regular">You have unsaved changes.</Text>
        <Button variant="primary" color="default" mt="space4" onClick={onSave}>
            Save
        </Button>
    </Box>
);

<Box> 显示间距符作为工具道具( e)pt, (中文(简体) ), mb, (中文(简体) ), mx, (中文(简体) ), p(......) ; (......); <Text> 财务报告和审定财务报表 <Heading> 通过 size。所有值来自共享 theme ——从硬码的颜色,间隔,或弧度.

里面的东西

• 版式 —— 说 Box (任何元素的通用道具包装)
• 类型 —— 说 Text, (中文(简体) ), Heading,加上内容/共享/营销变体
• 表单 —— 说 Button, (中文(简体) ), IconButton, (中文(简体) ), Checkbox, (中文(简体) ), RadioButton, (中文(简体) ), Switch, (中文(简体) ), Select
• 数据 —— 说 Table + 原始种 (TableHead, (中文(简体) ), TableRow, (中文(简体) ), TableCell,(......), Badge, (中文(简体) ), Chip, (中文(简体) ), Tag
• 反馈 —— 说 Banner, (中文(简体) ), Message, (中文(简体) ), Spinner
• 导航 —— 说 Tabs, (中文(简体) ), Breadcrumb, (中文(简体) ), Pagination, (中文(简体) ), Link
• 重叠 —— 说 Floating (菜单、工具提示), CollapsibleCard
• 主题符号 —— 说 theme.color.*, (中文(简体) ), theme.space.*, (中文(简体) ), theme.text.*, (中文(简体) ), theme.radius.*, (中文(简体) ), theme.shadow.*, (中文(简体) ), theme.transition.*

使用样式组件以外的颜色符号

对于不使用风格化组件的外部项目——如基于 Tailwind 的应用软件或平面 CSS —— 包船预建的 CSS 文件,将所有颜色符号注册为 CSS 自定义属性 :root数字 :

• @apify/ui-library/style/colors/tokens.light.css
• @apify/ui-library/style/colors/tokens.dark.css

在全局样式表中导入匹配您主题的文件 :

@import '@apify/ui-library/style/colors/tokens.light.css';

您可以通过 CSS 自定义属性引用任何令牌 :

.my-element {
    color: var(--color-neutral-text);
    background: var(--color-neutral-background);
    border-color: var(--color-neutral-border);
}

对于 Tailwind , 将变量映射到 tailwind.config.js数字 :

/** @type {import('tailwindcss').Config} */
export default {
    theme: {
        extend: {
            colors: {
                'neutral-text': 'var(--color-neutral-text)',
                'neutral-bg': 'var(--color-neutral-background)',
                'neutral-border': 'var(--color-neutral-border)',
            },
        },
    },
};

故事书

从寄存器根 :

pnpm run storybook

这两本故事书同时开始 http://localhost:6006 (英语) 和共享设计系统故事(本库) http://localhost:6007 (英语)。 。 。 .

捐款

见 CONTRIBUTING.md 用于组件生命周期、设计-调试同步(图像颜色和超新星打字)、故事本惯例、出版和审查清单。 新的组件最容易与脚手架 /create-ui-component 克劳德密码技术.