sean
d26db06f74
NPM Installation / build (16.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (16.x, windows-latest) (push) Has been cancelled
NPM Installation / build (17.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (17.x, windows-latest) (push) Has been cancelled
NPM Installation / build (18.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (18.x, windows-latest) (push) Has been cancelled
1 line
6.4 KiB
JavaScript
1 line
6.4 KiB
JavaScript
import{Bt as e,It as t,Lt as n,Qt as r,Vt as i,Xt as a,qt as o,rn as s}from"./index-qNrWYJXL.js";import{t as c}from"./vue-CKP9jW_Y.js";var l=``+new URL(`angular-DbhKAn4Z.jpg`,import.meta.url).href,u=``+new URL(`react-DmxSGVXA.jpg`,import.meta.url).href,d=[`src`],f=[`src`],p=[`src`],m=[`src`],h=[`src`],g=[`src`],_=[`src`],v=[`src`],y=[`src`],b=[`src`],x=[`src`],S=[`src`],C=[`src`],w=[`src`],T=[`src`],E=[`src`],D=[`src`],O=[`src`],k={__name:`Carousels`,setup(k){return(k,A)=>{let j=a(`DocsComponents`),M=a(`CCardHeader`),N=a(`CCarouselItem`),P=a(`CCarousel`),F=a(`DocsExample`),I=a(`CCardBody`),L=a(`CCard`),R=a(`CCarouselCaption`),z=a(`CCol`),B=a(`CRow`);return o(),n(B,null,{default:r(()=>[i(z,{xs:12},{default:r(()=>[i(j,{href:`components/carousel.html`}),i(L,{class:`mb-4`},{default:r(()=>[i(M,null,{default:r(()=>[...A[0]||=[t(`strong`,null,`Vue Carousels`,-1),e(),t(`small`,null,`Slide only`,-1)]]),_:1}),i(I,null,{default:r(()=>[A[1]||=t(`p`,{class:`text-body-secondary small`},` Here’s a carousel with slides `,-1),i(F,{href:`components/carousel.html#slides-only`},{default:r(()=>[i(P,null,{default:r(()=>[i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(c),alt:`slide 1`},null,8,d)]),_:1}),i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(u),alt:`slide 2`},null,8,f)]),_:1}),i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(l),alt:`slide 3`},null,8,p)]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),i(L,{class:`mb-4`},{default:r(()=>[i(M,null,{default:r(()=>[...A[2]||=[t(`strong`,null,`Vue Carousels`,-1),e(),t(`small`,null,`With controls`,-1)]]),_:1}),i(I,null,{default:r(()=>[A[3]||=t(`p`,{class:`text-body-secondary small`},[e(` Adding in the previous and next controls by `),t(`code`,null,`controls`),e(` property. `)],-1),i(F,{href:`components/carousel.html#with-controls`},{default:r(()=>[i(P,{controls:``},{default:r(()=>[i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(c),alt:`slide 1`},null,8,m)]),_:1}),i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(u),alt:`slide 2`},null,8,h)]),_:1}),i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(l),alt:`slide 3`},null,8,g)]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),i(L,{class:`mb-4`},{default:r(()=>[i(M,null,{default:r(()=>[...A[4]||=[t(`strong`,null,`Vue Carousels`,-1),e(),t(`small`,null,`With indicators`,-1)]]),_:1}),i(I,null,{default:r(()=>[A[5]||=t(`p`,{class:`text-body-secondary small`},` You can attach the indicators to the carousel, lengthwise the controls, too. `,-1),i(F,{href:`components/carousel.html#with-indicators`},{default:r(()=>[i(P,{controls:``,indicators:``},{default:r(()=>[i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(c),alt:`slide 1`},null,8,_)]),_:1}),i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(u),alt:`slide 2`},null,8,v)]),_:1}),i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(l),alt:`slide 3`},null,8,y)]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),i(L,{class:`mb-4`},{default:r(()=>[i(M,null,{default:r(()=>[...A[6]||=[t(`strong`,null,`Vue Carousels`,-1),e(),t(`small`,null,`With captions`,-1)]]),_:1}),i(I,null,{default:r(()=>[A[10]||=t(`p`,{class:`text-body-secondary small`},[e(` You can add captions to slides with the `),t(`code`,null,`<CCarouselCaption>`),e(` element within any `),t(`code`,null,`<CCarouselItem>`),e(`. They can be immediately hidden on smaller viewports, as shown below, with optional `),t(`a`,{href:`https://coreui.io/docs/utilities/display`},`display utilities`),e(`. We hide them with `),t(`code`,null,`.d-none`),e(` and draw them back on medium-sized devices with `),t(`code`,null,`.d-md-block`),e(`. `)],-1),i(F,{href:`components/carousel.html#with-captions`},{default:r(()=>[i(P,{controls:``,indicators:``},{default:r(()=>[i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(c),alt:`slide 1`},null,8,b),i(R,{class:`d-none d-md-block`},{default:r(()=>[...A[7]||=[t(`h5`,null,`First slide label`,-1),t(`p`,null,` Some representative placeholder content for the first slide. `,-1)]]),_:1})]),_:1}),i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(u),alt:`slide 2`},null,8,x),i(R,{class:`d-none d-md-block`},{default:r(()=>[...A[8]||=[t(`h5`,null,`First slide label`,-1),t(`p`,null,` Some representative placeholder content for the first slide. `,-1)]]),_:1})]),_:1}),i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(l),alt:`slide 3`},null,8,S),i(R,{class:`d-none d-md-block`},{default:r(()=>[...A[9]||=[t(`h5`,null,`First slide label`,-1),t(`p`,null,` Some representative placeholder content for the first slide. `,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),i(L,{class:`mb-4`},{default:r(()=>[i(M,null,{default:r(()=>[...A[11]||=[t(`strong`,null,`Vue Carousels`,-1),e(),t(`small`,null,`Crossfade`,-1)]]),_:1}),i(I,null,{default:r(()=>[A[12]||=t(`p`,{class:`text-body-secondary small`},[e(` Add `),t(`code`,null,`transition="crossfade"`),e(` to your carousel to animate slides with a fade transition instead of a slide. `)],-1),i(F,{href:`components/carousel.html#crossfade`},{default:r(()=>[i(P,{controls:``,indicators:``,transition:`crossfade`},{default:r(()=>[i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(c),alt:`slide 1`},null,8,C)]),_:1}),i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(u),alt:`slide 2`},null,8,w)]),_:1}),i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(l),alt:`slide 3`},null,8,T)]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),i(L,{class:`mb-4`},{default:r(()=>[i(M,null,{default:r(()=>[...A[13]||=[t(`strong`,null,`Vue Carousels`,-1),e(),t(`small`,null,`Dark variant`,-1)]]),_:1}),i(I,null,{default:r(()=>[A[14]||=t(`p`,{class:`text-body-secondary small`},[e(` Add `),t(`code`,null,`dark`),e(` property to the `),t(`code`,null,`CCarousel`),e(` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `),t(`code`,null,`filter`),e(` CSS property. Captions and controls have additional Sass variables that customize the `),t(`code`,null,`color`),e(` and `),t(`code`,null,`background-color`),e(`. `)],-1),i(F,{href:`components/carousel.html#dark-variant`},{default:r(()=>[i(P,{controls:``,indicators:``,dark:``},{default:r(()=>[i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(c),alt:`slide 1`},null,8,E)]),_:1}),i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(u),alt:`slide 2`},null,8,D)]),_:1}),i(N,null,{default:r(()=>[t(`img`,{class:`d-block w-100`,src:s(l),alt:`slide 3`},null,8,O)]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}}};export{k as default}; |