github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat: add carousel customArrows demo

pull/77/merge
wangxueliang 6 years ago
parent
d2f411a862
commit
9e4c2116c1
4 changed files with 179 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 94
      components/carousel/__tests__/__snapshots__/demo.test.js.snap
  2. 65
      components/carousel/demo/customArrows.md
  3. 2
      components/carousel/demo/index.vue
  4. 22
      components/vc-slick/src/arrows.js

94
components/carousel/__tests__/__snapshots__/demo.test.js.snap
Unescape 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
Unescape 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
Unescape 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
Unescape 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}>

Write Preview
Loading…
Cancel
Save