@canva/ app- ui- kit (英语)
基于反应的组件库用于创建Canva Apps来模仿Canva的外观和感觉.
目录
导言
App UI Kit 是一个基于反应的组件库,用于设计和开发 Canva 应用程序 模仿着外表和感觉 彩绘。 。 。 .
| 要更多地了解Canva上的应用开发情况,请参见: |
|
| 要浏览App UI Kit中的所有组件,请参见: |
|
说明: 如果你打算向公众发布一个 Canva App, 我们强烈建议使用 App UI Kit我们期望应用软件能达到某些设计标准 没有组件就很难做到.
特征
- 基于Canva自己的工程师所使用的组件.
- 以可访问性,可使用性,和跨平台相容而建.
- 包括用于创建自定义组件的设计符号 .
安装
npm install @canva/app-ui-kit
使用量
说明: 如果你在用的话 启动工具箱这些步骤已经为你做了.
应用的基础,例如: index.tsx 文件 :
-
导入样式表 :
import '@canva/app-ui-kit/styles.css'; -
导入
AppUiProvider组件 :import { AppUiProvider } from '@canva/app-ui-kit'; -
将应用程序包入
AppUiProvider组件 :<AppUiProvider> <App /> </AppUiProvider>此组件只应在应用程序组件树上使用一次 .
完成这些步骤后,从 @canva/app-ui-kit 软件包 :
import { Button, Rows, Text, Title } from '@canva/app-ui-kit';
import * as React from 'react';
export function App() {
return (
<Rows spacing="2u">
<Rows spacing="1u">
<Title>Hello world</Title>
<Text>This is a paragraph of text.</Text>
</Rows>
<Button variant="primary">Click me</Button>
</Rows>
);
}
这些组成部分必须作为土著人民后裔存在 AppUiProvider 组件.
组件和图标
App UI Kit 输出一些 构成部分 (例如:. Button, (中文(简体) ), Text, (中文(简体) ), Rows等)和 (中文(简体) ) 图标 (例如:. PlusIcon, (中文(简体) ), SearchIcon用于您的应用程序 .
关于所有组件和图标的完整列表和文件,见我们的故事书实例:
设计符号
设计符是用于存储与设计相关的数值如颜色等的变量. 它们作为设计属性的单一真理来源,使得UI更加容易保持一致性和可维护性.
App UI Kit将设计符号暴露为JavaScript和CSS变量. Apps可以使用这些符号来创建或自定义符合Canva外观和感觉的组件. 如果 Canva 更改了令牌的值, 这些更改会自动反映在应用程序中 .
CSS 变量
您可以使用全局样式表中的 CSS 变量, CSS 模块, 或者应用的源代码 :
.button {
background-color: var(--ui-kit-color-primary);
}
变量以 kebab 大小写,并带有前缀 --ui-kit-。 。 。 .
JavaScript 变量
您可以使用应用程序源代码中的 JavaScript 变量 :
import { tokens } from '@canva/app-ui-kit';
function App() {
return <div style={{ backgroundColor: tokens.colorPrimary }}>Hello world.</div>;
}
变量用骆驼案来写出,没有前缀.
设计符号列表
您可以在 Canva 开发者文档网站上找到设计符的参考文档 :
更改日志
见 CHANGELOG.md 文档或查看到我们 文档网站。 。 。 .
捐款
我们正在积极开发这个一揽子计划,但目前不接受第三方的捐款. 如果您想要求修改或添加软件包,请通过 Canva 开发者社区。 。 。 .
许可证
见 LICENSE.md 文档.