Skip to content

Commit

Permalink
chore(indicator): split demo (#2741)
Browse files Browse the repository at this point in the history
  • Loading branch information
eiinu authored Dec 15, 2023
1 parent 1908417 commit 160de20
Show file tree
Hide file tree
Showing 12 changed files with 147 additions and 273 deletions.
7 changes: 7 additions & 0 deletions packages/nutui-taro-demo/src/nav/pages/indicator/basic.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<template>
<nut-space :gutter="30">
<nut-indicator :size="5" :current="1" />
<nut-indicator :size="5" :current="3" />
<nut-indicator :size="5" :current="5" />
</nut-space>
</template>
5 changes: 5 additions & 0 deletions packages/nutui-taro-demo/src/nav/pages/indicator/block.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<template>
<nut-indicator block align="left" :size="6" :current="5" />
<nut-indicator block algin="center" :size="6" :current="5" />
<nut-indicator block align="right" :size="6" :current="5" />
</template>
56 changes: 28 additions & 28 deletions packages/nutui-taro-demo/src/nav/pages/indicator/index.vue
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
<template>
<Demo>
<h2>基础用法</h2>
<nut-cell>
<nut-indicator :size="3" :current="3">step1</nut-indicator>
</nut-cell>
<nut-cell>
<nut-row>
<nut-col :span="12">
<nut-button size="small" type="primary">主要按钮</nut-button>
</nut-col>
<nut-col :span="12">
<nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
</nut-col>
</nut-row>
</nut-cell>
<h2>block用法</h2>
<nut-cell>
<nut-indicator block algin="center" :size="6" :current="5">step1</nut-indicator>
</nut-cell>
<nut-cell>
<nut-indicator block align="left" :size="6" :current="1">step1</nut-indicator>
</nut-cell>
<nut-cell>
<nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
</nut-cell>
<h2>不补0</h2>
<nut-cell>
<nut-indicator :fill-zero="false" :size="6" :current="5">step1</nut-indicator>
</nut-cell>
<h2>{{ t('basic') }}</h2>
<Basic />

<h2>{{ t('block') }}</h2>
<Block />

<h2>{{ t('zero') }}</h2>
<Zero />
</Demo>
</template>

<script setup lang="ts">
import { useTranslate } from '../../../utils';
import Basic from './basic.vue';
import Block from './block.vue';
import Zero from './zero.vue';
const t = useTranslate({
'zh-CN': {
basic: '基础用法',
block: 'block 用法',
zero: '不补 0'
},
'en-US': {
basic: 'Basic Usage',
block: 'Block',
zero: 'Do not make up 0'
}
});
</script>
3 changes: 3 additions & 0 deletions packages/nutui-taro-demo/src/nav/pages/indicator/zero.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>
<nut-indicator :fill-zero="false" :size="6" :current="5" />
</template>
50 changes: 0 additions & 50 deletions src/packages/__VUE/indicator/demo.vue

This file was deleted.

7 changes: 7 additions & 0 deletions src/packages/__VUE/indicator/demo/basic.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<template>
<nut-space :gutter="30">
<nut-indicator :size="5" :current="1" />
<nut-indicator :size="5" :current="3" />
<nut-indicator :size="5" :current="5" />
</nut-space>
</template>
5 changes: 5 additions & 0 deletions src/packages/__VUE/indicator/demo/block.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<template>
<nut-indicator block align="left" :size="6" :current="5" />
<nut-indicator block algin="center" :size="6" :current="5" />
<nut-indicator block align="right" :size="6" :current="5" />
</template>
32 changes: 32 additions & 0 deletions src/packages/__VUE/indicator/demo/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<template>
<Demo>
<h2>{{ t('basic') }}</h2>
<Basic />

<h2>{{ t('block') }}</h2>
<Block />

<h2>{{ t('zero') }}</h2>
<Zero />
</Demo>
</template>

<script setup lang="ts">
import { useTranslate } from '@/sites/utils';
import Basic from './basic.vue';
import Block from './block.vue';
import Zero from './zero.vue';
const t = useTranslate({
'zh-CN': {
basic: '基础用法',
block: 'block 用法',
zero: '不补 0'
},
'en-US': {
basic: 'Basic Usage',
block: 'Block',
zero: 'Do not make up 0'
}
});
</script>
3 changes: 3 additions & 0 deletions src/packages/__VUE/indicator/demo/zero.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>
<nut-indicator :fill-zero="false" :size="6" :current="5" />
</template>
84 changes: 19 additions & 65 deletions src/packages/__VUE/indicator/doc.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,86 +16,40 @@ app.use(Indicator);

### Basic Usage

:::demo

```vue
<template>
<nut-cell>
<nut-indicator :size="3" :current="3">step1</nut-indicator>
</nut-cell>
<nut-cell>
<nut-row>
<nut-col :span="12">
<nut-button size="small" type="primary">Main button</nut-button>
</nut-col>
<nut-col :span="12">
<nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
</nut-col>
</nut-row>
</nut-cell>
</template>
```

:::
> demo: indicator basic
### Block usage

:::demo

```vue
<template>
<nut-cell>
<nut-indicator block algin="center" :size="6" :current="5">step1</nut-indicator>
</nut-cell>
<nut-cell>
<nut-indicator block align="left" :size="6" :current="1">step1</nut-indicator>
</nut-cell>
<nut-cell>
<nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
</nut-cell>
</template>
```

:::
> demo: indicator block
### Do not make up 0

:::demo

```vue
<template>
<nut-cell>
<nut-indicator :fill-zero="false" :size="6" :current="5">step1</nut-indicator>
</nut-cell>
</template>
```

:::
> demo: indicator zero
## API

### Props

| Attribute | Description | Type | Default |
| --------- | --------------------------------------------------------------------------------------------------- | ------- | ------- |
| current | Current step | number | `1` |
| size | Step length | number | `3` |
| block | Enable block level layout | boolean | `false` |
| align | Alignment, which takes effect only when `block` is `true`. optional value `left`, `right`, `center` | string | `left` |
| fill-zero | Whether to add 0 before singular number | boolean | `true` |
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| current | Current step | number | `1` |
| size | Step length | number | `3` |
| block | Enable block level layout | boolean | `false` |
| align | Alignment, which takes effect only when `block` is `true`. optional value `left`, `right`, `center` | string | `left` |
| fill-zero | Whether to add 0 before singular number | boolean | `true` |

## Theming

### CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).

| Name | Default Value |
| -------------------------------- | ------------------------------------- |
| --nut-indicator-bg-color | _var(--nut-primary-color)_ |
| --nut-indicator-dot-color | _var(--nut-disable-color)_ |
| --nut-indicator-color | _var(--nut-white)_ |
| --nut-indicator-size | _18px_ |
| --nut-indicator-dot-size | _calc(var(--nut-indicator-size) / 3)_ |
| --nut-indicator-border-size | _calc(var(--nut-indicator-size)+ 2)_ |
| --nut-indicator-number-font-size | _10px_ |
| Name | Default Value |
| --- | --- |
| --nut-indicator-bg-color | _var(--nut-primary-color)_ |
| --nut-indicator-dot-color | _var(--nut-disable-color)_ |
| --nut-indicator-color | _var(--nut-white)_ |
| --nut-indicator-size | _18px_ |
| --nut-indicator-dot-size | _calc(var(--nut-indicator-size) / 3)_ |
| --nut-indicator-border-size | _calc(var(--nut-indicator-size)+ 2)_ |
| --nut-indicator-number-font-size | _10px_ |
84 changes: 19 additions & 65 deletions src/packages/__VUE/indicator/doc.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,86 +16,40 @@ app.use(Indicator);

### 基础用法

:::demo

```vue
<template>
<nut-cell>
<nut-indicator :size="3" :current="3">step1</nut-indicator>
</nut-cell>
<nut-cell>
<nut-row>
<nut-col :span="12">
<nut-button size="small" type="primary">主要按钮</nut-button>
</nut-col>
<nut-col :span="12">
<nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
</nut-col>
</nut-row>
</nut-cell>
</template>
```

:::
> demo: indicator basic
### block 用法

:::demo

```vue
<template>
<nut-cell>
<nut-indicator block algin="center" :size="6" :current="5">step1</nut-indicator>
</nut-cell>
<nut-cell>
<nut-indicator block align="left" :size="6" :current="1">step1</nut-indicator>
</nut-cell>
<nut-cell>
<nut-indicator block align="right" :size="6" :current="5">step1</nut-indicator>
</nut-cell>
</template>
```

:::
> demo: indicator block
### 不补 0

:::demo

```vue
<template>
<nut-cell>
<nut-indicator :fill-zero="false" :size="6" :current="5">step1</nut-indicator>
</nut-cell>
</template>
```

:::
> demo: indicator zero
## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --------- | ------------------------------------------------------------------------- | ------- | ------- |
| current | 当前步骤 | number | `1` |
| size | 步骤长度 | number | `3` |
| block | 是否启用块级布局 | boolean | `false` |
| align | 对齐方式,仅在 `block``true` 时生效, 可选值 `left`, `right`, `center` | string | `left` |
| fill-zero | 单数前面是否补 0 | boolean | `true` |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| current | 当前步骤 | number | `1` |
| size | 步骤长度 | number | `3` |
| block | 是否启用块级布局 | boolean | `false` |
| align | 对齐方式,仅在 `block``true` 时生效, 可选值 `left`, `right`, `center` | string | `left` |
| fill-zero | 单数前面是否补 0 | boolean | `true` |

## 主题定制

### 样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)

| 名称 | 默认值 |
| -------------------------------- | ------------------------------------- |
| --nut-indicator-bg-color | _var(--nut-primary-color)_ |
| --nut-indicator-dot-color | _var(--nut-disable-color)_ |
| --nut-indicator-color | _var(--nut-white)_ |
| --nut-indicator-size | _18px_ |
| --nut-indicator-dot-size | _calc(var(--nut-indicator-size) / 3)_ |
| --nut-indicator-border-size | _calc(var(--nut-indicator-size)+ 2)_ |
| --nut-indicator-number-font-size | _10px_ |
| 名称 | 默认值 |
| --- | --- |
| --nut-indicator-bg-color | _var(--nut-primary-color)_ |
| --nut-indicator-dot-color | _var(--nut-disable-color)_ |
| --nut-indicator-color | _var(--nut-white)_ |
| --nut-indicator-size | _18px_ |
| --nut-indicator-dot-size | _calc(var(--nut-indicator-size) / 3)_ |
| --nut-indicator-border-size | _calc(var(--nut-indicator-size)+ 2)_ |
| --nut-indicator-number-font-size | _10px_ |
Loading

0 comments on commit 160de20

Please sign in to comment.