@galaxy-io/dls (英语)
Galaxy Design Language System:一个用于Filament的React组件库,GX应用程序和每个Galaxy React表面. 单色,稠密,发线-静音;预编Linaria CSS通过CSS自定义属性来读取,因此一个主题开关从此不再重发应用程序.
安装
pnpm add @galaxy-io/dls
22,反应18或19,无害环境管理。 重型单一组件库(图表、表格、代码编辑器、代码突出显示器、Markdown、克龙和颜色输入、3D和动画品牌标记)是可选的同位素; 正在启动 列出需要哪个子路径.
快开始
一个命令中的新应用程序:Vite与 DLS Linaria 预设,Biome与 DLS 规则, 三样式表, GalaxyProvider,和一个薄的 Filament 形状的应用程序:文件路由, ConnectRPC 在模拟运输上的查询,帧和两页.
pnpm create @galaxy-io/galaxy-app my-app
--template blank 仅写提供者和一页. 正在启动 列出选项; 任何 Galaxy 应用程序的根都是这样:
// Once, at the app root: component styles, tokens, fonts.
import "@galaxy-io/dls/styles.css";
import "@galaxy-io/dls/tokens.css";
import "@galaxy-io/dls/fonts.css";
import { PlusIcon } from "@phosphor-icons/react";
import Button, { ButtonVariant } from "@galaxy-io/dls/buttons/Button";
import Flex, { FlexDirection } from "@galaxy-io/dls/layout/Flex";
import Text, { TextSize, TextWeight } from "@galaxy-io/dls/text/Text";
import GalaxyProvider from "@galaxy-io/dls/theme/GalaxyProvider";
export function App() {
return (
<GalaxyProvider>
<Flex direction={FlexDirection.COLUMN} gap={16} padding={24}>
<Text as="h1" size={TextSize.HEADING_MD} weight={TextWeight.MEDIUM}>
Sources
</Text>
<Flex gap={8}>
<Button label="New source" icon={PlusIcon} />
<Button label="Import" variant={ButtonVariant.SECONDARY} />
</Flex>
</Flex>
</GalaxyProvider>
);
}
- 从自己的子路径导入每个组件;其元件来自同一个模块. 没有枪管.
GalaxyProvider是一根:主题(System / Dark / Light),上叠和土司.- 用 Linaria 和符号存取器样式自己的代码
t(单位:千美元)@galaxy-io/dls/theme/tokens/t),设置为galaxyDls()从@galaxy-io/dls/vite与"extends": ["@galaxy-io/dls/biome"]。 。 。 .
文档
| 开始 | 安装、 Vite、 样式表、 提供者、 SSR |
| 他们 | 主题和每个标志 |
| 构成部分 | 每个组件,何时使用,例 |
| 模式 | 银河屏幕的构建方式 |
| 无障碍 | 地板和键盘地图 |
| 从 1.x 移动 | 代码和自1.6.1以来的每一个变化 |
| 捐款 | 致力于建立这一存储库( :一般事务人员(其他职等) (有规则) |
| 故事书 | 两个主题的每个组成部分,道具和状态 |
从 1.x 移动
npx @galaxy-io/dls-codemod src --report dls-migrate.json
代码重写所有机械设备 并标出其余的 @dls-migrate <id> 评论意见; 文献/地图 解释每一个身份.
克劳德的技巧
skills/galaxy-ui 教克洛德用这个软件包设计、构建和构建 Galaxy 应用程序:应用程序架构 create-galaxy-app 脚手架(堆放,文件和命名,路由和URL状态,ConnectRPC数据层和模拟,屏幕贝壳,形式,可挂载模块),品牌规则,组件决定表,符号,图案和完整的屏幕食谱. 它的 DLS 示例会根据此寄存器进行类型检查( Namepnpm skill:check) (中文(简体) ).
- 克劳德代码 : 将文件夹复制到您的技能目录 :
cp -R skills/galaxy-ui ~/.claude/skills/(或项目).claude/skills/) (中文(简体) ). - Claude 应用程序 : 运行
pnpm skill:pack上传dist-skill/galaxy-ui.zip作为技能(安置) 能力(技能).
细节 : 技能/银河水/README.md。 。 。 .