Skip to content

Commit

Permalink
fix(ui/progress): 优化progress文档, 重命名props show-active -> label, show-t…
Browse files Browse the repository at this point in the history 
…rack -> track

affects: @varlet/cli, @varlet/ui
  • Loading branch information
@haoziqaq
haoziqaq committed Apr 26, 2021
1 parent e681008 commit 7d82141
Show file tree
Hide file tree
Showing 10 changed files with 77 additions and 99 deletions.
9 changes: 5 additions & 4 deletions packages/varlet-cli/site/pc/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export default defineComponent({
[Cell.name]: Cell,
[Icon.name]: Icon,
[Menu.name]: Menu,
[Loading.name]: Loading
[Loading.name]: Loading,
},
setup() {
const menu: Ref<Menu[]> = ref([])
Expand Down Expand Up @@ -157,7 +157,7 @@ export default defineComponent({
if (index !== -1) {
childrenElement[index].scrollIntoView({
block: 'center',
inline: 'start'
inline: 'start',
})
}
})
Expand Down Expand Up @@ -228,9 +228,9 @@ export default defineComponent({
nav,
code,
changeRoute,
changeLanguage
changeLanguage,
}
}
},
})
</script>

Expand Down Expand Up @@ -351,6 +351,7 @@ iframe {
position: relative;
z-index: 2;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-sizing: border-box;
&__logo {
display: flex;
Expand Down
10 changes: 2 additions & 8 deletions packages/varlet-cli/src/commands/compile.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import logger from '../shared/logger'
import ora from 'ora'
import { remove } from 'fs-extra'
import { CJS_DIR, ES_DIR, UMD_DIR } from '../shared/constant'
import { compileModule } from '../compiler/compileModule'
import { compileTemplateHighlight } from '../compiler/compileTemplateHighlight'
import { compileTypes } from '../compiler/compileTypes';
import { compileTypes } from '../compiler/compileTypes'

export function removeDir() {
return Promise.all([remove(ES_DIR), remove(CJS_DIR), remove(UMD_DIR)])
Expand All @@ -15,12 +14,7 @@ export async function compile() {

await removeDir()

await Promise.all([
compileTypes(),
compileTemplateHighlight(),
compileModule(),
compileModule('cjs')
])
await Promise.all([compileTypes(), compileTemplateHighlight(), compileModule(), compileModule('cjs')])
await compileModule('umd')

s.succeed('Compile success!')
Expand Down
6 changes: 3 additions & 3 deletions packages/varlet-ui/src/progress/Progress.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
:style="{ background: color, width: linearProps.width }"
></div>
</div>
<div class="var-progress-linear__action" v-bind="$attrs" v-if="showAction">
<div class="var-progress-linear__label" v-bind="$attrs" v-if="label">
<slot>
{{ linearProps.roundValue }}
</slot>
Expand All @@ -22,7 +22,7 @@
:viewBox="circleProps.viewBox"
>
<circle
v-if="showTrack"
v-if="track"
class="var-progress-circle__background"
:cx="size / 2"
:cy="size / 2"
Expand All @@ -48,7 +48,7 @@
></circle>
</svg>

<div class="var-progress-circle__action" v-if="showAction" v-bind="$attrs">
<div class="var-progress-circle__label" v-if="label" v-bind="$attrs">
<slot>
{{ circleProps.roundValue }}
</slot>
Expand Down
44 changes: 18 additions & 26 deletions packages/varlet-ui/src/progress/docs/en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,58 +13,50 @@ import { Progress } from '@varlet/ui'
createApp().use(Progress)
```

## Progress linear

### Basic Usage

Set the current progress through the `value` attribute.

```html
<var-progress :value="20" />
<var-progress :value="value" />
<var-progress :value="100" />
```

### Custom Style

Set the line width, progress bar color, track color and ripple loading effect through the attributes of `line-width`, `color`, `track-color` and `ripple`.

```html
<var-progress :value="30" line-width="8" />
<var-progress :value="60" line-width="10" color="purple" track-color="#dec3e6" />
<var-progress :value="80" line-width="10" style="border-radius: 4px" ripple />
<var-progress :value="30" line-width="8" color="#ff9800" />
<var-progress :value="60" line-width="8" color="#ff9800" track-color="#f5cb90" />
<var-progress :value="80" ripple line-width="8" color="#ff9800" track-color="#f5cb90" />
```

### Show Action
### Show Label

The action is displayed through the `show-action` attribute. The action is the percentage of progress by default. You can use the slot to insert custom content.
The label is displayed through the `label` attribute. The label is the percentage of progress by default. You can use the slot to insert custom content.

```html
<var-progress :value="30" show-action />
<var-progress :value="value" show-action />
<var-progress :value="100" show-action> success </var-progress>
<var-progress label :value="30" />
<var-progress label :value="value" />
<var-progress label :value="100">success</var-progress>
```

## Progress circle

### Custom Style
### Progress circle

```html
<var-progress
:value="30"
line-width="5"
:size="56"
mode="circle"
color="purple"
track-color="#dec3e6"
/>
<var-progress mode="circle" :value="30" line-width="5" :size="56" />
<var-progress mode="circle" label :value="value" line-width="5" :size="56" />
<var-progress mode="circle" label :value="100" line-width="5" :size="56" />
```

### Hide Track

Use `show-track` prop to hide track.
Use `track` prop to hide track.

```html
<var-progress :value="50" :size="56" mode="circle" :show-track="false" />
<var-progress mode="circle" :value="50" :size="56" :track="false" />
```
## API

Expand All @@ -77,17 +69,17 @@ Use `show-track` prop to hide track.
| `line-width` | Width of the progress bar | _string \| number_ | `4` |
| `color` | Color of the progress bar | _string_ | `#005CAF` |
| `track-color` | Color of the progress track | _string_ | `#d8d8d8` |
| `show-action` | Whether the action is visible or not | _boolean_ | `false` |
| `label` | Whether the label is visible or not | _boolean_ | `false` |
| `ripple` | Loading style for progress (only supports linear progress) | _boolean_ | `false` |
| `size` | Size of progress (only supports circle progress) | _string \| number_ | `40` |
| `rotate` | Origin of progress (only supports circle progress) | _number_ | `0` |
| `show-track` | Whether the progress track is visible or not (only supports circle progress) | _boolean_ | `true` |
| `track` | Whether the progress track is visible or not (only supports circle progress) | _boolean_ | `true` |

### Slots

| Name | Description | SlotProps |
| ----- | -------------- | -------- |
| `default` | Custom action | `-` |
| `default` | Custom label | `-` |

### Theme Variables
#### The following LESS variables can be overridden at build time to modify the theme style
Expand Down
42 changes: 17 additions & 25 deletions packages/varlet-ui/src/progress/docs/zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,59 +13,51 @@ import { Progress } from '@varlet/ui'
createApp().use(Progress)
```

## 线性进度条

### 基本使用

通过 `value` 属性设置当前进度。

```html
<var-progress :value="20" />
<var-progress :value="value" />
<var-progress :value="100" />
```

### 自定义样式

通过`line-width`、`color`、`track-color`、`ripple` 属性设置线宽、进度条颜色、轨道颜色、水波纹加载效果。

```html
<var-progress :value="30" line-width="8" />
<var-progress :value="60" line-width="10" color="purple" track-color="#dec3e6" />
<var-progress :value="80" line-width="10" style="border-radius: 4px" ripple />
<var-progress :value="30" line-width="8" color="#ff9800" />
<var-progress :value="60" line-width="8" color="#ff9800" track-color="#f5cb90" />
<var-progress :value="80" ripple line-width="8" color="#ff9800" track-color="#f5cb90" />
```

### 显示标签

通过 `show-action`属性将action显示，action 默认为进度的百分比，可以使用插槽插入自定义内容。
通过`label`属性将label显示，label默认为进度的百分比，可以使用插槽插入自定义内容。

```html
<var-progress :value="30" show-action />
<var-progress :value="value" show-action />
<var-progress :value="100" show-action> success </var-progress>
<var-progress label :value="30" />
<var-progress label :value="value" />
<var-progress label :value="100">success</var-progress>
```

## 环形进度条

### 自定义样式
### 环形进度条

```html
<var-progress
:value="30"
line-width="5"
:size="56"
mode="circle"
color="purple"
track-color="#dec3e6"
/>
<var-progress mode="circle" :value="30" line-width="5" :size="56" />
<var-progress mode="circle" label :value="value" line-width="5" :size="56" />
<var-progress mode="circle" label :value="100" line-width="5" :size="56" />
```


### 隐藏轨道

通过`show-track`属性隐藏 track。
通过`track`属性隐藏 track。

```html
<var-progress :value="50" :size="56" mode="circle" :show-track="false" />
<var-progress mode="circle" :value="50" :size="56" :track="false" />
```
## API

Expand All @@ -78,17 +70,17 @@ createApp().use(Progress)
| `line-width` | `progress` 的线宽 | _string \| number_ | `4` |
| `color` | `progress` 的颜色 | _string_ | `#005CAF` |
| `track-color` | `progress` 轨道的颜色 | _string_ | `#d8d8d8` |
| `show-action` | 是否显示 action | _boolean_ | `false` |
| `label` | 是否显示 label | _boolean_ | `false` |
| `ripple` | 水波纹加载效果（仅支持线性进度条） | _boolean_ | `false` |
| `size` | `progress` 的尺寸（仅支持环形进度条） | _string \| number_ | `40` |
| `rotate` | `progress` 的原点（仅支持环形进度条） | _number_ | `0` |
| `show-track` | 是否显示 `progress` 的轨道（仅支持环形进度条） | _boolean_ | `true` |
| `track` | 是否显示 `progress` 的轨道（仅支持环形进度条） | _boolean_ | `true` |

### 插槽

| 名称 | 说明 | 参数 |
| ----- | -------------- | -------- |
| `default` | 自定义 action | `-` |
| `default` | 自定义 label | `-` |

### 主题变量
#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式
Expand Down
49 changes: 25 additions & 24 deletions packages/varlet-ui/src/progress/example/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,47 @@
<template>
<div class="progress-demo">
<div class="space"></div>
<h4>{{ pack.linear }}</h4>
<div class="progress-demo__basic">
<app-type>{{ pack.basicUsage }}</app-type>
<var-progress :value="20" />
<var-progress :value="value" />
<var-progress :value="100" />
</div>
<div class="progress-demo__style">
<app-type>{{ pack.style }}</app-type>
<var-progress :value="30" line-width="8" />
<var-progress :value="60" line-width="10" color="purple" track-color="#dec3e6" />
<var-progress :value="80" line-width="10" ripple style="border-radius: 4px" />
<var-progress :value="30" line-width="8" color="#ff9800" />
<var-progress :value="60" line-width="8" color="#ff9800" track-color="#f5cb90" />
<var-progress :value="80" ripple line-width="8" color="#ff9800" track-color="#f5cb90" />
</div>

<div class="progress-demo__action">
<div class="progress-demo__label">
<app-type>{{ pack.showLabel }}</app-type>
<var-progress :value="30" show-action />
<var-progress :value="value" show-action />
<var-progress :value="100" show-action> success </var-progress>
<var-progress :value="30" label />
<var-progress :value="value" label />
<var-progress :value="100" label>success</var-progress>
</div>

<h4>{{ pack.circle }}</h4>
<div>
<app-type>{{ pack.style }}</app-type>
<div class="progress-demo__circle">
<var-progress :value="30" line-width="5" :size="56" mode="circle" color="purple" track-color="#dec3e6" />
</div>
<app-type>{{ pack.circle }}</app-type>
<div class="progress-demo__circle">
<var-progress mode="circle" :value="30" line-width="5" :size="56" />
<div class="space"></div>
<var-progress mode="circle" label :value="value" line-width="5" :size="56" />
<div class="space"></div>
<var-progress mode="circle" label :value="100" line-width="5" :size="56" />
</div>

<div>
<app-type>{{ pack.hideTrack }}</app-type>
<div class="progress-demo__circle">
<var-progress :value="50" :size="56" mode="circle" :show-track="false" />
</div>
<app-type>{{ pack.hideTrack }}</app-type>
<div class="progress-demo__circle">
<var-progress mode="circle" :value="50" :size="56" :track="false" />
</div>
</div>
</template>

<script>
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
import Progress from '..'
import AppType from '@varlet/cli/site/mobile/components/AppType'
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
import { pack, use } from './locale'
import { watchLang } from '../../utils/components'
import Progress from '..'
export default defineComponent({
name: 'ProgressExample',
Expand Down Expand Up @@ -88,7 +86,7 @@ export default defineComponent({
.progress-demo__basic,
.progress-demo__style,
.progress-demo__action,
.progress-demo__label,
.progress-demo__custom {
.var-progress {
&:nth-child(2) {
Expand All @@ -101,8 +99,11 @@ export default defineComponent({
.progress-demo__circle {
display: flex;
justify-content: space-between;
align-items: center;
.space {
width: 20px;
}
}
}
</style>
3 changes: 1 addition & 2 deletions packages/varlet-ui/src/progress/example/locale/en-US.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
export default {
linear: 'Linear Progress',
circle: 'Circle Progress',
basicUsage: 'Basic Usage',
style: 'Custom Style',
showLabel: 'Show Action',
showLabel: 'Show Label',
hideTrack: 'Hide Track',
}
3 changes: 1 addition & 2 deletions packages/varlet-ui/src/progress/example/locale/zh-CN.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
export default {
linear: '线性进度条',
circle: '环形进度条',
basicUsage: '基本使用',
style: '自定义样式',
basicUsage: '基本使用',
showLabel: '显示标签',
hideTrack: '隐藏轨道',
}
Loading

0 comments on commit 7d82141

Please sign in to comment.