coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CCard,
4
  CCardBody,
5
  CCardHeader,
6
  CCarousel,
7
  CCarouselCaption,
8
  CCarouselItem,
9
  CCol,
10
  CRow,
11
} from '@coreui/react'
12
import { DocsExample } from 'src/components'
13

14
import AngularImg from 'src/assets/images/angular.jpg'
15
import ReactImg from 'src/assets/images/react.jpg'
16
import VueImg from 'src/assets/images/vue.jpg'
17

18
const slidesLight = [
19
  'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
20
  'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
21
  'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
22
]
23

24
const Carousels = () => {
25
  return (
26
    <CRow>
27
      <CCol xs={12}>
28
        <CCard className="mb-4">
29
          <CCardHeader>
30
            <strong>Carousel</strong> <small>Slide only</small>
31
          </CCardHeader>
32
          <CCardBody>
33
            <p className="text-body-secondary small">Here’s a carousel with slides</p>
34
            <DocsExample href="components/carousel">
35
              <CCarousel>
36
                <CCarouselItem>
37
                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
38
                </CCarouselItem>
39
                <CCarouselItem>
40
                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
41
                </CCarouselItem>
42
                <CCarouselItem>
43
                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
44
                </CCarouselItem>
45
              </CCarousel>
46
            </DocsExample>
47
          </CCardBody>
48
        </CCard>
49
      </CCol>
50
      <CCol xs={12}>
51
        <CCard className="mb-4">
52
          <CCardHeader>
53
            <strong>Carousel</strong> <small>With controls</small>
54
          </CCardHeader>
55
          <CCardBody>
56
            <p className="text-body-secondary small">
57
              Adding in the previous and next controls by <code>controls</code> property.
58
            </p>
59
            <DocsExample href="components/carousel/#with-controls">
60
              <CCarousel controls>
61
                <CCarouselItem>
62
                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
63
                </CCarouselItem>
64
                <CCarouselItem>
65
                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
66
                </CCarouselItem>
67
                <CCarouselItem>
68
                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
69
                </CCarouselItem>
70
              </CCarousel>
71
            </DocsExample>
72
          </CCardBody>
73
        </CCard>
74
      </CCol>
75
      <CCol xs={12}>
76
        <CCard className="mb-4">
77
          <CCardHeader>
78
            <strong>Carousel</strong> <small>With indicators</small>
79
          </CCardHeader>
80
          <CCardBody>
81
            <p className="text-body-secondary small">
82
              You can attach the indicators to the carousel, lengthwise the controls, too.
83
            </p>
84
            <DocsExample href="components/carousel/#with-indicators">
85
              <CCarousel controls indicators>
86
                <CCarouselItem>
87
                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
88
                </CCarouselItem>
89
                <CCarouselItem>
90
                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
91
                </CCarouselItem>
92
                <CCarouselItem>
93
                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
94
                </CCarouselItem>
95
              </CCarousel>
96
            </DocsExample>
97
          </CCardBody>
98
        </CCard>
99
      </CCol>
100
      <CCol xs={12}>
101
        <CCard className="mb-4">
102
          <CCardHeader>
103
            <strong>Carousel</strong> <small>With captions</small>
104
          </CCardHeader>
105
          <CCardBody>
106
            <p className="text-body-secondary small">
107
              You can add captions to slides with the <code>&lt;CCarouselCaption&gt;</code> element
108
              within any <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden on
109
              smaller viewports, as shown below, with optional{' '}
110
              <a href="https://coreui.io//utilities/display">display utilities</a>. We hide them
111
              with <code>.d-none</code> and draw them back on medium-sized devices with{' '}
112
              <code>.d-md-block</code>.
113
            </p>
114
            <DocsExample href="components/carousel/#with-captions">
115
              <CCarousel controls indicators>
116
                <CCarouselItem>
117
                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
118
                  <CCarouselCaption className="d-none d-md-block">
119
                    <h5>First slide label</h5>
120
                    <p>Some representative placeholder content for the first slide.</p>
121
                  </CCarouselCaption>
122
                </CCarouselItem>
123
                <CCarouselItem>
124
                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
125
                  <CCarouselCaption className="d-none d-md-block">
126
                    <h5>Second slide label</h5>
127
                    <p>Some representative placeholder content for the first slide.</p>
128
                  </CCarouselCaption>
129
                </CCarouselItem>
130
                <CCarouselItem>
131
                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
132
                  <CCarouselCaption className="d-none d-md-block">
133
                    <h5>Third slide label</h5>
134
                    <p>Some representative placeholder content for the first slide.</p>
135
                  </CCarouselCaption>
136
                </CCarouselItem>
137
              </CCarousel>
138
            </DocsExample>
139
          </CCardBody>
140
        </CCard>
141
      </CCol>
142
      <CCol xs={12}>
143
        <CCard className="mb-4">
144
          <CCardHeader>
145
            <strong>Carousel</strong> <small>Crossfade</small>
146
          </CCardHeader>
147
          <CCardBody>
148
            <p className="text-body-secondary small">
149
              Add <code>transition=&#34;crossfade&#34;</code> to your carousel to animate slides
150
              with a fade transition instead of a slide.
151
            </p>
152
            <DocsExample href="components/carousel/#crossfade">
153
              <CCarousel controls transition="crossfade">
154
                <CCarouselItem>
155
                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
156
                </CCarouselItem>
157
                <CCarouselItem>
158
                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
159
                </CCarouselItem>
160
                <CCarouselItem>
161
                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
162
                </CCarouselItem>
163
              </CCarousel>
164
            </DocsExample>
165
          </CCardBody>
166
        </CCard>
167
      </CCol>
168
      <CCol xs={12}>
169
        <CCard className="mb-4">
170
          <CCardHeader>
171
            <strong>Carousel</strong> <small>Dark variant</small>
172
          </CCardHeader>
173
          <CCardBody>
174
            <p className="text-body-secondary small">
175
              Add <code>dark</code> property to the <code>CCarousel</code> for darker controls,
176
              indicators, and captions. Controls have been inverted from their default white fill
177
              with the <code>filter</code> CSS property. Captions and controls have additional Sass
178
              variables that customize the <code>color</code> and <code>background-color</code>.
179
            </p>
180
            <DocsExample href="components/carousel/#dark-variant">
181
              <CCarousel controls indicators dark>
182
                <CCarouselItem>
183
                  <img className="d-block w-100" src={slidesLight[0]} alt="slide 1" />
184
                  <CCarouselCaption className="d-none d-md-block">
185
                    <h5>First slide label</h5>
186
                    <p>Some representative placeholder content for the first slide.</p>
187
                  </CCarouselCaption>
188
                </CCarouselItem>
189
                <CCarouselItem>
190
                  <img className="d-block w-100" src={slidesLight[1]} alt="slide 2" />
191
                  <CCarouselCaption className="d-none d-md-block">
192
                    <h5>Second slide label</h5>
193
                    <p>Some representative placeholder content for the first slide.</p>
194
                  </CCarouselCaption>
195
                </CCarouselItem>
196
                <CCarouselItem>
197
                  <img className="d-block w-100" src={slidesLight[2]} alt="slide 3" />
198
                  <CCarouselCaption className="d-none d-md-block">
199
                    <h5>Third slide label</h5>
200
                    <p>Some representative placeholder content for the first slide.</p>
201
                  </CCarouselCaption>
202
                </CCarouselItem>
203
              </CCarousel>
204
            </DocsExample>
205
          </CCardBody>
206
        </CCard>
207
      </CCol>
208
    </CRow>
209
  )
210
}
211

212
export default Carousels
213