diff --git a/packages/nutui-taro-demo/src/layout/pages/space/basic.vue b/packages/nutui-taro-demo/src/layout/pages/space/basic.vue new file mode 100644 index 0000000000..caaeb8dc45 --- /dev/null +++ b/packages/nutui-taro-demo/src/layout/pages/space/basic.vue @@ -0,0 +1,8 @@ + diff --git a/packages/nutui-taro-demo/src/layout/pages/space/direction.vue b/packages/nutui-taro-demo/src/layout/pages/space/direction.vue new file mode 100644 index 0000000000..8c1131831e --- /dev/null +++ b/packages/nutui-taro-demo/src/layout/pages/space/direction.vue @@ -0,0 +1,8 @@ + diff --git a/packages/nutui-taro-demo/src/layout/pages/space/gutter.vue b/packages/nutui-taro-demo/src/layout/pages/space/gutter.vue new file mode 100644 index 0000000000..bc427f9d9c --- /dev/null +++ b/packages/nutui-taro-demo/src/layout/pages/space/gutter.vue @@ -0,0 +1,14 @@ + diff --git a/packages/nutui-taro-demo/src/layout/pages/space/index.vue b/packages/nutui-taro-demo/src/layout/pages/space/index.vue index b64352762c..edd0049882 100644 --- a/packages/nutui-taro-demo/src/layout/pages/space/index.vue +++ b/packages/nutui-taro-demo/src/layout/pages/space/index.vue @@ -1,50 +1,38 @@ + + diff --git a/packages/nutui-taro-demo/src/layout/pages/space/wrap.vue b/packages/nutui-taro-demo/src/layout/pages/space/wrap.vue new file mode 100644 index 0000000000..0ea1d11a62 --- /dev/null +++ b/packages/nutui-taro-demo/src/layout/pages/space/wrap.vue @@ -0,0 +1,12 @@ + diff --git a/src/packages/__VUE/button/demo/index.vue b/src/packages/__VUE/button/demo/index.vue index b00f406dd8..33e82fa288 100644 --- a/src/packages/__VUE/button/demo/index.vue +++ b/src/packages/__VUE/button/demo/index.vue @@ -1,5 +1,5 @@ diff --git a/src/packages/__VUE/space/demo/basic.vue b/src/packages/__VUE/space/demo/basic.vue new file mode 100644 index 0000000000..caaeb8dc45 --- /dev/null +++ b/src/packages/__VUE/space/demo/basic.vue @@ -0,0 +1,8 @@ + diff --git a/src/packages/__VUE/space/demo/direction.vue b/src/packages/__VUE/space/demo/direction.vue new file mode 100644 index 0000000000..8c1131831e --- /dev/null +++ b/src/packages/__VUE/space/demo/direction.vue @@ -0,0 +1,8 @@ + diff --git a/src/packages/__VUE/space/demo/gutter.vue b/src/packages/__VUE/space/demo/gutter.vue new file mode 100644 index 0000000000..bc427f9d9c --- /dev/null +++ b/src/packages/__VUE/space/demo/gutter.vue @@ -0,0 +1,14 @@ + diff --git a/src/packages/__VUE/space/demo/index.vue b/src/packages/__VUE/space/demo/index.vue new file mode 100644 index 0000000000..be8b068d33 --- /dev/null +++ b/src/packages/__VUE/space/demo/index.vue @@ -0,0 +1,38 @@ + + + diff --git a/src/packages/__VUE/space/demo/wrap.vue b/src/packages/__VUE/space/demo/wrap.vue new file mode 100644 index 0000000000..0ea1d11a62 --- /dev/null +++ b/src/packages/__VUE/space/demo/wrap.vue @@ -0,0 +1,12 @@ + diff --git a/src/packages/__VUE/space/doc.en-US.md b/src/packages/__VUE/space/doc.en-US.md index 227de88d9f..1cdcd4ffb0 100644 --- a/src/packages/__VUE/space/doc.en-US.md +++ b/src/packages/__VUE/space/doc.en-US.md @@ -18,92 +18,29 @@ app.use(Space); The Space component sets a certain spacing between the subcomponents, the default spacing is 8px. -:::demo - -```vue - -``` +> demo: space basic ::: -### Direction +### Custom Direction By setting the direction property to vertical, you can set the spacing of the vertical alignment. -:::demo - -```vue - -``` +> demo: space direction -::: - -### Custom Spacing +### Custom gutter Control the size of the spacing by adjusting the gutter value. When the number type is passed, px units are used by default; You can also pass in a string, such as a value with units like 2rem or 5vw. -You can also set css variables -nut-space-gap control, priority: gutter>css Variables > Default Style. - -:::demo - -```vue - -``` -::: +You can also set css variables `-nut-space-gap`, priority: property > css Variables > Default Style. -### word wrap +> demo: space gutter -In horizontal mode, the wrap property controls whether child elements are wrapped automatically. +### Word wrap -:::demo - -```vue - -``` +In horizontal mode, the wrap property controls whether child elements are wrapped automatically. -::: +> demo: space wrap ### Props diff --git a/src/packages/__VUE/space/doc.md b/src/packages/__VUE/space/doc.md index 045d7c6b1c..d0ade908ac 100644 --- a/src/packages/__VUE/space/doc.md +++ b/src/packages/__VUE/space/doc.md @@ -18,18 +18,7 @@ app.use(Space); Space 组件会在各个子组件之间设置一定的间距，默认间距为 8px。 -:::demo - -```vue - -``` +> demo: space basic ::: @@ -37,73 +26,21 @@ Space 组件会在各个子组件之间设置一定的间距，默认间距为 8 将 direction 属性设置为 vertical，可以设置垂直方向排列的间距。 -:::demo - -```vue - -``` - -::: +> demo: space direction ### 自定义间距 通过调整 gutter 的值来控制间距的大小。传入 number 类型时，会默认使用 px 单位；也可以传入 string 类型，比如 2rem 或 5vw 等带有单位的值。 -也可以设置css变量--nut-space-gap控制，优先级：gutter>css变量>默认样式 - -:::demo - -```vue - -``` -::: +也可以设置 css 变量 `--nut-space-gap` 控制，优先级：属性 > css 变量 > 默认样式。 + +> demo: space gutter ### 自动换行 在水平模式下, 通过 wrap 属性来控制子元素是否自动换行。 -:::demo - -```vue - -``` - -::: +> demo: space wrap ### Props diff --git a/src/packages/__VUE/space/doc.taro.md b/src/packages/__VUE/space/doc.taro.md index 3f7d3b5f17..f5684c295c 100644 --- a/src/packages/__VUE/space/doc.taro.md +++ b/src/packages/__VUE/space/doc.taro.md @@ -18,18 +18,7 @@ app.use(Space); Space 组件会在各个子组件之间设置一定的间距，默认间距为 8px。 -:::demo - -```vue - -``` +> demo: space basic layout ::: @@ -37,73 +26,21 @@ Space 组件会在各个子组件之间设置一定的间距，默认间距为 8 将 direction 属性设置为 vertical，可以设置垂直方向排列的间距。 -:::demo - -```vue - -``` - -::: +> demo: space direction layout ### 自定义间距 通过调整 gutter 的值来控制间距的大小。传入 number 类型时，会默认使用 px 单位；也可以传入 string 类型，比如 2rem 或 5vw 等带有单位的值。 -也可以设置css变量--nut-space-gap控制，优先级：gutter>css变量>默认样式 - -:::demo - -```vue - -``` -::: +也可以设置 css 变量 `--nut-space-gap` 控制，优先级：属性 > css 变量 > 默认样式。 + +> demo: space gutter layout ### 自动换行 在水平模式下, 通过 wrap 属性来控制子元素是否自动换行。 -:::demo - -```vue - -``` - -::: +> demo: space wrap layout ### Props diff --git a/src/sites/mobile/components/demo.vue b/src/sites/mobile/components/demo.vue new file mode 100644 index 0000000000..17ffb50ae9 --- /dev/null +++ b/src/sites/mobile/components/demo.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/sites/mobile/main.ts b/src/sites/mobile/main.ts index e9b090e019..0ea604dcfb 100644 --- a/src/sites/mobile/main.ts +++ b/src/sites/mobile/main.ts @@ -2,5 +2,12 @@ import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import NutUI from '@/packages/nutui.vue'; +import Demo from './components/demo.vue'; import '@nutui/touch-emulator'; -createApp(App).use(router).use(NutUI).mount('#app'); + +const app = createApp(App); +app.use(router); +app.use(NutUI); +app.component('Demo', Demo); + +app.mount('#app');