|
|
@@ -7,7 +7,7 @@ localeCode: en-US
|
|
|
order: 2
|
|
|
---
|
|
|
|
|
|
-## 1. Installation of Semi
|
|
|
+## 1. Install Library
|
|
|
|
|
|
```bash
|
|
|
# with npm
|
|
|
@@ -19,15 +19,19 @@ yarn add @douyinfe/semi-ui
|
|
|
# with pnpm
|
|
|
pnpm add @douyinfe/semi-ui
|
|
|
```
|
|
|
-## 2、Use components in a modular way 💫
|
|
|
+## 2. Use components in a modular way 💫
|
|
|
+
|
|
|
+`Semi` provides esm format dist, and the css of the component is only imported by the corresponding js.
|
|
|
+When used in `Webpack`, `create-react-app` or `Vite` projects, there is no need to configure any compilation items.
|
|
|
+All related resources are packaged on-demand at build process. Tree shaking will work without additional configuration.
|
|
|
|
|
|
```jsx
|
|
|
import React, { Component } from 'react';
|
|
|
import { Button, Toast } from '@douyinfe/semi-ui';
|
|
|
|
|
|
class Demo extends React.Component {
|
|
|
- constructor() {
|
|
|
- super();
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
@@ -36,9 +40,47 @@ class Demo extends React.Component {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-> It is recommended to introduce [reset.css](https://www.npmjs.com/package/reset-css) into the project, which can avoid introducing the default style of the browser.
|
|
|
+> It is recommended to import [reset.css](https://www.npmjs.com/package/reset-css) into the project, which can avoid introducing the default style of the browser.
|
|
|
+
|
|
|
+## 3、Use in Next.js
|
|
|
+- If you only use the default theme, you can add Semi-related packages to `transpilePackages` (Next.js version requires >= v13.1) .
|
|
|
+```diff
|
|
|
+// next.config.js
|
|
|
+const nextConfig = {
|
|
|
++ transpilePackages: ['@douyinfe/semi-ui', '@douyinfe/semi-icons', '@douyinfe/semi-illustrations'],
|
|
|
+};
|
|
|
+
|
|
|
+module.exports = nextConfig;
|
|
|
+```
|
|
|
+
|
|
|
+- If you need to use a custom theme package or the version of Next.js is lower than v13.1, you need to use the compiling plugin `@douyinfe/semi-next` provided by Semi
|
|
|
+ - First install the plugin `npm i @douyinfe/semi-next` (if you use yarn or pnpm, please replace it with the equivalent command)
|
|
|
+ - Configured in `next.config.js`, the plugin will remove the default import CSS statement of the component. More configurations can be found `@douyinfe/semi-next`[Detail Config](https://www.npmjs.com/package/@douyinfe/semi-next)
|
|
|
+ - import semi css in `global.css` (using this method in Next.js does not support on-demand import)
|
|
|
+```js
|
|
|
+// next.config.js
|
|
|
+const semi = require('@douyinfe/semi-next').default({
|
|
|
+ /* the extension options */
|
|
|
+});
|
|
|
+module.exports = semi({
|
|
|
+ // your custom Next.js configuration
|
|
|
+});
|
|
|
+```
|
|
|
+
|
|
|
+```css
|
|
|
+/* styles/globals.css */
|
|
|
+@import '~@douyinfe/semi-ui/dist/css/semi.min.css';
|
|
|
+```
|
|
|
+
|
|
|
+**How to use theme packages with Next.js**
|
|
|
+You need to change the path of the import statement in globals.css, and replace the default theme CSS product with the CSS product in your customized theme package.
|
|
|
+For example, when you want to use the theme package of the Douyin creation service platform `@semi-bot/semi-theme-doucreator`
|
|
|
+```css
|
|
|
+/* styles/globals.css */
|
|
|
+@import '~@semi-bot/semi-theme-doucreator/semi.min.css';
|
|
|
+```
|
|
|
|
|
|
-## Use UMD import in browser
|
|
|
+## 4. Use UMD import in browser
|
|
|
|
|
|
[![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url]
|
|
|
|
|
|
@@ -52,14 +94,14 @@ class Demo extends React.Component {
|
|
|
Use script and link tags to import files directly in the browser, and use the global variable `SemiUI`、`SemiIcons`、`SemiIllustrations`
|
|
|
|
|
|
1. Please make sure you have import `react` and `react-dom` in advance
|
|
|
-2. Import the JS file, the following example URL 2.1.4 is the version identifier, if you want to use a different version of Semi, just replace the corresponding value in version
|
|
|
+2. Import the JS file, the following example URL 2.27.0 is the version identifier, if you want to use a different version of Semi, just replace the corresponding value in version
|
|
|
|
|
|
| Resource | URL |
|
|
|
| --- | --- |
|
|
|
-| semi-ui (min) | https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/umd/semi-ui.min.js |
|
|
|
+| semi-ui (min) | https://unpkg.com/@douyinfe/semi-ui@2.27.0/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-ui (normal) | https://unpkg.com/@douyinfe/semi-ui@2.27.0/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 |
|
|
|
|
|
|
@@ -67,7 +109,7 @@ Use script and link tags to import files directly in the browser, and use the gl
|
|
|
|
|
|
| Resource | URL |
|
|
|
| --- | --- |
|
|
|
-| semi.css | https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/css/semi.css |
|
|
|
+| semi.css | https://unpkg.com/@douyinfe/semi-ui@2.27.0/dist/css/semi.css |
|
|
|
| semi-icons.css | https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css |
|
|
|
|
|
|
```diff
|
|
|
@@ -78,8 +120,8 @@ Use script and link tags to import files directly in the browser, and use the gl
|
|
|
+ <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
|
|
|
+ <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
|
|
|
|
|
|
-+ <script src="https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/umd/semi-ui-react.min.js"></script>
|
|
|
-+ <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/css/semi.css">
|
|
|
++ <script src="https://unpkg.com/@douyinfe/semi-ui@2.27.0/dist/umd/semi-ui-react.min.js"></script>
|
|
|
++ <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-ui@2.27.0/dist/css/semi.css">
|
|
|
|
|
|
+ <script src="https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js"></script>
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css">
|
|
|
@@ -98,61 +140,13 @@ Use script and link tags to import files directly in the browser, and use the gl
|
|
|
const { IconHome } = SemiIcons;
|
|
|
const { IllustrationConstruction } = SemiIllustrations;
|
|
|
ReactDOM.render(
|
|
|
- <div>
|
|
|
- <Button onClick={() => Toast.warning({ duration: 0, content: 'Semi Design' })}>test</Button>
|
|
|
- <Input defaultValue="semi" onChange={value => Toast.info('abc')}></Input>
|
|
|
- <IconHome size="large" />
|
|
|
- <IllustrationConstruction style={{width: 150, height: 150}} />
|
|
|
- </div>, document.getElementById("root"));
|
|
|
+ <div>
|
|
|
+ <Button onClick={() => Toast.warning({ duration: 0, content: 'Semi Design' })}>test</Button>
|
|
|
+ <Input defaultValue="semi" onChange={value => Toast.info('hello')}></Input>
|
|
|
+ <IconHome size="large" />
|
|
|
+ <IllustrationConstruction style={{width: 150, height: 150}} />
|
|
|
+ </div>, document.getElementById("root")
|
|
|
+ );
|
|
|
</script>
|
|
|
```
|
|
|
|
|
|
-## 4、Use in Next.js
|
|
|
-
|
|
|
-### Step1
|
|
|
-
|
|
|
-Install `@douyinfe/semi-next` in the project root directory.
|
|
|
-
|
|
|
-``` shell
|
|
|
-# with npm
|
|
|
-npm i @douyinfe/semi-next --save-dev
|
|
|
-
|
|
|
-# with yarn
|
|
|
-yarn add @douyinfe/semi-next --dev
|
|
|
-
|
|
|
-# with pnpm
|
|
|
-pnpm add @douyinfe/semi-next --dev
|
|
|
-
|
|
|
-```
|
|
|
-
|
|
|
-### Step2
|
|
|
-
|
|
|
-Create `next.config.js` in the project root directory and configure it.
|
|
|
-
|
|
|
-```js
|
|
|
-// next.config.js
|
|
|
-const semi = require('@douyinfe/semi-next').default({/* the extension options */});
|
|
|
-module.exports = semi({
|
|
|
- // your custom Next.js configuration
|
|
|
-});
|
|
|
-```
|
|
|
-
|
|
|
-[Detailed documentation](https://www.npmjs.com/package/@douyinfe/semi-next) of `@douyinfe/semi-next`.
|
|
|
-
|
|
|
-### Step3
|
|
|
-
|
|
|
-Introduce the full amount of semi css in `global.css`. Currently, on-demand import is not supported.
|
|
|
-
|
|
|
-``` css
|
|
|
-/* styles/globals.css */
|
|
|
-@import '~@douyinfe/semi-ui/dist/css/semi.min.css';
|
|
|
-
|
|
|
-```
|
|
|
-
|
|
|
-**Using theme in nextjs**
|
|
|
-
|
|
|
-You need to replace the path of the import statement in Step3, and replace the default theme CSS product with the CSS product in your customized theme package, for example, the theme package is `@semi-bot/semi-theme-nyx-c`
|
|
|
-```css
|
|
|
-/* styles/globals.css */
|
|
|
-@import '~@semi-bot/semi-theme-nyx-c/semi.min.css';
|
|
|
-```
|
pointhalo