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

feat: add views - in base section

Browse Source
This commit is contained in:
Marcin Michałek
2021-08-04 18:31:45 +02:00
parent 79559ae334
commit 820f491410
31 changed files with 63224 additions and 9380 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Carousels.vue
+116
View File
@@ -0,0 +1,116 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Carousels</strong>
</CCardHeader>
<CCardBody>
<h4>Slides only</h4>
<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>
<h4 class="mt-4">With controls</h4>
<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>
<h4 class="mt-4">With indicators</h4>
<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>
<h4 class="mt-4">With caption</h4>
<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>
<h4 class="mt-4">With caption</h4>
<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>
<h4 class="mt-4">Dark variant</h4>
<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>