1、安装 Semi
2、模块化方式使用组件
在 Webpack、create-react-app 或 Vite 项目中使用时,无需进行任何编译项配置,直接使用即可。构建时所有相关资源均会按需打包。
推荐在项目中引入 reset.css,它可以重置浏览器自带的默认样式,避免不同UA之间的样式差异。
3、在 Next.js 中使用
当你在 Next.js 项目中使用时,需要搭配 Semi 提供的编译插件(由于 Next.js 不允许 npm 包从 node_modules 中 import 样式文件,需要配合插件将默认的import CSS 语句移除,并且手动引入 CSS)
Step1
在项目根目录安装
@douyinfe/semi-next
。Step2
在项目根目录创建
next.config.js
,并进行配置。@douyinfe/semi-next
的 详细文档 。Step3
在
global.css
中引入全量的 semi css。目前不支持按需引入。如何在 nextjs 中使用主题包
你需要更换 Step3 中 import 语句的路径,将默认主题 CSS 产物更换为你定制的主题包中的 CSS 产物,例如主题包为
你需要更换 Step3 中 import 语句的路径,将默认主题 CSS 产物更换为你定制的主题包中的 CSS 产物,例如主题包为
@semi-bot/semi-theme-nyx-c
4、UMD 方式使用组件
我们并不推荐直接使用已构建文件,这样会全量引入所有组件,无法实现按需加载。但如果确实有非构建场景的需求,可以通过以下方式引用
在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量
SemiUI
、SemiIcons
、SemiIllustrations
1、 请确保你已提前引入 react 以及 react-dom
2、 引入 JS 文件,以下示例 URL 中 2.1.4 为 version 标识,希望使用不同版本 Semi 时,将 version 中对应的值替换即可
2、 引入 JS 文件,以下示例 URL 中 2.1.4 为 version 标识,希望使用不同版本 Semi 时,将 version 中对应的值替换即可
资源 | URL |
---|---|
semi-ui (min) | https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/umd/semi-ui.min.js |
semi-icons (min) | https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js |
semi-illustrations (min) | https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js |
semi-ui (normal) | https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/umd/semi-ui.js |
semi-icons (normal) | https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.js |
semi-illustrations (normal) | https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.js |
3、 引入 Semi 默认主题的 CSS 样式文件
资源 | URL |
---|---|
semi.css | https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/css/semi.css |
semi-icons.css | https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css |