coreui-free-react-admin-template

Progress.js
186 строк · 7.3 Кб
Перенос по словам
1
import React from 'react'
2
import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react'
3
import { DocsExample } from 'src/components'
4

5
const Progress = () => {
6
  return (
7
    <CRow>
8
      <CCol xs={12}>
9
        <CCard className="mb-4">
10
          <CCardHeader>
11
            <strong>React Progress</strong> <small>Basic example</small>
12
          </CCardHeader>
13
          <CCardBody>
14
            <p className="text-body-secondary small">
15
              Progress components are built with two HTML elements, some CSS to set the width, and a
16
              few attributes. We don&#39;tuse{' '}
17
              <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">
18
                the HTML5 <code>&lt;progress&gt;</code> element
19
              </a>
20
              , ensuring you can stack progress bars, animate them, and place text labels over them.
21
            </p>
22
            <DocsExample href="components/progress">
23
              <CProgress className="mb-3">
24
                <CProgressBar value={0} />
25
              </CProgress>
26
              <CProgress className="mb-3">
27
                <CProgressBar value={25} />
28
              </CProgress>
29
              <CProgress className="mb-3">
30
                <CProgressBar value={50} />
31
              </CProgress>
32
              <CProgress className="mb-3">
33
                <CProgressBar value={75} />
34
              </CProgress>
35
              <CProgress className="mb-3">
36
                <CProgressBar value={100} />
37
              </CProgress>
38
            </DocsExample>
39
          </CCardBody>
40
        </CCard>
41
      </CCol>
42
      <CCol xs={12}>
43
        <CCard className="mb-4">
44
          <CCardHeader>
45
            <strong>React Progress</strong> <small>Labels</small>
46
          </CCardHeader>
47
          <CCardBody>
48
            <p className="text-body-secondary small">
49
              Add labels to your progress bars by placing text within the{' '}
50
              <code>&lt;CProgressBar&gt;</code>.
51
            </p>
52
            <DocsExample href="components/progress#labels">
53
              <CProgress className="mb-3">
54
                <CProgressBar value={25}>25%</CProgressBar>
55
              </CProgress>
56
            </DocsExample>
57
          </CCardBody>
58
        </CCard>
59
      </CCol>
60
      <CCol xs={12}>
61
        <CCard className="mb-4">
62
          <CCardHeader>
63
            <strong>React Progress</strong> <small>Height</small>
64
          </CCardHeader>
65
          <CCardBody>
66
            <p className="text-body-secondary small">
67
              We only set a <code>height</code> value on the <code>&lt;CProgress&gt;</code>, so if
68
              you change that value the inner <code>&lt;CProgressBar&gt;</code> will automatically
69
              resize accordingly.
70
            </p>
71
            <DocsExample href="components/progress#height">
72
              <CProgress height={1} className="mb-3">
73
                <CProgressBar value={25}></CProgressBar>
74
              </CProgress>
75
              <CProgress height={20} className="mb-3">
76
                <CProgressBar value={25}></CProgressBar>
77
              </CProgress>
78
            </DocsExample>
79
          </CCardBody>
80
        </CCard>
81
      </CCol>
82
      <CCol xs={12}>
83
        <CCard className="mb-4">
84
          <CCardHeader>
85
            <strong>React Progress</strong> <small>Backgrounds</small>
86
          </CCardHeader>
87
          <CCardBody>
88
            <p className="text-body-secondary small">
89
              Use <code>color</code> prop to change the appearance of individual progress bars.
90
            </p>
91
            <DocsExample href="components/progress#backgrounds">
92
              <CProgress className="mb-3">
93
                <CProgressBar color="success" value={25} />
94
              </CProgress>
95
              <CProgress className="mb-3">
96
                <CProgressBar color="info" value={50} />
97
              </CProgress>
98
              <CProgress className="mb-3">
99
                <CProgressBar color="warning" value={75} />
100
              </CProgress>
101
              <CProgress className="mb-3">
102
                <CProgressBar color="danger" value={100} />
103
              </CProgress>
104
            </DocsExample>
105
          </CCardBody>
106
        </CCard>
107
      </CCol>
108
      <CCol xs={12}>
109
        <CCard className="mb-4">
110
          <CCardHeader>
111
            <strong>React Progress</strong> <small>Multiple bars</small>
112
          </CCardHeader>
113
          <CCardBody>
114
            <p className="text-body-secondary small">
115
              Include multiple progress bars in a progress component if you need.
116
            </p>
117
            <DocsExample href="components/progress#multiple-bars">
118
              <CProgress className="mb-3">
119
                <CProgressBar value={15} />
120
                <CProgressBar color="success" value={30} />
121
                <CProgressBar color="info" value={20} />
122
              </CProgress>
123
            </DocsExample>
124
          </CCardBody>
125
        </CCard>
126
      </CCol>
127
      <CCol xs={12}>
128
        <CCard className="mb-4">
129
          <CCardHeader>
130
            <strong>React Progress</strong> <small>Striped</small>
131
          </CCardHeader>
132
          <CCardBody>
133
            <p className="text-body-secondary small">
134
              Add <code>variant=&#34;striped&#34;</code> to any <code>&lt;CProgressBar&gt;</code> to
135
              apply a stripe via CSS gradient over the progress bar&#39;s background color.
136
            </p>
137
            <DocsExample href="components/progress#striped">
138
              <CProgress className="mb-3">
139
                <CProgressBar color="success" variant="striped" value={25} />
140
              </CProgress>
141
              <CProgress className="mb-3">
142
                <CProgressBar color="info" variant="striped" value={50} />
143
              </CProgress>
144
              <CProgress className="mb-3">
145
                <CProgressBar color="warning" variant="striped" value={75} />
146
              </CProgress>
147
              <CProgress className="mb-3">
148
                <CProgressBar color="danger" variant="striped" value={100} />
149
              </CProgress>
150
            </DocsExample>
151
          </CCardBody>
152
        </CCard>
153
      </CCol>
154
      <CCol xs={12}>
155
        <CCard className="mb-4">
156
          <CCardHeader>
157
            <strong>React Progress</strong> <small>Animated stripes</small>
158
          </CCardHeader>
159
          <CCardBody>
160
            <p className="text-body-secondary small">
161
              The striped gradient can also be animated. Add <code>animated</code> property to{' '}
162
              <code>&lt;CProgressBar&gt;</code> to animate the stripes right to left via CSS3
163
              animations.
164
            </p>
165
            <DocsExample href="components/progress#animated-stripes">
166
              <CProgress className="mb-3">
167
                <CProgressBar color="success" variant="striped" animated value={25} />
168
              </CProgress>
169
              <CProgress className="mb-3">
170
                <CProgressBar color="info" variant="striped" animated value={50} />
171
              </CProgress>
172
              <CProgress className="mb-3">
173
                <CProgressBar color="warning" variant="striped" animated value={75} />
174
              </CProgress>
175
              <CProgress className="mb-3">
176
                <CProgressBar color="danger" variant="striped" animated value={100} />
177
              </CProgress>
178
            </DocsExample>
179
          </CCardBody>
180
        </CCard>
181
      </CCol>
182
    </CRow>
183
  )
184
}
185

186
export default Progress
187
coreui-free-react-admin-template

Использование cookies
