You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
15 KiB
172 lines
15 KiB
1 year ago
|
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[7716],{994695:function(u,r,t){t.r(r);var m=t(502143),p=t(968521),h=t(720719),v=t(28840),g=t(759907),l=t(828089),Z=t(825673),x=t(902068),f=t(574399),E=t(863942),P=t(316073),y=t(24628),b=t(719260),D=t(956140),a=t(127179),c=t(905388),C=t(40428),M=t(606965),O=t(268696),T=t(587302),o=t(424128),k=t(249706),A=t(795127),R=t(116846),I=t(212039),B=t(73024),w=t(553913),i=t(606641),s=t(667294),n=t(370917);function d(){var _=(0,i.eL)(),e=_.texts;return(0,n.tZ)(i.dY,null,(0,n.tZ)(s.Fragment,null,(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("p",null,e[0].value),(0,n.tZ)("h2",{id:"when-to-use"},(0,n.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,n.tZ)("ul",null,(0,n.tZ)("li",null,e[1].value),(0,n.tZ)("li",null,e[2].value),(0,n.tZ)("li",null,e[3].value)),(0,n.tZ)("h2",{id:"examples"},(0,n.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,n.tZ)(c.Z,{items:[{demo:{id:"components-carousel-demo-basic"},previewerProps:{title:"Basic",filename:"components/carousel/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Carousel } from 'antd';
|
||
|
|
const contentStyle = {
|
||
|
|
margin: 0,
|
||
|
|
height: '160px',
|
||
|
|
color: '#fff',
|
||
|
|
lineHeight: '160px',
|
||
|
|
textAlign: 'center',
|
||
|
|
background: '#364d79',
|
||
|
|
};
|
||
|
|
const App = () => {
|
||
|
|
const onChange = (currentSlide) => {
|
||
|
|
console.log(currentSlide);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<Carousel afterChange={onChange}>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>1</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>2</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>3</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>4</h3>
|
||
|
|
</div>
|
||
|
|
</Carousel>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Basic usage.</p>"}},{demo:{id:"components-carousel-demo-position"},previewerProps:{title:"Position",filename:"components/carousel/demo/position.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { Carousel, Radio } from 'antd';
|
||
|
|
const contentStyle = {
|
||
|
|
height: '160px',
|
||
|
|
color: '#fff',
|
||
|
|
lineHeight: '160px',
|
||
|
|
textAlign: 'center',
|
||
|
|
background: '#364d79',
|
||
|
|
};
|
||
|
|
const App = () => {
|
||
|
|
const [dotPosition, setDotPosition] = useState('top');
|
||
|
|
const handlePositionChange = ({ target: { value } }) => {
|
||
|
|
setDotPosition(value);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Radio.Group
|
||
|
|
onChange={handlePositionChange}
|
||
|
|
value={dotPosition}
|
||
|
|
style={{
|
||
|
|
marginBottom: 8,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Radio.Button value="top">Top</Radio.Button>
|
||
|
|
<Radio.Button value="bottom">Bottom</Radio.Button>
|
||
|
|
<Radio.Button value="left">Left</Radio.Button>
|
||
|
|
<Radio.Button value="right">Right</Radio.Button>
|
||
|
|
</Radio.Group>
|
||
|
|
<Carousel dotPosition={dotPosition}>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>1</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>2</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>3</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>4</h3>
|
||
|
|
</div>
|
||
|
|
</Carousel>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>There are 4 position options available.</p>"}},{demo:{id:"components-carousel-demo-autoplay"},previewerProps:{title:"Scroll automatically",filename:"components/carousel/demo/autoplay.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Carousel } from 'antd';
|
||
|
|
const contentStyle = {
|
||
|
|
height: '160px',
|
||
|
|
color: '#fff',
|
||
|
|
lineHeight: '160px',
|
||
|
|
textAlign: 'center',
|
||
|
|
background: '#364d79',
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<Carousel autoplay>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>1</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>2</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>3</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>4</h3>
|
||
|
|
</div>
|
||
|
|
</Carousel>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Timing of scrolling to the next card/picture.</p>"}},{demo:{id:"components-carousel-demo-fade"},previewerProps:{title:"Fade in",filename:"components/carousel/demo/fade.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Carousel } from 'antd';
|
||
|
|
const contentStyle = {
|
||
|
|
height: '160px',
|
||
|
|
color: '#fff',
|
||
|
|
lineHeight: '160px',
|
||
|
|
textAlign: 'center',
|
||
|
|
background: '#364d79',
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<Carousel effect="fade">
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>1</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>2</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>3</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>4</h3>
|
||
|
|
</div>
|
||
|
|
</Carousel>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Slides use fade for transition.</p>"}},{demo:{id:"components-carousel-demo-component-token"},previewerProps:{debug:!0,title:"Component Token",filename:"components/carousel/demo/component-token.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Carousel, ConfigProvider } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
/** Test usage. Do not use in your production. */
|
||
|
|
const contentStyle = {
|
||
|
|
margin: 0,
|
||
|
|
height: '160px',
|
||
|
|
color: '#fff',
|
||
|
|
lineHeight: '160px',
|
||
|
|
textAlign: 'center',
|
||
|
|
background: '#364d79',
|
||
|
|
};
|
||
|
|
export default () => (
|
||
|
|
<ConfigProvider
|
||
|
|
theme={{
|
||
|
|
components: {
|
||
|
|
Carousel: {
|
||
|
|
dotWidth: 50,
|
||
|
|
dotHeight: 50,
|
||
|
|
dotActiveWidth: 80,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Carousel>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>1</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>2</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>3</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 style={contentStyle}>4</h3>
|
||
|
|
</div>
|
||
|
|
</Carousel>
|
||
|
|
</ConfigProvider>
|
||
|
|
);
|
||
|
|
`,description:"<p>Component Token Debug.</p>"}}]}),(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("h2",{id:"api"},(0,n.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"API"),(0,n.tZ)(l.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[4].value),(0,n.tZ)("th",null,e[5].value),(0,n.tZ)("th",null,e[6].value),(0,n.tZ)("th",null,e[7].value),(0,n.tZ)("th",null,e[8].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[9].value),(0,n.tZ)("td",null,e[10].value),(0,n.tZ)("td",null,e[11].value),(0,n.tZ)("td",null,e[12].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[13].value),(0,n.tZ)("td",null,e[14].value,(0,n.tZ)("code",null,e[15].value),e[16].value,(0,n.tZ)("code",null,e[17].value),e[18].value,(0,n.tZ)("code",null,e[19].value),e[20].value,(0,n.tZ)("code",null,e[21].value)),(0,n.tZ)("td",null,e[22].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[23].value)),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[24].value),(0,n.tZ)("td",null,e[25].value,(0,n.tZ)("code",null,e[26].value),e[27].value,(0,n.tZ)("code",null,e[28].value),e[29].value),(0,n.tZ)("td",null,e[30].value),(0,n.tZ)("td",null,e[31].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[32].value),(0,n.tZ)("td",null,e[33].value),(0,n.tZ)("td",null,e[34].value),(0,n.tZ)("td",null,e[35].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[36].value),(0,n.tZ)("td",null,e[37].value),(0,n.tZ)("td",null,e[38].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[39].value)),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[40].value),(0,n.tZ)("td",null,e[41].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[42].value),e[43].value,(0,n.tZ)("code",null,e[44].value)),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[45].value)),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[46].value),(0,n.tZ)("td",null,e[47].value),(0,n.tZ)("td",null,e[48].value),(0,n.tZ)("td",null,e[49].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[50].value),(0,n.tZ)("td",null,e[51].value),(0,n.tZ)("td",null,e[52].value),(0,n.tZ)("td",null,e[53].value),(0,n.tZ)("td",null)))),(0,n.tZ)("h2",{id:"methods"},(0,n.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#methods",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Methods"),(0,n.tZ)(l.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[54].value),(0,n.tZ)("th",null,e[55].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[56].value),(0,n.tZ)("td",null,e[57].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[58].value),(0,n.tZ)("td",null,e[59].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[60].value),(0,n.tZ)("td",null,e[61].value)))),(0,n.tZ)("p",null,e[62].value,(0,n.tZ)(o.Z,{href:"https://react-slick.neostack.com/docs/api",sourceType:"a"},e[63].value),e[64].value),(0,n.tZ)("h2",{id:"design-token"},(0,n.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,n.tZ)(a.Z,{component:"Carousel"}),(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("h2",{id:"faq"},(0,n.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#faq",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"FAQ"),(0,n.tZ)("h3",{id:"how-to-add-custom-arrows"},(0,n.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-add-custom-arrows",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"How to add custom arrows?"),(0,n.tZ)("p",null,e[65].value,(0,n.tZ)(o.Z,{href:"https://github.com/ant-design/ant-design/issues/12479",sourceType:"a"},e[66].value),e[67].value))))}r.default=d}}]);
|