diff --git a/packages/arcodesign/components/context-provider/demo/index.md b/packages/arcodesign/components/context-provider/demo/index.md index bd764be6..2d7efe40 100644 --- a/packages/arcodesign/components/context-provider/demo/index.md +++ b/packages/arcodesign/components/context-provider/demo/index.md @@ -24,3 +24,10 @@ export default function ContextProviderDemo() { ); } ``` + +```less +.arco-cell-group { + .rem(border-radius, 8); + overflow: hidden; +} +``` \ No newline at end of file diff --git a/packages/arcodesign/components/context-provider/demo/style/mobile.less b/packages/arcodesign/components/context-provider/demo/style/mobile.less index d1b98d9f..c6074655 100644 --- a/packages/arcodesign/components/context-provider/demo/style/mobile.less +++ b/packages/arcodesign/components/context-provider/demo/style/mobile.less @@ -6,7 +6,5 @@ padding: 0; background: transparent; .rem(margin, 0, 12); - .rem(border-radius, 8); - overflow: hidden; } } diff --git a/packages/arcodesign/components/context-provider/demo/theme.md b/packages/arcodesign/components/context-provider/demo/theme.md new file mode 100644 index 00000000..a65430d3 --- /dev/null +++ b/packages/arcodesign/components/context-provider/demo/theme.md @@ -0,0 +1,47 @@ +## 动态主题 @en{Dynamic theme} + +#### 2 + +如果需要动态主题切换,需要配置 less 选项`@use-css-vars: 1`以启用 css 变量([详情见【快速上手 - 主题变量定制 & 动态切换】](/#/doc/readme))。@en{If there is a need for dynamic theme switching, you need to configure the less option `@use-css-vars: 1` to enable css variable([For details, see [Quick Start - Theme variable customization & dynamic switching]](/#/doc/readme)).} + +请注意,由于 css variable 存在兼容性问题(查看兼容性),请自行判断使用风险@en{Please note that due to the compatibility issues of css variables(Check compatibility), please use it at your own risk.} + +```js +import { ContextProvider, Button, Cell, Switch } from '@arco-design/mobile-react'; + +export default function ContextProviderDemo() { + const [checked, setChecked] = React.useState(true); + const theme = React.useMemo(() => { + if (checked) { + return { + 'button-primary-background': '#34C759', + 'button-primary-clicked-background': '#00B42A', + }; + } + return null; + }, [checked]); + return ( + + + { + setChecked(value); + }} + /> + + + + ); +} +``` + +```less +.arco-cell { + .rem(border-radius, 8); +} +.context-button { + margin-top: 10px; +} +``` diff --git a/scripts/sites/plugins/SiteGeneratePlugin/generate-components.js b/scripts/sites/plugins/SiteGeneratePlugin/generate-components.js index a68eece0..8d9e0b59 100644 --- a/scripts/sites/plugins/SiteGeneratePlugin/generate-components.js +++ b/scripts/sites/plugins/SiteGeneratePlugin/generate-components.js @@ -78,6 +78,7 @@ function generateComponents({ // 渲染文档站 demo 内容部分 const demoPath = path.join(compSrcPath, comp, 'demo'); + const docPath = path.join(compPagePath, comp); const { demoSource = [], lessSources = {} } = renderComponentsDemos({ demoSrcPath: demoPath, @@ -124,7 +125,6 @@ function generateComponents({ ); }`); - const docPath = path.join(compPagePath, comp); fs.mkdirpSync(docPath); fs.writeFile(path.join(docPath, `index${tsxFileSuffix}.tsx`), entry, () => { resolve(`>>> Write sites file finished: ${comp}`);