test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-02 03:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: add carousel customArrows demo

Browse Source
This commit is contained in:
wangxueliang 2018-07-23 16:27:50 +08:00
parent d2f411a862
commit 9e4c2116c1
4 changed files with 179 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
components/carousel/__tests__/__snapshots__/demo.test.js.snap
View File

@ -176,6 +176,100 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
</div>
`;
exports[`renders ./components/carousel/demo/customArrows.md correctly 1`] = `
<div class="ant-carousel">
<div class="slick-slider slick-initialized">
<div class="custom-slick-arrow slick-arrow slick-prev" style="display: block;">
<i class="anticon anticon-left-square"></i>
</div>
<div class="slick-list">
<div class="slick-track" style="width: 900%; left: -100%;">
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>1</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>2</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>3</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>1</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>2</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>3</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
</div>
</div>
<div class="custom-slick-arrow slick-arrow slick-next" style="right: -20px; display: block;">
<i class="anticon anticon-right-square"></i>
</div>
<ul class="slick-dots" style="display: block;">
<li class="slick-active">
<button class="">1</button>
</li>
<li class="">
<button class="">2</button>
</li>
<li class="">
<button class="">3</button>
</li>
<li class="">
<button class="">4</button>
</li>
</ul>
</div>
</div>
`;
exports[`renders ./components/carousel/demo/customPaging.md correctly 1`] = `
<div class="ant-carousel">
<div class="slick-slider slick-initialized">

65
components/carousel/demo/customArrows.md Normal file
View File

@ -0,0 +1,65 @@
<cn>
#### 自定义箭头
自定义箭头展示。
</cn>
<us>
#### Custom Arrows
Custom arrows display
</us>
```html
<template>
<a-carousel arrows>
<template slot="prevArrow" slot-scope="props">
<div
class="custom-slick-arrow"
>
<a-icon type="left-square" />
</div>
</template>
<template slot="nextArrow" slot-scope="props">
<div
class="custom-slick-arrow"
style="right: -20px"
>
<a-icon type="right-square" />
</div>
</template>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</a-carousel>
</template>
<script>
export default {}
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel >>> .custom-slick-arrow {
display: block;
font-size: 25px;
background: #fff;
color: #5d5959;
}
.ant-carousel >>> .custom-slick-arrow:before {
display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
color: #403d3d
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
</style>
```

2
components/carousel/demo/index.vue
View File

@ -4,6 +4,7 @@ import Fade from './fade'
import Autoplay from './autoplay'
import Vertical from './vertical'
import CustomPaging from './customPaging'
import CustomArrows from './customArrows'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
@ -42,6 +43,7 @@ export default {
<Fade />
<Autoplay />
<CustomPaging />
<CustomArrows />
<api>
<CN slot='cn' />
<US />

22
components/vc-slick/src/arrows.js
View File

@ -35,7 +35,7 @@ export const PrevArrow = {
domProps: {
'data-role': 'none',
},
class: classnames(prevClasses),
class: prevClasses,
style: { display: 'block' },
on: {
click: prevHandler,
@ -53,7 +53,14 @@ export const PrevArrow = {
...{
props: customProps,
},
}), {})
}), {
key: '0',
class: prevClasses,
style: { display: 'block' },
on: {
click: prevHandler,
},
})
} else {
prevArrow = (
<button key='0' type='button' {...prevArrowProps}>
@ -96,7 +103,7 @@ export const NextArrow = {
domProps: {
'data-role': 'none',
},
class: classnames(nextClasses),
class: nextClasses,
style: { display: 'block' },
on: {
click: nextHandler,
@ -114,7 +121,14 @@ export const NextArrow = {
...{
props: customProps,
},
}), {})
}), {
key: '1',
class: nextClasses,
style: { display: 'block' },
on: {
click: nextHandler,
},
})
} else {
nextArrow = (
<button key='1' type='button' {...nextArrowProps}>