docs: add docs for carousel and config-provider (#8)
* docs: add docs for carousel and config-provider
This commit is contained in:
xdm
GitHub
parent
5878fe4ac9
commit
1b98a996ff
@ -8,7 +8,7 @@
|
||||
|
||||
[[ demo src="/demo/carousel/switch.vue" ]]
|
||||
|
||||
### 进度指示器类型
|
||||
### 进度指示器
|
||||
|
||||
使用 `indicator` 属性来指定进度指示器类型。
|
||||
|
||||
@ -20,6 +20,28 @@
|
||||
|
||||
[[ demo src="/demo/carousel/autoplay.vue" ]]
|
||||
|
||||
### 切换效果
|
||||
|
||||
指定 `effect` 属性来设置切换效果。
|
||||
|
||||
[[ demo src="/demo/carousel/effect.vue" ]]
|
||||
|
||||
### 纵向布局
|
||||
|
||||
指定 `vertical` 属性来允许纵向布局的轮播。
|
||||
|
||||
使用 `controls-position` 属性来切换按钮相对于布局方向的位置。
|
||||
|
||||
[[ demo src="/demo/carousel/vertical.vue" ]]
|
||||
|
||||
### 轮播项设置
|
||||
|
||||
`slides-per-view` 属性来指定同时显示多少个轮播项。
|
||||
|
||||
`slides-per-group` 属性来指定每次前后切换的一组包含多少个轮播项。
|
||||
|
||||
[[ demo src="/demo/carousel/slides.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
@ -34,16 +56,26 @@
|
||||
| `pause-on-hover` | `boolean=` | `false` | 在自动轮播时，鼠标悬浮后是否暂停。 |
|
||||
| `interval` | `number=` | `3000` | 在自动轮播时，切换间隔的毫秒数。 |
|
||||
| `wrap` | `boolean=` | `false` | 是否可以循环播放。 |
|
||||
| `effect` | `'fade' | 'slide'` | `'fade'` | 指定轮播切换效果，其中 `fade` 仅在切换组个数与同时显示个数相同时生效。 |
|
||||
| `vertical` | `boolean=` | `false` | 是否是纵向布局的轮播。 |
|
||||
| `indicator-align` | `'start' | 'end'` | `start` | 用于支持指示器的相对于布局方向的位置。 |
|
||||
| `indicator-position` | `'outside' | 'inside'` | `inside` | 用于支持指示器显示在轮播容器的内部/外部。 |
|
||||
| `controls-position` | `'outside' | 'inside'` | `inside` | 用于支持切换按钮相对于布局方向的位置。 |
|
||||
| `slide-aspect-ratio` | `number= | '${number}/${number}'` | - | 指定不同轮播项类型的默认配置。 |
|
||||
| `options` | `Object=` | `{ video: { muted: true, autoplay: true, controls: true, loop: true } }` | 用于指定每个轮播项的纵横比。 |
|
||||
| `slides-per-view` | `number=` | `1` | 指定同时显示多少个轮播项。 |
|
||||
| `slides-per-group` | `number=` | `1` | 指定每次前后切换的一组包含多少个轮播项。 |
|
||||
|
||||
^^^datasource
|
||||
轮播图数据源，项目类型为：`{src, alt, label}`。
|
||||
轮播图数据源，项目类型为：`{src, alt, label, type}`。
|
||||
|
||||
+++字段详情
|
||||
| 名称 | 类型 | 描述 |
|
||||
| -- | -- | -- |
|
||||
| `src` | `string` | 图片源地址。 |
|
||||
| `alt` | `string` | 图片的降级描述文本。 |
|
||||
| `label` | `string` | 图片的描述性标题。 |
|
||||
| `src` | `string` | 媒体源地址。 |
|
||||
| `alt` | `string` | 媒体的降级描述文本。 |
|
||||
| `label` | `string` | 媒体的描述性标题。 |
|
||||
| `type` | `string` | 媒体的描述性标题，视频需要指定 `video`。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
@ -61,8 +93,9 @@
|
||||
+++枚举值
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `radio` | 单选按钮型。 |
|
||||
| `bar` | 单选按钮型，用于替换之前的 `radio`（`radio` 也保持兼容支持）。 |
|
||||
| `number` | 显示「当前页数/全部页数」文字提示。 |
|
||||
| `dot` | 圆点型。 |
|
||||
| `none` | 不显示指示器。 |
|
||||
^^^
|
||||
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
| `placeholder` | `string` | `cascader.placeholder` | 未选择时的占位文本。 |
|
||||
| `clearable` | `boolean` | `false` | 是否可以清除已选内容。 |
|
||||
| `searchable` | `boolean` | `false` | 是否允许搜索选项。 |
|
||||
| `filter` | `function` | - | 选项过滤函数，签名为 `function(option: Object): boolean`。`option` 类型与 `options` 属性中的项相同。返回值表示是否将结果保留在下拉选项列表中。 |
|
||||
| `expanded` | `boolean=` | `false` | [^expanded] |
|
||||
| `column-trigger` | `hover | click` | `click` | [^column-trigger] |
|
||||
| `select-mode` | `'leaf-only' | 'any'` | `any` | [^select-mode] |
|
||||
|
||||
22
one/docs/components/config-provider.md
Normal file
22
one/docs/components/config-provider.md
Normal file
@ -0,0 +1,22 @@
|
||||
# ConfigProvider <small>配置器</small>
|
||||
|
||||
## 示例
|
||||
|
||||
### 配置 `Select` 的 `placeholder`
|
||||
|
||||
[[ demo src="/demo/config-provider/select.vue" ]]
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| -- | -- | -- | -- |
|
||||
| `value` | `Object` | - | 向其后代组件提供的配置值。 |
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| `default` | 需要接收配置的内容，其中 VEUI 的组件会响应对应的配置值。 |
|
||||
67
one/docs/demo/carousel/effect.vue
Normal file
67
one/docs/demo/carousel/effect.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Effect type</h4>
|
||||
<veui-radio-group
|
||||
v-model="effect"
|
||||
:items="effects"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
:effect="effect"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel, RadioGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-carousel': Carousel,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
|
||||
alt: 'A cute kitty looking at you with its greenish eyes.',
|
||||
label: 'Cat'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
|
||||
alt: 'A common kingfisher flying above river.',
|
||||
label: 'Kingfisher'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
|
||||
alt: 'A white and gray dolphin in blue water.',
|
||||
label: 'Dolphin'
|
||||
}
|
||||
],
|
||||
effect: 'fade',
|
||||
effects: [
|
||||
{ label: 'Fade', value: 'fade' },
|
||||
{ label: 'Slide', value: 'slide' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -6,11 +6,23 @@
|
||||
v-model="indicator"
|
||||
:items="indicators"
|
||||
/>
|
||||
<h4>Indicator position（仅在对齐方式是 end 时生效）</h4>
|
||||
<veui-radio-group
|
||||
v-model="indicatorPosition"
|
||||
:items="positions"
|
||||
/>
|
||||
<h4>Indicator alignment</h4>
|
||||
<veui-radio-group
|
||||
v-model="align"
|
||||
:items="alignments"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
:indicator="indicator"
|
||||
:indicator-position="indicatorPosition"
|
||||
:indicator-alignment="align"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
@ -19,6 +31,8 @@
|
||||
<script>
|
||||
import { Carousel, RadioGroup } from 'veui'
|
||||
|
||||
// TODO update alignment
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-carousel': Carousel,
|
||||
@ -46,11 +60,22 @@ export default {
|
||||
label: 'Dolphin'
|
||||
}
|
||||
],
|
||||
indicator: 'radio',
|
||||
indicator: 'bar',
|
||||
indicatorPosition: 'inside',
|
||||
align: 'start',
|
||||
indicators: [
|
||||
{ label: 'Radio', value: 'radio' },
|
||||
{ label: 'Bar', value: 'bar' },
|
||||
{ label: 'Number', value: 'number' },
|
||||
{ label: 'Dot', value: 'dot' },
|
||||
{ label: 'None', value: 'none' }
|
||||
],
|
||||
alignments: [
|
||||
{ value: 'start', label: 'start' },
|
||||
{ value: 'end', label: 'end' }
|
||||
],
|
||||
positions: [
|
||||
{ label: 'Inside', value: 'inside' },
|
||||
{ label: 'Outside', value: 'outside' }
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -60,6 +85,9 @@ export default {
|
||||
<style lang="less" scoped docs>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
&:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
|
||||
76
one/docs/demo/carousel/slides.vue
Normal file
76
one/docs/demo/carousel/slides.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>2 view, 2 group</h4>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
:slides-per-group="2"
|
||||
:slides-per-view="2"
|
||||
effect="slide"
|
||||
indicator-position="outside"
|
||||
indicator-alignment="end"
|
||||
wrap
|
||||
/>
|
||||
<h4>2 view, 1 group</h4>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
:slides-per-group="1"
|
||||
:slides-per-view="2"
|
||||
effect="slide"
|
||||
indicator-position="outside"
|
||||
indicator-alignment="end"
|
||||
wrap
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-carousel': Carousel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
|
||||
alt: 'A cute kitty looking at you with its greenish eyes.',
|
||||
label: 'Cat'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
|
||||
alt: 'A common kingfisher flying above river.',
|
||||
label: 'Kingfisher'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
|
||||
alt: 'A white and gray dolphin in blue water.',
|
||||
label: 'Dolphin'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ss3.bdstatic.com/yrwDcj7w0QhBkMak8IuT_XF5ehU5bvGh7c50/logopic/1b61ee88fdb4a4b918816ae1cfd84af1_fullsize.jpg',
|
||||
alt: 'Tesla logo.',
|
||||
label: '特斯拉'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
69
one/docs/demo/carousel/vertical.vue
Normal file
69
one/docs/demo/carousel/vertical.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Controls position</h4>
|
||||
<veui-radio-group
|
||||
v-model="position"
|
||||
:items="positions"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
effect="slide"
|
||||
:controls-position="position"
|
||||
vertical
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel, RadioGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-carousel': Carousel,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
|
||||
alt: 'A cute kitty looking at you with its greenish eyes.',
|
||||
label: 'Cat'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
|
||||
alt: 'A common kingfisher flying above river.',
|
||||
label: 'Kingfisher'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
|
||||
alt: 'A white and gray dolphin in blue water.',
|
||||
label: 'Dolphin'
|
||||
}
|
||||
],
|
||||
position: 'inside',
|
||||
positions: [
|
||||
{ label: 'Inside', value: 'inside' },
|
||||
{ label: 'Outside', value: 'outside' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
56
one/docs/demo/config-provider/select.vue
Normal file
56
one/docs/demo/config-provider/select.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button
|
||||
style="margin-right: 8px;"
|
||||
@click="toggle"
|
||||
>切换</veui-button>
|
||||
<veui-config-provider :value="value">
|
||||
<veui-select
|
||||
:options="options"
|
||||
clearable
|
||||
/>
|
||||
</veui-config-provider>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Select, ConfigProvider, Button } from 'veui'
|
||||
|
||||
const PLACEHOLDER1 = '请选择协议1'
|
||||
const PLACEHOLDER2 = '请选择协议2'
|
||||
|
||||
// Select 的 placeholder 会响应配置 `select.placeholder`
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-config-provider': ConfigProvider,
|
||||
'veui-select': Select,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: {
|
||||
'select.placeholder': PLACEHOLDER1
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: 'MIT',
|
||||
value: 'mit'
|
||||
},
|
||||
{
|
||||
label: 'BSD',
|
||||
value: 'bsd'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
let prev = this.value['select.placeholder']
|
||||
this.value['select.placeholder'] = prev === PLACEHOLDER1
|
||||
? PLACEHOLDER2
|
||||
: PLACEHOLDER1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -306,6 +306,10 @@
|
||||
{
|
||||
"title": "Cascader - 级联器",
|
||||
"slug": "cascader"
|
||||
},
|
||||
{
|
||||
"title": "ConfigProvider - 配置器",
|
||||
"slug": "config-provider"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
718
package-lock.json
generated
718
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@ -23,7 +23,7 @@
|
||||
"@docsearch/js": "^3.0.0-alpha.39",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-plugin-lodash": "^3.3.4",
|
||||
"babel-plugin-veui": "^2.0.4",
|
||||
"babel-plugin-veui": "^2.1.0",
|
||||
"dls-icons-vue": "^0.14.0",
|
||||
"eslint": "^5.15.1",
|
||||
"eslint-config-prettier": "^4.1.0",
|
||||
@ -71,10 +71,10 @@
|
||||
"stylus-loader": "^3.0.2",
|
||||
"unist-util-remove": "^1.0.1",
|
||||
"unist-util-visit": "^1.4.0",
|
||||
"veui": "^2.0.4",
|
||||
"veui-loader": "^2.0.4",
|
||||
"veui-theme-dls": "^2.0.4",
|
||||
"veui-theme-dls-icons": "^2.0.4",
|
||||
"veui": "^2.1.0",
|
||||
"veui-loader": "^2.1.0",
|
||||
"veui-theme-dls": "^2.1.0",
|
||||
"veui-theme-dls-icons": "^2.1.0",
|
||||
"vue-awesome": "^4.1.0",
|
||||
"vue-i18n": "^8.16.0",
|
||||
"vue-windows": "^0.2.4"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user