You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/docs/components/button.md
+12-12Lines changed: 12 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -47,18 +47,18 @@ The `<CButton>` component are designed for `<button>` , `<a>` or `<input>` el
47
47
If you're using `<CButton>` component as `<a>` elements that are used to trigger functionality ex. collapsing content, these links should be given a `role="button"` to adequately communicate their meaning to assistive technologies such as screen readers.
@@ -197,12 +197,12 @@ Disabled buttons using the `<a>` component act a little different:
197
197
`<a>`s don't support the `disabled` attribute, so CoreUI has to add `.disabled` class to make buttons look inactive. CoreUI also has to add to the disabled button component `aria-disabled="true"` attribute to show the state of the component to assistive technologies.
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. Besides, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, we automatically add a `tabindex="-1"` attribute on disabled links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
Copy file name to clipboardExpand all lines: packages/docs/components/list-group.md
+31-31Lines changed: 31 additions & 31 deletions
Original file line number
Diff line number
Diff line change
@@ -76,43 +76,43 @@ Add `disabled` boolean property to a `<CListGroupItem>` to make it appear disabl
76
76
77
77
## Links and buttons
78
78
79
-
Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `component="a|button"`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.
79
+
Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `as="a|button"`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.
<CListGroupItem as="button">Dapibus ac facilisis in</CListGroupItem>
113
+
<CListGroupItem as="button">Morbi leo risus</CListGroupItem>
114
+
<CListGroupItem as="button">Porta ac consectetur ac</CListGroupItem>
115
+
<CListGroupItem as="button" disabled>Vestibulum at eros</CListGroupItem>
116
116
</CListGroup>
117
117
```
118
118
@@ -183,14 +183,14 @@ Contextual classes also work with `<a>`s or `<button>`s. Note the addition of th
183
183
184
184
::: demo
185
185
<CListGroup>
186
-
<CListGroupItemcomponent="a"href="#">Dapibus ac facilisis in</CListGroupItem>
187
-
<CListGroupItemv-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']"component="a"href="#":color="item">A simple {{item}} list group item</CListGroupItem>
186
+
<CListGroupItemas="a"href="#">Dapibus ac facilisis in</CListGroupItem>
187
+
<CListGroupItemv-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']"as="a"href="#":color="item">A simple {{item}} list group item</CListGroupItem>
188
188
</CListGroup>
189
189
:::
190
190
```vue
191
191
<CListGroup>
192
-
<CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
193
-
<CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" component="a" href="#" :color="item">A simple {{item}} list group item</CListGroupItem>
192
+
<CListGroupItem as="a" href="#">Dapibus ac facilisis in</CListGroupItem>
193
+
<CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" as="a" href="#" :color="item">A simple {{item}} list group item</CListGroupItem>
194
194
</CListGroup>
195
195
```
196
196
@@ -223,23 +223,23 @@ Add nearly any HTML within, even for linked list groups like the one below, with
Copy file name to clipboardExpand all lines: packages/docs/components/navs-tabs.md
+4-4Lines changed: 4 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -56,7 +56,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
56
56
57
57
::: demo
58
58
59
-
<CNavcomponent="nav">
59
+
<CNavas="nav">
60
60
<CNavLink href="#" active>
61
61
Active
62
62
</CNavLink>
@@ -70,7 +70,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
70
70
:::
71
71
```vue
72
72
73
-
<CNav component="nav">
73
+
<CNav as="nav">
74
74
<CNavLink href="#" active>
75
75
Active
76
76
</CNavLink>
@@ -495,7 +495,7 @@ For equal-width elements, use `layout="justified"`. All horizontal space will be
495
495
If you need responsive nav variations, consider using a series of [flexbox utilities](https://coreui.io/docs/utilities/flex). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
0 commit comments