소스 검색

chore: add semiGlobal config doc

DaiQiangReal 1 년 전
부모
커밋
f63cc867bc
3개의 변경된 파일85개의 추가작업 그리고 0개의 파일을 삭제
  1. 41 0
      content/other/configprovider/index-en-US.md
  2. 42 0
      content/other/configprovider/index.md
  3. 2 0
      packages/semi-ui/index.ts

+ 41 - 0
content/other/configprovider/index-en-US.md

@@ -8,6 +8,15 @@ dir: column
 brief: Provide a unified global configuration for components.
 ---
 
+## Scenes to be used
+
+Coverage configuration is divided into two scenarios
+
+- When you need to override sub-component configuration, use ConfigProvider
+- When you need to globally modify component Props, use semiGlobal
+
+
+## ConfigProvider
 
 ## Demos
 
@@ -413,4 +422,36 @@ const SemiWebpackPlugin = require('@douyinfe/semi-webpack-plugin').default;
 module.exports = {
 +    plugins: [new SemiWebpackPlugin({ prefixCls: 'imes' })],
 }
+```
+
+
+## semiGlobal
+
+You can override the default Props of global components
+
+In `semiGlobal.config.overrideDefaultProps` you can configure the component default Props. You need to put your configuration at the entrance of the entire site, that is, it will be executed before all semi components.
+
+<Notice title={"Notes"}>
+semiGlobal is a singleton mode that affects the entire site. If you only want to cover certain components in certain places, it is recommended not to use semiGlobal. Instead, encapsulate the corresponding components that need to be covered and pass in the modified default props.
+</Notice>
+
+For example, the configuration below sets all Buttons to warning by default, and the zIndex of Select to 2000 by default, etc.
+
+```js
+import { semiGlobal } from "@douiyinfe/semi-ui"
+
+semiGlobal.config.overrideDefaultProps = {
+   Button: {
+     type: 'warning',
+   },
+   Select: {
+     zIndex: 2000,
+   },
+   Tooltip: {
+     zIndex: 2001,
+     trigger:"click"
+   },
+};
+
+
 ```

+ 42 - 0
content/other/configprovider/index.md

@@ -8,6 +8,15 @@ dir: column
 brief: 为组件提供统一的全局化配置。
 ---
 
+## 使用场景
+
+覆盖配置分为两种场景
+
+- 需要覆盖子组件配置时,使用 ConfigProvider
+- 需要全局修改组件 Props时,使用 semiGlobal
+
+
+## ConfigProvider
 
 ## 代码演示
 
@@ -416,3 +425,36 @@ module.exports = {
 +    plugins: [new SemiWebpackPlugin({ prefixCls: 'imes' })],
 }
 ```
+
+
+## semiGlobal
+
+你可以覆盖全局组件的默认 Props
+
+在 `semiGlobal.config.overrideDefaultProps` 可配置组件默认 Props,你需要将你的配置放到整个站点的入口处,即优先于所有 semi 组件执行。
+
+<Notice title={"注意事项"}>
+semiGlobal 是单例模式,会影响整个站点,如果你只想覆盖某些地方的某些组件,建议不要使用 semiGlobal,而是将对应需要覆盖的组件封装一层并传入修改后的默认 props。
+</Notice>
+
+比如下方配置就是将所有的 Button 默认设置为 warning,Select 的 zIndex 默认设置为 2000 等
+
+```js
+import { semiGlobal } from "@douiyinfe/semi-ui"
+
+semiGlobal.config.overrideDefaultProps = {
+  Button: {
+    type: 'warning',
+  },
+  Select: {
+    zIndex: 2000,
+  },
+  Tooltip: {
+    zIndex: 2001,
+    trigger:"click"
+  },
+};
+
+
+```
+

+ 2 - 0
packages/semi-ui/index.ts

@@ -101,3 +101,5 @@ export {
 
 export { default as Image } from './image'; 
 export { Preview as ImagePreview } from './image';
+
+export { default as semiGlobal } from "./_utils/semi-global";