翻译:
DS-GN设计框架不可知网络组件和反应包 系统.
公开beta • 妇女 网站 • 妇女 文档 • 妇女 构成部分参考 • 妇女 更改日志 • 妇女 公共仓库
npm的存储器链接指向 我们的私人建设存储器,这是需要的 页:1 举例和问题报告,请访问 公共设计系统存放处。 。 。 .
安装
选择您的软件包管理器 :
npm install @ds-gn/ui @ds-gn/tokens
pnpm add @ds-gn/ui @ds-gn/tokens
bun add @ds-gn/ui @ds-gn/tokens
直接安装指针包是因为您的应用程序导入其
样式表。 两个软件包都来自公共 npm , 需要否 .npmrc 或者说
权利标志.
快开始
在应用程序样式表中导入设计符 :
@import '@ds-gn/tokens/public';
@import '@ds-gn/tokens/theme';
@import '@ds-gn/tokens/properties';
三者皆须入. properties 注册输入的自定义属性
组件的样式取决于 —— 阴影根无法注册 @property
本身,所以没有这个导入,这些样式会默默地放弃而不是
出错(变相停止应用,锚地板落地出错).
然后只导入您使用的组件 。 导入组件时登记其 自定义元素 :
import '@ds-gn/ui/button';
<dsgn-button appearance="outline">Get started</dsgn-button>
反应
每个组件都会生成官方反应包. 反应是可选的 对等依赖,所以在应用程序中安装它.
import { Button } from '@ds-gn/ui/react';
export function Cta() {
return <Button appearance="outline">Get started</Button>;
}
包装器保留其纯元件名称( :Button, (中文(简体) ), Input,等等).
如果与本地组件相冲突, 则不作为导入 :
import { Button as DsgnButton } from '@ds-gn/ui/react';
自定义事件被曝光为 on<EventName> 以其基础命名的道具
dsgn-* 例如 onDsgnInput 财务报告和审定财务报表 onDsgnImageError。 。 。 .
软件包出口
| 导出 | 目的 |
|---|---|
@ds-gn/ui/<component> | 注册一个自定义元素,例如: button |
@ds-gn/ui/<component>/props | 组成部分财产定义和支持出口 |
@ds-gn/ui/react | 每个组件都打入了反应包 |
@ds-gn/ui/logo | 日志字符串助手 |
@ds-gn/ui/logo/mark.svg | DS- GN 标志 |
@ds-gn/ui/logo/full.svg | 光背景的完整的DS/GN标志 |
@ds-gn/ui/logo/light.svg | 光背景的完整的DS/GN标志 |
@ds-gn/ui/logo/dark.svg | 暗背景的完整DS/GN标志 |
@ds-gn/ui/layout.css | 页面布局的可选预升级样式 |
@ds-gn/ui/hero/fallback.css | 英雄的可选升级前样式 |
@ds-gn/ui/playground-manifest | 可读部件游乐场元数据 |
字符串助手继承 currentColor 写出主题感知的字母 并保持斜线橙色。 使用 getLogoHtml({ size: 24 }) 使艺术作品在一定高度上具有无障碍名称.
服务器渲染
- SSR 节点主机 (包括Next、Remix、Nuxt、SvelteKit、Astro和TanStack)
从节点开始 : 导入
@ds-gn/ui/react服务器渲染时为 安全无虞. 服务器释放出一个惰性<dsgn-*>在客户端上升级的标签 . 声明的影子 DOM 不被放出,所以可以有一个简短的无风格的框架 升级前; 下面预升级样式表覆盖布局 组件。 反应属性为应用客户端; passid, (中文(简体) ),class,与普通属性相类似. - 云旗工人d (包括TanStack Start on Workers): 完整的SSSR不是
由于自定义元素无法在
工人运行时间。 只装入包装客户端, 如后面的
ClientOnly带有懒惰导入的边框.
在组件注册前
当您的 HTML 在组件脚本运行前被渲染( 服务器渲染) 或静态页面),在页面 CSS 中导入可选的升级前样式表:
@import '@ds-gn/ui/layout.css';
@import '@ds-gn/ui/hero/fallback.css'; /* only if you use dsgn-hero */
它们只在每项要素登记之前适用. layout.css 集装箱,
导航 特性标签和页脚到最后的沟槽和区间间,
保留导航栏的高度, 并保持导航链接和下降的隐藏
直到它把他们弄出来. hero/fallback.css 对每个英雄都一样
设置。 没有它们,内容可以移动或闪出为未设置的文本,同时
脚本装入.
公共beta 组件和兼容政策
公共beta包含32个自定义元素:
| 组 | 包含的组成部分 |
|---|---|
| 辅助能力 | Button (单位:千美元)dsgn-button, (中文(简体) ), DropdownMenu (单位:千美元)dsgn-dropdown-menu, (中文(简体) ), Field (单位:千美元)dsgn-field, (中文(简体) ), Input (单位:千美元)dsgn-input, (中文(简体) ), Modal (单位:千美元)dsgn-modal, (中文(简体) ), SegmentedControl (单位:千美元)dsgn-segmented-control, (中文(简体) ), Select (单位:千美元)dsgn-select, (中文(简体) ), Table (单位:千美元)dsgn-table, (中文(简体) ), Toaster (单位:千美元)dsgn-toaster(中文(简体) ) |
| 显示和布局 | Background (单位:千美元)dsgn-background, (中文(简体) ), Badge (单位:千美元)dsgn-badge, (中文(简体) ), Card (单位:千美元)dsgn-card, (中文(简体) ), CodeBlock (单位:千美元)dsgn-code-block, (中文(简体) ), Container (单位:千美元)dsgn-container, (中文(简体) ), Divider (单位:千美元)dsgn-divider, (中文(简体) ), Grid (单位:千美元)dsgn-grid, (中文(简体) ), Stack (单位:千美元)dsgn-stack(中文(简体) ) |
| 内容 | Heading (单位:千美元)dsgn-heading, (中文(简体) ), Text (单位:千美元)dsgn-text, (中文(简体) ), Icon (单位:千美元)dsgn-icon, (中文(简体) ), Image (单位:千美元)dsgn-image, (中文(简体) ), Callout (单位:千美元)dsgn-callout, (中文(简体) ), CodeSnippet (单位:千美元)dsgn-code-snippet(中文(简体) ) |
| 营销和组成 | Hero (单位:千美元)dsgn-hero, (中文(简体) ), HeadingBlock (单位:千美元)dsgn-heading-block, (中文(简体) ), FeatureItem (单位:千美元)dsgn-feature-item, (中文(简体) ), FeatureTabs (单位:千美元)dsgn-feature-tabs, (中文(简体) ), FormBlock (单位:千美元)dsgn-form-block(中文(简体) ) |
| 导航 | Nav (单位:千美元)dsgn-nav, (中文(简体) ), NavLink (单位:千美元)dsgn-nav-link, (中文(简体) ), NavDropdownColumn (单位:千美元)dsgn-nav-dropdown-column, (中文(简体) ), Footer (单位:千美元)dsgn-footer(中文(简体) ) |
公共贝塔的摩达尔船. 目前没有导出自定义元素 除外。 极光网引擎是一个内部渲染辅助器,不是自定义 元素或软件包导出。 阿凡达和另一个 路线图上的应用级组件是发射后的工作.
包子还在 0.x数字 :
- 所列组成部分得到消费者评价和生产支持
,但是他们的API可能会在
1.0。 。 。 . - 补丁释放不会故意打破记录的API. 计划中断 使用迁移指导在少量释放物中改变船舶.
- 至少有一个被贬损的API可以完全释放 并且至少90天,以时间更长者为准,然后搬走。 安全、合法或 打破平台的紧急情况可能需要更快的改变.
- 兼容合同涵盖有文件记载的组件子路径、自定义 元素标记、属性和属性、槽、方法、事件、 CSS 部件 和自定义属性,并生成 React 包装。 无记录的内部 不是公开的 API.
支助
公众搜索或报告软件包问题 问题跟踪器用于 问题、电子邮件 支持@ds-gn.com。 。 。 .
许可证
这个软件包根据包含在 LICENSE。 。 。 .
列入分发范围的第三方材料仍须遵守
所列许可证 THIRD_PARTY_NOTICES。 。 。 .