alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[improvement] rename packages dir to src (#3659)

Browse Source
This commit is contained in:
neverland
2019-06-27 11:25:57 +08:00
committed by GitHub
parent 8489918dca
commit 75c79b7044
619 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/progress/demo/index.vue
+60
View File
@@ -0,0 +1,60 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-progress :percentage="50" />
</demo-block>
<demo-block :title="$t('title2')">
<van-progress
inactive
:percentage="50"
/>
</demo-block>
<demo-block :title="$t('title3')">
<van-progress
color="#f2826a"
:percentage="25"
:pivot-text="$t('orange')"
/>
<van-progress
color="#f44"
:percentage="50"
:pivot-text="$t('red')"
/>
<van-progress
:percentage="75"
:pivot-text="$t('purple')"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
</demo-block>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
title2: '置灰',
title3: '样式定制'
},
'en-US': {
title2: 'Inactive',
title3: 'Custom Style'
}
}
};
</script>
<style lang="less">
.demo-progress {
.van-progress {
margin: 20px;
&:first-of-type {
margin-top: 5px;
}
}
}
</style>
src/progress/en-US.md
+66
View File
@@ -0,0 +1,66 @@
# Progress
### Install
``` javascript
import { Progress } from 'vant';
Vue.use(Progress);
```
## Usage
### Basic Usage
Use 'percentage' prop to set current progress
```html
<van-progress :percentage="50" />
```
### Inactive
```html
<van-progress inactive :percentage="50" />
```
### Custom Style
Use `pivot-text` to custom text，use `color` to custom bar color
```html
<van-progress
pivot-text="Orange"
color="#f2826a"
:percentage="25"
/>
<van-progress
pivot-text="Red"
color="#f44"
:percentage="50"
/>
<van-progress
:percentage="75"
pivot-text="Purple"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
```
## API
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| inactive | Whether to be gray | `Boolean` | `false` |
| percentage | Percentage | `Number` | `0` |
| show-pivot | Whether to show text | `Boolean` | `true` |
| color | Color | `String` | `#1989fa` |
| pivot-text | Text | `String` | percentage |
| pivot-color | Text background color | `String` | inherit progress color |
| text-color | Text color | `String` | `#fff` |
src/progress/index.js
+88
View File
@@ -0,0 +1,88 @@
import { createNamespace, isDef } from '../utils';
import { BLUE, WHITE } from '../utils/color';
const [createComponent, bem] = createNamespace('progress');
export default createComponent({
props: {
inactive: Boolean,
pivotText: String,
pivotColor: String,
percentage: {
type: Number,
required: true,
validator: value => value >= 0 && value <= 100
},
showPivot: {
type: Boolean,
default: true
},
color: {
type: String,
default: BLUE
},
textColor: {
type: String,
default: WHITE
}
},
data() {
return {
pivotWidth: 0,
progressWidth: 0
};
},
mounted() {
this.getWidth();
},
watch: {
showPivot() {
this.getWidth();
},
pivotText() {
this.getWidth();
}
},
methods: {
getWidth() {
this.$nextTick(() => {
this.progressWidth = this.$el.offsetWidth;
this.pivotWidth = this.$refs.pivot ? this.$refs.pivot.offsetWidth : 0;
});
}
},
render(h) {
const { pivotText, percentage } = this;
const text = isDef(pivotText) ? pivotText : percentage + '%';
const showPivot = this.showPivot && text;
const background = this.inactive ? '#cacaca' : this.color;
const pivotStyle = {
color: this.textColor,
background: this.pivotColor || background
};
const portionStyle = {
background,
width: ((this.progressWidth - this.pivotWidth) * percentage) / 100 + 'px'
};
return (
<div class={bem()}>
<span class={bem('portion', { 'with-pivot': showPivot })} style={portionStyle}>
{showPivot && (
<span ref="pivot" style={pivotStyle} class={bem('pivot')}>
{text}
</span>
)}
</span>
</div>
);
}
});
src/progress/index.less
+36
View File
@@ -0,0 +1,36 @@
@import '../style/var';
.van-progress {
position: relative;
height: @progress-height;
background: @progress-background-color;
border-radius: @progress-height;
&__portion {
position: absolute;
left: 0;
height: 100%;
border-radius: inherit;
&--with-pivot {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&__pivot {
position: absolute;
top: 50%;
right: 0;
box-sizing: border-box;
min-width: 2em;
padding: @progress-pivot-padding;
font-size: @progress-pivot-font-size;
line-height: @progress-pivot-line-height;
text-align: center;
word-break: keep-all;
background-color: @progress-pivot-background-color;
border-radius: 1em;
transform: translate(100%, -50%);
}
}
src/progress/test/__snapshots__/demo.spec.js.snap
+17
View File
@@ -0,0 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">50%</span></span></div>
</div>
<div>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(202, 202, 202); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(202, 202, 202);">50%</span></span></div>
</div>
<div>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(242, 130, 106); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(242, 130, 106);">橙色</span></span></div>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(255, 68, 68); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(255, 68, 68);">红色</span></span></div>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221);">紫色</span></span></div>
</div>
</div>
`;
src/progress/test/__snapshots__/index.spec.js.snap
+5
View File
@@ -0,0 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"></span></div>`;
exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">test</span></span></div>`;
src/progress/test/demo.spec.js
+4
View File
@@ -0,0 +1,4 @@
import Demo from '../demo';
import demoTest from '../../../test/demo-test';
demoTest(Demo);
src/progress/test/index.spec.js
+16
View File
@@ -0,0 +1,16 @@
import Progress from '..';
import { mount } from '../../../test/utils';
test('calc width', () => {
const wrapper = mount(Progress, {
propsData: {
showPivot: false,
percentage: 100
}
});
expect(wrapper).toMatchSnapshot();
wrapper.vm.showPivot = true;
wrapper.vm.pivotText = 'test';
expect(wrapper).toMatchSnapshot();
});
src/progress/zh-CN.md
+64
View File
@@ -0,0 +1,64 @@
# Progress 进度条
### 引入
``` javascript
import { Progress } from 'vant';
Vue.use(Progress);
```
## 代码演示
### 基础用法
进度条默认为蓝色，使用`percentage`属性来设置当前进度
```html
<van-progress :percentage="50" />
```
### 置灰
```html
<van-progress inactive :percentage="50" />
```
### 样式定制
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
```html
<van-progress
pivot-text="橙色"
color="#f2826a"
:percentage="25"
/>
<van-progress
pivot-text="红色"
color="#f44"
:percentage="50"
/>
<van-progress
:percentage="75"
pivot-text="紫色"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| inactive | 是否置灰 | `Boolean` | `false` | - |
| percentage | 进度百分比 | `Number` | `0` | - |
| show-pivot | 是否显示进度文字 | `Boolean` | `true` | - |
| color | 进度条颜色 | `String` | `#1989fa` | - |
| text-color | 进度条文字颜色 | `String` | `#fff` | - |
| pivot-text | 文字显示 | `String` | 百分比文字 | - |
| pivot-color | 文字背景色 | `String` | 与进度条颜色一致 | - |