8000 docs: update content · JM066/coreui-react@75613de · GitHub
[go: up one dir, main page]
Skip to content

Commit 75613de

Browse files
mrholekmrholek
committed
docs: update content
1 parent aae29d1 commit 75613de

File tree

17 files changed

+153
-152
lines changed

17 files changed

+153
-152
lines changed

‎src/components/avatar/CAvatar.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ import { CAvatar } from './CAvatar.tsx'
1414
## Image avatars
1515

1616
<Playground>
17-
<CAvatar image="/public/images/avatars/1.jpg"/>
18-
<CAvatar image="/public/images/avatars/2.jpg"/>
19-
<CAvatar image="/public/images/avatars/3.jpg"/>
17+
<CAvatar src="/public/images/avatars/1.jpg"/>
18+
<CAvatar src="/public/images/avatars/2.jpg"/>
19+
<CAvatar src="/public/images/avatars/3.jpg"/>
2020
</Playground>
2121

2222
## Letter avatars
@@ -61,7 +61,7 @@ Fancy larger or smaller avatar? Add `size="xl"`, `size="lg"` or `size="sm"` for
6161
## Avatars with status
6262

6363
<Playground>
64-
<CAvatar image="/public/images/avatars/1.jpg" status="success"/>
64+
<CAvatar src="/public/images/avatars/1.jpg" status="success"/>
6565
<CAvatar color="secondary" status="danger">CUI</CAvatar>
6666
</Playground>
6767

‎src/components/breadcrumb/CBreadcrumb.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@ It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom
5757
</Playground>
5858

5959
```scss
60-
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
60+
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
61+
width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
6162
```
6263

6364
You can also remove the divider setting `--cui-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.

‎src/components/button-group/CButtonGroup.mdx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -77,17 +77,17 @@ Combine button-like checkbox and radio toggle buttons into a seamless looking bu
7777

7878
<Playground>
7979
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
80-
<CFormCheck button buttonVariant="outline" id="btncheck1" autocomplete="off" label="Checkbox 1"/>
81-
<CFormCheck button buttonVariant="outline" id="btncheck2" autocomplete="off" label="Checkbox 2"/>
82-
<CFormCheck button buttonVariant="outline" id="btncheck3" autocomplete="off" label="Checkbox 3"/>
80+
<CFormCheck button buttonVariant="outline" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
81+
<CFormCheck button buttonVariant="outline" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
82+
<CFormCheck button buttonVariant="outline" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
8383
</CButtonGroup>
8484
</Playground>
8585

8686
<Playground>
8787
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
88-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autocomplete="off" label="Radio 1"/>
89-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autocomplete="off" label="Radio 2"/>
90-
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autocomplete="off" label="Radio 3"/>
88+
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
89+
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
90+
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
9191
</CButtonGroup>
9292
</Playground>
9393

@@ -255,9 +255,9 @@ Create a set of buttons that appear vertically stacked rather than horizontally.
255255

256256
<Playground>
257257
<CButtonGroup vertical role="group" aria-label="Vertical button group">
258-
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio1" autocomplete="off" label="Radio 1" checked/>
259-
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio2" autocomplete="off" label="Radio 2"/>
260-
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio3" autocomplete="off" label="Radio 3"/>
258+
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
259+
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
260+
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
261261
</CButtonGroup>
262262
</Playground>
263263

‎src/components/button/CButton.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
153153
Create buttons that span the full width of a parent—by using utilities.
154154

155155
<Playground>
156-
<div class="d-grid gap-2">
156+
<div className="d-grid gap-2">
157157
<CButton color="primary">Button</CButton>
158158
<CButton color="primary">Button</CButton>
159159
</div>
@@ -162,7 +162,7 @@ Create buttons that span the full width of a parent—by using utilities.
162162
Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoint, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change.
163163

164164
<Playground>
165-
<div class="d-grid gap-2 d-md-block">
165+
<div className="d-grid gap-2 d-md-block">
166166
<CButton color="primary">Button</CButton>
167167
<CButton color="primary">Button</CButton>
168168
</div>
@@ -171,7 +171,7 @@ Here we create a responsive variation, starting with vertically stacked buttons
171171
You can adjust the width of your block buttons with grid column width classes. For example, for a half-width "block button", use `.col-6`. Center it horizontally with `.mx-auto`, too.
172172

173173
<Playground>
174-
<div class="d-grid gap-2 col-6 mx-auto">
174+
<div className="d-grid gap-2 col-6 mx-auto">
175175
<CButton color="primary">Button</CButton>
176176
<CButton color="primary">Button</CButton>
177177
</div>
@@ -180,7 +180,7 @@ You can adjust the width of your block buttons with grid column width classes. F
180180
Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked.
181181

182182
<Playground>
183-
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
183+
<div className="d-grid gap-2 d-md-flex justify-content-md-end">
184184
<CButton color="primary" className="me-md-2">Button</CButton>
185185
<CButton color="primary">Button</CButton>
186186
</div>

‎src/components/card/CCard.mdx

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -188,9 +188,9 @@ Card headers can be styled by adding ex. `component="h5"`.
188188 2851
<CCard>
189189
<CCardHeader>Quote</CCardHeader>
190190
<CCardBody>
191-
<blockquote class="blockquote mb-0">
191+
<blockquote className="blockquote mb-0">
192192
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
193-
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
193+
<footer className="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
194194
</blockquote>
195195
</CCardBody>
196196
</CCard>
@@ -394,14 +394,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
394394
<CCardBody>
395395
<CCardTitle>Card title</CCardTitle>
396396
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
397-
<CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
397+
<CCardText><small className="text-muted">Last updated 3 mins ago</small></CCardText>
398398
</CCardBody>
399399
</CCard>
400400
<CCard className="mb-3">
401401
<CCardBody>
402402
<CCardTitle>Card title</CCardTitle>
403403
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
404-
<CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
404+
<CCardText><small className="text-muted">Last updated 3 mins ago</small></CCardText>
405405
</CCardBody>
406406
<CCardImage component="svg" orientation="bottom" className="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
407407
</CCard>
@@ -425,7 +425,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
425425
<CCardBody>
426426
<CCardTitle>Card title</CCardTitle>
427427
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
428-
<CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
428+
<CCardText><small className="text-muted">Last updated 3 mins ago</small></CCardText>
429429
</CCardBody>
430430
</CCol>
431431
</CRow>
@@ -537,23 +537,23 @@ Use card groups to render cards as a single, attached element with equal width a
537537
<CCardBody>
538538
<CCardTitle>Card title</CCardTitle>
539539
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
540-
<CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
540+
<CCardText><small className="text-muted">Last updated 3 mins ago</small></CCardText>
541541
</CCardBody>
542542
</CCard>
543543
<CCard>
544544
<CCardImage component="svg" orientation="top" className="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
545545
<CCardBody>
546546
<CCardTitle>Card title</CCardTitle>
547547
<CCardText>This card has supporting text below as a natural lead-in to additional content.</CCardText>
548-
<CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
548+
<CCardText><small className="text-muted">Last updated 3 mins ago</small></CCardText>
549549
</CCardBody>
550550
</CCard>
551551
<CCard>
552552
<CCardImage component="svg" orientation="top" className="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
553553
<CCardBody>
554554
<CCardTitle>Card title</CCardTitle>
555555
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CCardText>
556-
<CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
556+
<CCardText><small className="text-muted">Last updated 3 mins ago</small></CCardText>
557557
</CCardBody>
558558
</CCard>
559559
</CCardGroup>
@@ -569,23 +569,23 @@ When using card groups with footers, their content will automatically line up.
569569
<CCardTitle>Card title</CCardTitle>
570570
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
571571
</CCardBody>
572-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
572+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
573573
</CCard>
574574
<CCard>
575575
<CCardImage component="svg" orientation="top" className="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
576576
<CCardBody>
577577
<CCardTitle>Card title</CCardTitle>
578578
<CCardText>This card has supporting text below as a natural lead-in to additional content.</CCardText>
579579
</CCardBody>
580-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
580+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
581581
</CCard>
582582
<CCard>
583583
<CCardImage component="svg" orientation="top" className="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
584584
<CCardBody>
585585
<CCardTitle>Card title</CCardTitle>
586586
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CCardText>
587587
</CCardBody>
588-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
588+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
589589
</CCard>
590590
</CCardGroup>
591591
</Playground>
@@ -603,7 +603,7 @@ Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to
603603
<CCardTitle>Card title</CCardTitle>
604604
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
605605
</CCardBody>
606-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
606+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
607607
</CCard>
608608
</CCol>
609609
<CCol xs>
@@ -613,7 +613,7 @@ Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to
613613
<CCardTitle>Card title</CCardTitle>
614614
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
615615
</CCardBody>
616-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
616+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
617617
</CCard>
618618
</CCol>
619619
<CCol xs>
@@ -623,7 +623,7 @@ Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to
623623
<CCardTitle>Card title</CCardTitle>
624624
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
625625
</CCardBody>
626-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
626+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
627627
</CCard>
628628
</CCol>
629629
<CCol xs>
@@ -633,7 +633,7 @@ Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to
633633
<CCardTitle>Card title</CCardTitle>
634634
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
635635
</CCardBody>
636-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
636+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
637637
</CCard>
638638
</CCol>
639639
</CRow>
@@ -650,7 +650,7 @@ Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
650650
<CCardTitle>Card title</CCardTitle>
651651
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
652652
</CCardBody>
653-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
653+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
654654
</CCard>
655655
</CCol>
656656
<CCol xs>
@@ -660,7 +660,7 @@ Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
660660
<CCardTitle>Card title</CCardTitle>
661661
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
662662
</CCardBody>
663-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
663+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
664664
</CCard>
665665
</CCol>
666666
<CCol xs>
@@ -670,7 +670,7 @@ Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
670670
<CCardTitle>Card title</CCardTitle>
671671
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
672672
</CCardBody>
673-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
673+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
674674
</CCard>
675675
</CCol>
676676
<CCol xs>
@@ -680,7 +680,7 @@ Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
680680
<CCardTitle>Card title</CCardTitle>
681681
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
682682
</CCardBody>
683-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
683+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
684684
</CCard>
685685
</CCol>
686686
</CRow>
@@ -740,7 +740,7 @@ Just like with card groups, card footers will automatically line up.
740740
<CCardTitle>Card title</CCardTitle>
741741
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
742742
</CCardBody>
743-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
743+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
744744
</CCard>
745745
</CCol>
746746
<CCol xs>
@@ -750,7 +750,7 @@ Just like with card groups, card footers will automatically line up.
750750
<CCardTitle>Card title</CCardTitle>
751751
<CCardText>This card has supporting text below as a natural lead-in to additional content.</CCardText>
752752
</CCardBody>
753-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
753+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
754754
</CCard>
755755
</CCol>
756756
<CCol xs>
@@ -760,7 +760,7 @@ Just like with card groups, card footers will automatically line up.
760760
<CCardTitle>Card title</CCardTitle>
761761
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CCardText>
762762
</CCardBody>
763-
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
763+
<CCardFooter><small className="text-muted">Last updated 3 mins ago</small></CCardFooter>
764764
</CCard>
765765
</CCol>
766766
</CRow>

0 commit comments

Comments
 (0)
0