mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-05 13:39:40 +08:00
feat: add carousel customArrows demo
This commit is contained in:
parent
e7d82d3b60
commit
c4ee9b7cc4
@ -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
65
components/carousel/demo/customArrows.md
Normal 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>
|
||||
```
|
@ -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 />
|
||||
|
@ -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}>
|
||||
|
Loading…
Reference in New Issue
Block a user