From 5bb259b9f4fdfcfae08c725e36b75b6b95b3ea96 Mon Sep 17 00:00:00 2001 From: ElsaOOo Date: Fri, 12 Nov 2021 22:57:11 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BF=AE=E6=94=B9carousel=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E4=B8=BA=E5=B1=95=E5=BC=80=E6=94=B6=E8=B5=B7=E6=96=B9?= =?UTF-8?q?=E5=BC=8F,=E4=BF=AE=E5=A4=8D=E6=96=87=E6=A1=A3=E4=B8=AD?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=93=8D=E4=BD=9C=E7=82=B9=E5=87=BB?= =?UTF-8?q?=E6=B2=A1=E6=9C=89=E5=93=8D=E5=BA=94=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/components/carousel/index.md | 238 ++++++++++-------- 1 file changed, 134 insertions(+), 104 deletions(-) diff --git a/packages/devui-vue/docs/components/carousel/index.md b/packages/devui-vue/docs/components/carousel/index.md index ad99fbec..c1f64507 100644 --- a/packages/devui-vue/docs/components/carousel/index.md +++ b/packages/devui-vue/docs/components/carousel/index.md @@ -7,116 +7,128 @@ 1. 用于展示图片或者卡片。 ### 基本用法 - - {{ item }} - - -```html - - {{ item }} - -``` -```css + +:::demo + +```vue + + + ``` + +::: + ### 指示器&切换箭头 -arrowTrigger设为always可以使箭头永久显示,dotTrigger设为hover可以使hover到点上就切换。 - - {{ item }} - +arrowTrigger 设为 always 可以使箭头永久显示,dotTrigger 设为 hover 可以使 hover 到点上就切换。 -```html - - {{ item }} - -``` -### 自动轮播 - - {{ item }} - - -```html - - {{ item }} - -``` -### 自定义操作 - - {{ item }} - - - -```html - - {{ item }} - - -``` -```css -.carousel-demo-operate{ - margin-top: 10px; +:::demo - display: flex; - align-items: center; +```vue + + + ``` -### API -#### 参数 +::: -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :----------: | :--------------------------: | :------: | :---------------------------------------------- | ------------------------------------------------ | -| arrowTrigger | `'hover'\|'never'\|'always'` | 'hover' | 可选,指定切换箭头显示方式 | [指示器&切换箭头](#指示器切换箭头) | -| autoplay | `boolean` | false | 可选,是否自动轮播 | [自动轮播](#自动轮播) | -| autoplaySpeed | `number` | 3000 | 可选,配合`autoplay`使用,自动轮播速度,单位 ms | [自动轮播](#自动轮播) | -| height | `string` | '100%' | 可选,轮播容器高度 | [基本用法](#基本用法) | -| showDots | `boolean` | true | 可选,是否显示面板指示器 | [自动轮播](#自动轮播) | -| dotPosition | `'top'\|'bottom'` | 'bottom' | 可选,面板指示器位置 | [指示器&切换箭头](#指示器切换箭头) | -| dotTrigger | `'click'\|'hover'` | 'click' | 可选,指示器触发轮播方式 | [指示器&切换箭头](#指示器切换箭头) | -| activeIndex | `number` | 0 | 可选,初始化激活卡片索引,从 0 开始,支持`[(activeIndex)]`双向绑定 | [基本用法](#基本用法) | +### 自动轮播 -#### 事件 +:::demo -| 事件 | 类型 | 描述 | 跳转 Demo | -| :----------------: | :---------------------: | :-----------------------------------------: | ------------------------------------------------- | -| activeIndexChange | `EventEmitter` | 卡片切换时,返回当前卡片的索引,从0开始 | [基本用法](#基本用法) | +```vue + + + +``` -| 方法 | 描述 | 跳转 Demo | -| :---------: | :---------------------------------- | :----------------------------- | -| prev() | 切换到上一张卡片 | [自定义操作](#自定义操作) | -| next() | 切换到下一张卡片 | [自定义操作](#自定义操作) | -| goTo(index) | 切换到指定索引的卡片,索引从 0 开始 | [自定义操作](#自定义操作) | +::: +### 自定义操作 +:::demo + +```vue + - +``` - display: flex; - align-items: center; +::: - > * { - margin-right: 20px; - } -} - \ No newline at end of file +### API + +#### 参数 + +| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | +| :-----------: | :--------------------------: | :------: | :----------------------------------------------------------------- | ----------------------------------- | +| arrowTrigger | `'hover'\|'never'\|'always'` | 'hover' | 可选,指定切换箭头显示方式 | [指示器&切换箭头](#指示器-切换箭头) | +| autoplay | `boolean` | false | 可选,是否自动轮播 | [自动轮播](#自动轮播) | +| autoplaySpeed | `number` | 3000 | 可选,配合`autoplay`使用,自动轮播速度,单位 ms | [自动轮播](#自动轮播) | +| height | `string` | '100%' | 可选,轮播容器高度 | [基本用法](#基本用法) | +| showDots | `boolean` | true | 可选,是否显示面板指示器 | [自动轮播](#自动轮播) | +| dotPosition | `'top'\|'bottom'` | 'bottom' | 可选,面板指示器位置 | [指示器&切换箭头](#指示器-切换箭头) | +| dotTrigger | `'click'\|'hover'` | 'click' | 可选,指示器触发轮播方式 | [指示器&切换箭头](#指示器-切换箭头) | +| activeIndex | `number` | 0 | 可选,初始化激活卡片索引,从 0 开始,支持`[(activeIndex)]`双向绑定 | [基本用法](#基本用法) | + +#### 事件 + +| 事件 | 类型 | 描述 | 跳转 Demo | +| :---------------: | :--------------------: | :---------------------------------------: | --------------------- | +| activeIndexChange | `EventEmitter` | 卡片切换时,返回当前卡片的索引,从 0 开始 | [基本用法](#基本用法) | + +#### 方法 + +| 方法 | 描述 | 跳转 Demo | +| :---------: | :---------------------------------- | :------------------------ | +| prev() | 切换到上一张卡片 | [自定义操作](#自定义操作) | +| next() | 切换到下一张卡片 | [自定义操作](#自定义操作) | +| goTo(index) | 切换到指定索引的卡片,索引从 0 开始 | [自定义操作](#自定义操作) | -- Gitee