Skip to content

Commit 0252bb4

Browse files
mrholekmrholek
committed
docs: update content
1 parent 8c8ddd3 commit 0252bb4

File tree

14 files changed

+177
-192
lines changed

14 files changed

+177
-192
lines changed

‎packages/docs/components/accordion.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Click the accordions below to expand/collapse the accordion content.
1010

1111
::: demo
1212
<CAccordion>
13-
<CAccordionItem :itemKey="1">
13+
<CAccordionItem :item-key="1">
1414
<CAccordionHeader>
1515
Accordion Item #1
1616
</CAccordionHeader>
@@ -23,7 +23,7 @@ Click the accordions below to expand/collapse the accordion content.
2323
the <code>.accordion-body</code>, though the transition does limit overflow.
2424
</CAccordionBody>
2525
</CAccordionItem>
26-
<CAccordionItem :itemKey="2">
26+
<CAccordionItem :item-key="2">
2727
<CAccordionHeader>
2828
Accordion Item #2
2929
</CAccordionHeader>
@@ -36,7 +36,7 @@ Click the accordions below to expand/collapse the accordion content.
3636
the <code>.accordion-body</code>, though the transition does limit overflow.
3737
</CAccordionBody>
3838
</CAccordionItem>
39-
<CAccordionItem :itemKey="3">
39+
<CAccordionItem :item-key="3">
4040
<CAccordionHeader>
4141
Accordion Item #3
4242
</CAccordionHeader>
@@ -53,7 +53,7 @@ Click the accordions below to expand/collapse the accordion content.
5353
:::
5454
```vue
5555
<CAccordion>
56-
<CAccordionItem :itemKey="1">
56+
<CAccordionItem :item-key="1">
5757
<CAccordionHeader>
5858
Accordion Item #1
5959
</CAccordionHeader>
@@ -66,7 +66,7 @@ Click the accordions below to expand/collapse the accordion content.
6666
the <code>.accordion-body</code>, though the transition does limit overflow.
6767
</CAccordionBody>
6868
</CAccordionItem>
69-
<CAccordionItem :itemKey="2">
69+
<CAccordionItem :item-key="2">
7070
<CAccordionHeader>
7171
Accordion Item #2
7272
</CAccordionHeader>
@@ -79,7 +79,7 @@ Click the accordions below to expand/collapse the accordion content.
7979
the <code>.accordion-body</code>, though the transition does limit overflow.
8080
</CAccordionBody>
8181
</CAccordionItem>
82-
<CAccordionItem :itemKey="3">
82+
<CAccordionItem :item-key="3">
8383
<CAccordionHeader>
8484
Accordion Item #3
8585
</CAccordionHeader>
@@ -188,11 +188,11 @@ Add `flush` to remove the default `background-color`, some borders, and some rou
188188

189189
### Always open
190190

191-
Add `alwaysOpen` property to make accordion items stay open when another item is opened.
191+
Add `always-open` property to make accordion items stay open when another item is opened.
192192

193193
:::demo
194-
<CAccordion :activeItemKey="2" alwaysOpen>
195-
<CAccordionItem :itemKey="1">
194+
<CAccordion :active-item-key="2" always-open>
195+
<CAccordionItem :item-key="1">
196196
<CAccordionHeader>
197197
Accordion Item #1
198198
</CAccordionHeader>
@@ -205,7 +205,7 @@ Add `alwaysOpen` property to make accordion items stay open when another item is
205205
the <code>.accordion-body</code>, though the transition does limit overflow.
206206
</CAccordionBody>
207207
</CAccordionItem>
208-
<CAccordionItem :itemKey="2">
208+
<CAccordionItem :item-key="2">
209209
<CAccordionHeader>
210210
Accordion Item #2
211211
</CAccordionHeader>
@@ -218,7 +218,7 @@ Add `alwaysOpen` property to make accordion items stay open when another item is
218218
the <code>.accordion-body</code>, though the transition does limit overflow.
219219
</CAccordionBody>
220220
</CAccordionItem>
221-
<CAccordionItem :itemKey="3">
221+
<CAccordionItem :item-key="3">
222222
<CAccordionHeader>
223223
Accordion Item #3
224224
</CAccordionHeader>
@@ -234,8 +234,8 @@ Add `alwaysOpen` property to make accordion items stay open when another item is
234234
</CAccordion>
235235
:::
236236
```vue
237-
<CAccordion :activeItemKey="2" alwaysOpen>
238-
<CAccordionItem :itemKey="1">
237+
<CAccordion :active-item-key="2" always-open>
238+
<CAccordionItem :item-key="1">
239239
<CAccordionHeader>
240240
Accordion Item #1
241241
</CAccordionHeader>
@@ -248,7 +248,7 @@ Add `alwaysOpen` property to make accordion items stay open when another item is
248248
the <code>.accordion-body</code>, though the transition does limit overflow.
249249
</CAccordionBody>
250250
</CAccordionItem>
251-
<CAccordionItem :itemKey="2">
251+
<CAccordionItem :item-key="2">
252252
<CAccordionHeader>
253253
Accordion Item #2
254254
</CAccordionHeader>
@@ -261,7 +261,7 @@ Add `alwaysOpen` property to make accordion items stay open when another item is
261261
the <code>.accordion-body</code>, though the transition does limit overflow.
262262
</CAccordionBody>
263263
</CAccordionItem>
264-
<CAccordionItem :itemKey="3">
264+
<CAccordionItem :item-key="3">
265265
<CAccordionHeader>
266266
Accordion Item #3
267267
</CAccordionHeader>

‎packages/docs/components/avatar.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,43 +19,43 @@ description: Vue avatar component can be used to display circular user profile p
1919
## Letter avatars
2020

2121
::: demo
22-
<CAvatar color="primary" textColor="white">CUI</CAvatar>
22+
<CAvatar color="primary" text-color="white">CUI</CAvatar>
2323
<CAvatar color="secondary">CUI</CAvatar>
24-
<CAvatar color="warning" textColor="white">CUI</CAvatar>
24+
<CAvatar color="warning" text-color="white">CUI</CAvatar>
2525
:::
2626
```vue
27-
<CAvatar color="primary" textColor="white">CUI</CAvatar>
27+
<CAvatar color="primary" text-color="white">CUI</CAvatar>
2828
<CAvatar color="secondary">CUI</CAvatar>
29-
<CAvatar color="warning" textColor="white">CUI</CAvatar>
29+
<CAvatar color="warning" text-color="white">CUI</CAvatar>
3030
```
3131

3232
## Rounded avatars
3333

3434
Use the `shape="rounded"` prop to make avatars squared with rounded corners.
3535

3636
::: demo
37-
<CAvatar color="primary" textColor="white" shape="rounded">CUI</CAvatar>
37+
<CAvatar color="primary" text-color="white" shape="rounded">CUI</CAvatar>
3838
<CAvatar color="secondary" shape="rounded">CUI</CAvatar>
39-
<CAvatar color="warning" textColor="white" shape="rounded">CUI</CAvatar>
39+
<CAvatar color="warning" text-color="white" shape="rounded">CUI</CAvatar>
4040
:::
4141
```vue
42-
<CAvatar color="primary" textColor="white" shape="rounded">CUI</CAvatar>
42+
<CAvatar color="primary" text-color="white" shape="rounded">CUI</CAvatar>
4343
<CAvatar color="secondary" shape="rounded">CUI</CAvatar>
44-
<CAvatar color="warning" textColor="white" shape="rounded">CUI</CAvatar>
44+
<CAvatar color="warning" text-color="white" shape="rounded">CUI</CAvatar>
4545
```
4646
## Square avatars
4747

4848
Use the `shape="rounded-0"` prop to make avatars squared.
4949

5050
::: demo
51-
<CAvatar color="primary" textColor="white" shape="rounded-0">CUI</CAvatar>
51+
<CAvatar color="primary" text-color="white" shape="rounded-0">CUI</CAvatar>
5252
<CAvatar color="secondary" shape="rounded-0">CUI</CAvatar>
53-
<CAvatar color="warning" textColor="white" shape="rounded-0">CUI</CAvatar>
53+
<CAvatar color="warning" text-color="white" shape="rounded-0">CUI</CAvatar>
5454
:::
5555
```vue
56-
<CAvatar color="primary" textColor="white" shape="rounded-0">CUI</CAvatar>
56+
<CAvatar color="primary" text-color="white" shape="rounded-0">CUI</CAvatar>
5757
<CAvatar color="secondary" shape="rounded-0">CUI</CAvatar>
58-
<CAvatar color="warning" textColor="white" shape="rounded-0">CUI</CAvatar>
58+
<CAvatar color="warning" text-color="white" shape="rounded-0">CUI</CAvatar>
5959
```
6060

6161
## Sizes

‎packages/docs/components/button-group.md

Lines changed: 18 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -86,46 +86,31 @@ Combine button-like checkbox and radio toggle buttons into a seamless looking bu
8686

8787
::: demo
8888
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
89-
<CFormCheck :button="{variant: 'outline'}" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
90-
<CFormCheck :button="{variant: 'outline'}" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
91-
<CFormCheck :button="{variant: 'outline'}" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
89+
<CFormCheck :button="{color: 'primary', variant: 'outline'}" id="btncheck1" autocomplete="off" label="Checkbox 1"/>
90+
<CFormCheck :button="{color: 'primary', variant: 'outline'}" id="btncheck2" autocomplete="off" label="Checkbox 2"/>
91+
<CFormCheck :button="{color: 'primary', variant: 'outline'}" id="btncheck3" autocomplete="off" label="Checkbox 3"/>
9292
</CButtonGroup>
9393
:::
9494
```vue
9595
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
96-
<CFormCheck :button="{variant: 'outline'}" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
97-
<CFormCheck :button="{variant: 'outline'}" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
98-
<CFormCheck :button="{variant: 'outline'}" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
96+
<CFormCheck :button="{color: 'primary', variant: 'outline'}" id="btncheck1" autocomplete="off" label="Checkbox 1"/>
97+
<CFormCheck :button="{color: 'primary', variant: 'outline'}" id="btncheck2" autocomplete="off" label="Checkbox 2"/>
98+
<CFormCheck :button="{color: 'primary', variant: 'outline'}" id="btncheck3" autocomplete="off" label="Checkbox 3"/>
9999
</CButtonGroup>
100100
```
101101

102102
::: demo
103103
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
104-
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
105-
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
106-
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
104+
<CFormCheck type="radio" :button="{color: 'primary', variant: 'outline'}" name="btnradio" id="btnradio1" autocomplete="off" label="Radio 1" checked/>
105+
<CFormCheck type="radio" :button="{color: 'primary', variant: 'outline'}" name="btnradio" id="btnradio2" autocomplete="off" label="Radio 2"/>
106+
<CFormCheck type="radio" :button="{color: 'primary', variant: 'outline'}" name="btnradio" id="btnradio3" autocomplete="off" label="Radio 3"/>
107107
</CButtonGroup>
108108
:::
109109
```vue
110110
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
111-
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
112-
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
113-
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
114-
</CButtonGroup>
115-
```
116-
117-
::: demo
118-
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
119-
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
120-
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
121-
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
122-
</CButtonGroup>
123-
:::
124-
```vue
125-
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
126-
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
127-
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
128-
<CFormCheck type="radio" :button="{variant: 'outline'}" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
111+
<CFormCheck type="radio" :button="{color: 'primary', variant: 'outline'}" name="btnradio" id="btnradio1" autocomplete="off" label="Radio 1" checked/>
112+
<CFormCheck type="radio" :button="{color: 'primary', variant: 'outline'}" name="btnradio" id="btnradio2" autocomplete="off" label="Radio 2"/>
113+
<CFormCheck type="radio" :button="{color: 'primary', variant: 'outline'}" name="btnradio" id="btnradio3" autocomplete="off" label="Radio 3"/>
129114
</CButtonGroup>
130115
```
131116

@@ -431,16 +416,16 @@ Create a set of buttons that appear vertically stacked rather than horizontally.
431416

432417
::: demo
433418
<CButtonGroup vertical role="group" aria-label="Vertical button group">
434-
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
435-
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
436-
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
419+
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio1" autocomplete="off" label="Radio 1" checked/>
420+
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio2" autocomplete="off" label="Radio 2"/>
421+
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio3" autocomplete="off" label="Radio 3"/>
437422
</CButtonGroup>
438423
:::
439424
```vue
440425
<CButtonGroup vertical role="group" aria-label="Vertical button group">
441-
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
442-
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
443-
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
426+
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio1" autocomplete="off" label="Radio 1" checked/>
427+
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio2" autocomplete="off" label="Radio 2"/>
428+
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" name="vbtnradio" id="vbtnradio3" autocomplete="off" label="Radio 3"/>
444429
</CButtonGroup>
445430
```
446431

‎packages/docs/components/card.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -750,7 +750,7 @@ Use `color` property to change the appearance of a card.
750750
{ color: 'light' },
751751
{ color: 'dark', textColor: 'white' }
752752
]">
753-
<CCard :color="item.color" :textColor="item.textColor" class="mb-3" style="max-width: 18rem">
753+
<CCard :color="item.color" :text-color="item.textColor" class="mb-3" style="max-width: 18rem">
754754
<CCardHeader>Header</CCardHeader>
755755
<CCardBody>
756756
<CCardTitle>{{item.color}} card title</CCardTitle>
@@ -770,7 +770,7 @@ Use `color` property to change the appearance of a card.
770770
{ color: 'light' },
771771
{ color: 'dark', textColor: 'white' }
772772
]">
773-
<CCard :color="item.color" :textColor="item.textColor" class="mb-3" style="max-width: 18rem">
773+
<CCard :color="item.color" :text-color="item.textColor" class="mb-3" style="max-width: 18rem">
774774
<CCardHeader>Header</CCardHeader>
775775
<CCardBody>
776776
<CCardTitle>{{item.color}} card title</CCardTitle>
@@ -789,7 +789,7 @@ Use `color` property to change the appearance of a card.
789789

790790
### Border
791791

792-
Use [border utilities](https://coreui.io/docs/utilities/borders/) to change just the `border-color` of a card. Note that you can set `textColor` property on the `<CCard>` or a subset of the card's contents as shown below.
792+
Use [border utilities](https://coreui.io/docs/utilities/borders/) to change just the `border-color` of a card. Note that you can set `text-color` property on the `<CCard>` or a subset of the card's contents as shown below.
793793

794794
::: demo
795795
<template v-for="(item) in [
@@ -802,7 +802,7 @@ Use [border utilities](https://coreui.io/docs/utilities/borders/) to change just
802802
{ color: 'light'},
803803
{ color: 'dark'}
804804
]">
805-
<CCard :textColor="item.textColor" class="mb-3" :class="'border-' + item.color" style="max-width: 18rem">
805+
<CCard :text-color="item.textColor" class="mb-3" :class="'border-' + item.color" style="max-width: 18rem">
806806
<CCardHeader>Header</CCardHeader>
807807
<CCardBody>
808808
<CCardTitle>{{item.color}} card title</CCardTitle>
@@ -822,7 +822,7 @@ Use [border utilities](https://coreui.io/docs/utilities/borders/) to change just
822822
{ color: 'light'},
823823
{ color: 'dark'}
824824
]">
825-
<CCard :textColor="item.textColor" class="mb-3" :class="'border-' + item.color" style="max-width: 18rem">
825+
<CCard :text-color="item.textColor" class="mb-3" :class="'border-' + item.color" style="max-width: 18rem">
826826
<CCardHeader>Header</CCardHeader>
827827
<CCardBody>
828828
<CCardTitle>{{item.color}} card title</CCardTitle>
@@ -845,7 +845,7 @@ Use [border utilities](https://coreui.io/docs/utilities/borders/) to change just
845845
{ color: 'light'},
846846
{ color: 'dark'}
847847
]">
848-
<CCard :textColor="item.textColor" class="mb-3 border-top-3" :class="'border-top-' + item.color" style="max-width: 18rem">
848+
<CCard :text-color="item.textColor" class="mb-3 border-top-3" :class="'border-top-' + item.color" style="max-width: 18rem">
849849
<CCardHeader>Header</CCardHeader>
850850
<CCardBody>
851851
<CCardTitle>{{item.color}} card title</CCardTitle>
@@ -865,7 +865,7 @@ Use [border utilities](https://coreui.io/docs/utilities/borders/) to change just
865865
{ color: 'light'},
866866
{ color: 'dark'}
867867
]">
868-
<CCard :textColor="item.textColor" class="mb-3 border-top-3" :class="'border-top-' + item.color" style="max-width: 18rem">
868+
<CCard :text-color="item.textColor" class="mb-3 border-top-3" :class="'border-top-' + item.color" style="max-width: 18rem">
869869
<CCardHeader>Header</CCardHeader>
870870
<CCardBody>
871871
<CCardTitle>{{item.color}} card title</CCardTitle>

‎packages/docs/components/dropdown.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ Opt into darker dropdowns to match a dark navbar or custom style by set `dark` p
252252
And putting it to use in a navbar:
253253

254254
::: demo
255-
<CNavbar expand="lg" colorScheme="dark" class="bg-dark">
255+
<CNavbar expand="lg" color-scheme="dark" class="bg-dark">
256256
<CContainer fluid>
257257
<CNavbarBrand href="#">Navbar</CNavbarBrand>
258258
<CNavbarNav>
@@ -271,7 +271,7 @@ And putting it to use in a navbar:
271271
</CNavbar>
272272
:::
273273
```vue
274-
<CNavbar expand="lg" colorScheme="dark" class="bg-dark">
274+
<CNavbar expand="lg" color-scheme="dark" class="bg-dark">
275275
<CContainer fluid>
276276
<CNavbarBrand href="#">Navbar</CNavbarBrand>
277277
<CNavbarNav>

‎packages/docs/components/list-group.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -287,17 +287,17 @@ Place CoreUI's checkboxes and radios within list group items and customize as ne
287287
::: demo
288288
<CListGroup>
289289
<CListGroupItem><CFormCheck label="Cras justo odio"/></CListGroupItem>
290-
<CListGroupItem><CFormCheck label="Dapibus ac facilisis in" defaultChecked/></CListGroupItem>
291-
<CListGroupItem><CFormCheck label="Morbi leo risus" defaultChecked/></CListGroupItem>
290+
<CListGroupItem><CFormCheck label="Dapibus ac facilisis in" checked/></CListGroupItem>
291+
<CListGroupItem><CFormCheck label="Morbi leo risus" checked/></CListGroupItem>
292292
<CListGroupItem><CFormCheck label="orta ac consectetur ac"/></CListGroupItem>
293293
<CListGroupItem><CFormCheck label="Vestibulum at eros"/></CListGroupItem>
294294
</CListGroup>
295295
:::
296296
```vue
297297
<CListGroup>
298298
<CListGroupItem><CFormCheck label="Cras justo odio"/></CListGroupItem>
299-
<CListGroupItem><CFormCheck label="Dapibus ac facilisis in" defaultChecked/></CListGroupItem>
300-
<CListGroupItem><CFormCheck label="Morbi leo risus" defaultChecked/></CListGroupItem>
299+
<CListGroupItem><CFormCheck label="Dapibus ac facilisis in" checked/></CListGroupItem>
300+
<CListGroupItem><CFormCheck label="Morbi leo risus" checked/></CListGroupItem>
301301
<CListGroupItem><CFormCheck label="orta ac consectetur ac"/></CListGroupItem>
302302
<CListGroupItem><CFormCheck label="Vestibulum at eros"/></CListGroupItem>
303303
</CListGroup>

0 commit comments

Comments
 (0)