Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(space): split demo #2732

Merged
merged 1 commit into from
Dec 13, 2023
Merged

chore(space): split demo #2732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/nutui-taro-demo/src/layout/pages/space/basic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<template>
<nut-space>
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
</nut-space>
</template>
8 changes: 8 additions & 0 deletions packages/nutui-taro-demo/src/layout/pages/space/direction.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<template>
<nut-space direction="vertical" fill>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
</nut-space>
</template>
14 changes: 14 additions & 0 deletions packages/nutui-taro-demo/src/layout/pages/space/gutter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<!-- gutter -->
<nut-space :gutter="20" style="margin-bottom: 10px">
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
</nut-space>
<!-- css variable -->
<nut-space :style="{ '--nut-space-gap': '30px' }">
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
</nut-space>
</template>
82 changes: 35 additions & 47 deletions packages/nutui-taro-demo/src/layout/pages/space/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,38 @@
<template>
<Demo>
<h2>基础用法</h2>
<nut-cell>
<nut-space>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
</nut-space>
</nut-cell>
<h2>垂直排列</h2>
<nut-cell>
<nut-space direction="vertical" fill>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
</nut-space>
</nut-cell>
<h2>自定义间距</h2>
<nut-cell>
<nut-space :gutter="20">
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
</nut-space>
</nut-cell>
<nut-cell :style="{ '--nut-space-gap': '30px' }">
<nut-space>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
</nut-space>
</nut-cell>
<h2>自动换行</h2>
<nut-cell>
<nut-space wrap>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
</nut-space>
</nut-cell>
<Demo class="full">
<h2>{{ t('basic') }}</h2>
<Basic />

<h2>{{ t('direction') }}</h2>
<Direction />

<h2>{{ t('gutter') }}</h2>
<Gutter />

<h2>{{ t('wrap') }}</h2>
<Wrap />
</Demo>
</template>

<script lang="ts" setup>
import { useTranslate } from '../../../utils';
import Basic from './basic.vue';
import Direction from './direction.vue';
import Gutter from './gutter.vue';
import Wrap from './wrap.vue';

const t = useTranslate({
'zh-CN': {
basic: '基础用法',
direction: '垂直排列',
gutter: '自定义间距',
wrap: '自动换行'
},
'en-US': {
basic: 'Basic Usage',
direction: 'Custom Direction',
gutter: 'Custom gutter',
wrap: 'Word wrap'
}
});
</script>
12 changes: 12 additions & 0 deletions packages/nutui-taro-demo/src/layout/pages/space/wrap.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<template>
<nut-space wrap>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
</nut-space>
</template>
4 changes: 2 additions & 2 deletions src/packages/__VUE/button/demo/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="demo demo-button">
<Demo class="demo-button">
<h2>{{ t('type') }}</h2>
<Type />

Expand All @@ -26,7 +26,7 @@

<h2>{{ t('color') }}</h2>
<Color />
</div>
</Demo>
</template>

<script setup lang="ts">
Expand Down
4 changes: 2 additions & 2 deletions src/packages/__VUE/divider/demo/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="demo full bg-w">
<Demo class="full bg-w">
<h2>{{ t('basic') }}</h2>
<Basic />

Expand All @@ -17,7 +17,7 @@

<h2>{{ t('vertical') }}</h2>
<Vertical />
</div>
</Demo>
</template>

<script setup lang="ts">
Expand Down
4 changes: 2 additions & 2 deletions src/packages/__VUE/layout/demo/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="demo full">
<Demo class="full">
<h2>{{ t('basic') }}</h2>
<Basic />

Expand All @@ -8,7 +8,7 @@

<h2>{{ t('flex') }}</h2>
<Flex />
</div>
</Demo>
</template>

<script setup lang="ts">
Expand Down
70 changes: 0 additions & 70 deletions src/packages/__VUE/space/demo.vue
View file
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions src/packages/__VUE/space/demo/basic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<template>
<nut-space>
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
</nut-space>
</template>
8 changes: 8 additions & 0 deletions src/packages/__VUE/space/demo/direction.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<template>
<nut-space direction="vertical" fill>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
</nut-space>
</template>
14 changes: 14 additions & 0 deletions src/packages/__VUE/space/demo/gutter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<!-- gutter -->
<nut-space :gutter="20" style="margin-bottom: 10px">
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
</nut-space>
<!-- css variable -->
<nut-space :style="{ '--nut-space-gap': '30px' }">
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
<nut-button>Button</nut-button>
</nut-space>
</template>
38 changes: 38 additions & 0 deletions src/packages/__VUE/space/demo/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<template>
<Demo class="full">
<h2>{{ t('basic') }}</h2>
<Basic />

<h2>{{ t('direction') }}</h2>
<Direction />

<h2>{{ t('gutter') }}</h2>
<Gutter />

<h2>{{ t('wrap') }}</h2>
<Wrap />
</Demo>
</template>

<script lang="ts" setup>
import { useTranslate } from '@/sites/utils';
import Basic from './basic.vue';
import Direction from './direction.vue';
import Gutter from './gutter.vue';
import Wrap from './wrap.vue';

const t = useTranslate({
'zh-CN': {
basic: '基础用法',
direction: '垂直排列',
gutter: '自定义间距',
wrap: '自动换行'
},
'en-US': {
basic: 'Basic Usage',
direction: 'Custom Direction',
gutter: 'Custom gutter',
wrap: 'Word wrap'
}
});
</script>
12 changes: 12 additions & 0 deletions src/packages/__VUE/space/demo/wrap.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<template>
<nut-space wrap>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
<nut-button block>Button</nut-button>
</nut-space>
</template>
Loading