sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-26 17:41:07 +02:00
parent 4bd77fc24d b61206112f
commit c7f687982d
96 changed files with 12979 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Carousels.vue
+255
View File
@@ -0,0 +1,255 @@
<template>
<CRow>
<CCol>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>Slide only</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Here’s a carousel with slides
</p>
<Example href="components/carousel.html#slides-only">
<CCarousel>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
alt="slide 3"
/>
</CCarouselItem>
</CCarousel>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>With controls</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Adding in the previous and next controls by
<code>controls</code> property.
</p>
<Example href="components/carousel.html#with-controls">
<CCarousel controls>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
alt="slide 3"
/>
</CCarouselItem>
</CCarousel>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>With indicators</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
You can attach the indicators to the carousel, lengthwise the
controls, too.
</p>
<Example href="components/carousel.html#with-indicators">
<CCarousel controls indicators>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
alt="slide 3"
/>
</CCarouselItem>
</CCarousel>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>With captions</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
You can add captions to slides with the
<code>&lt;CCarouselCaption&gt;</code> element within any
<code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden
on smaller viewports, as shown below, with optional
<a href="https://coreui.io/4.0/utilities/display"
>display utilities</a
>. We hide them with <code>.d-none</code> and draw them back on
medium-sized devices with <code>.d-md-block</code>.
</p>
<Example href="components/carousel.html#with-captions">
<CCarousel controls indicators>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
alt="slide 1"
/>
<CCarouselCaption class="d-none d-md-block">
<h5>First slide label</h5>
<p>
Some representative placeholder content for the first slide.
</p>
</CCarouselCaption>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
alt="slide 2"
/>
<CCarouselCaption class="d-none d-md-block">
<h5>First slide label</h5>
<p>
Some representative placeholder content for the first slide.
</p>
</CCarouselCaption>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
alt="slide 3"
/>
<CCarouselCaption class="d-none d-md-block">
<h5>First slide label</h5>
<p>
Some representative placeholder content for the first slide.
</p>
</CCarouselCaption>
</CCarouselItem>
</CCarousel>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>Crossfade</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>transition=&#34;crossfade&#34;</code> to your carousel to
animate slides with a fade transition instead of a slide.
</p>
<Example href="components/carousel.html#crossfade">
<CCarousel controls indicators transition="crossfade">
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
alt="slide 3"
/>
</CCarouselItem>
</CCarousel>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>Dark variant</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>dark</code> property to the <code>CCarousel</code> for
darker controls, indicators, and captions. Controls have been
inverted from their default white fill with the
<code>filter</code> CSS property. Captions and controls have
additional Sass variables that customize the <code>color</code> and
<code>background-color</code>.
</p>
<Example href="components/carousel.html#dark-variant">
<CCarousel controls indicators dark>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
alt="slide 3"
/>
</CCarouselItem>
</CCarousel>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Carousels",
};
</script>