sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-27 00:06:00 +02:00
parent c7f687982d
commit e086d28946
19 changed files with 3459 additions and 1800 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Dashboard.vue
+1 -1
View File
@@ -453,7 +453,7 @@ export default {
activity: "1 hour ago", activity: "1 hour ago",
}, },
{ {
avatar: { src: avatar4, status: "" }, avatar: { src: avatar4, status: "secondary" },
user: { name: "Enéas Kwadwo", new: true, registered: "Jan 1, 2021" }, user: { name: "Enéas Kwadwo", new: true, registered: "Jan 1, 2021" },
country: { name: "France", flag: "cif-fr" }, country: { name: "France", flag: "cif-fr" },
usage: { usage: {
src/views/base/ListGroups.vue
+352 -163
View File
@@ -1,169 +1,358 @@
<template> <template>
<CRow> <CRow>
<CCol> <CCol :xs="12">
<CCard> <DocsCallout name="List Group" href="components/list-group" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue List Groups</strong> <strong>Vue List Group</strong> <small>Basic example</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small">
<CRow> The default list group is an unordered list with items and the
<CCol md="6"> proper CSS classes. Build upon it with the options that follow, or
<h4>Basic example</h4> with your CSS as required.
<Example href="components/list-group.html#basic-example"> </p>
<CListGroup> <Example href="components/list-group">
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
</CListGroup> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</Example> </CListGroup>
</CCol> </Example>
<CCol md="6"> </CCardBody>
<h4 class="mt-4">Active items</h4> </CCard>
<Example href="components/list-group.html#active-items"> </CCol>
<CListGroup> <CCol :xs="12">
<CListGroupItem active>Cras justo odio</CListGroupItem> <CCard class="mb-4">
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CCardHeader>
<CListGroupItem>Morbi leo risus</CListGroupItem> <strong>Vue List Group</strong> <small>Active items</small>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> </CCardHeader>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CCardBody>
</CListGroup> <p class="text-medium-emphasis small">
</Example> Add <code>active</code> boolean property to a
</CCol> <code>&lt;CListGroupItem&gt;</code> to show the current active
<CCol md="6"> selection.
<h4 class="mt-4">Disabled items</h4> </p>
<Example href="components/list-group.html#disabled-items"> <Example href="components/list-group/#active-items">
<CListGroup> <CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem> <CListGroupItem active>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem> <CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
</Example> </Example>
</CCol> </CCardBody>
<CCol md="6"> </CCard>
<h4 class="mt-4">Links</h4> </CCol>
<Example href="components/list-group.html#links-and-buttons"> <CCol :xs="12">
<CListGroup> <CCard class="mb-4">
<CListGroupItem component="a" href="#" active>Cras justo odio</CListGroupItem> <CCardHeader>
<CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem> <strong>Vue List Group</strong> <small>Disabled items</small>
<CListGroupItem component="a" href="#">Morbi leo risus</CListGroupItem> </CCardHeader>
<CListGroupItem component="a" href="#">Porta ac consectetur ac</CListGroupItem> <CCardBody>
<CListGroupItem component="a" href="#" disabled>Vestibulum at eros</CListGroupItem> <p class="text-medium-emphasis small">
</CListGroup> Add <code>disabled</code> boolean property to a
</Example> <code>&lt;CListGroupItem&gt;</code> to make it appear disabled.
</CCol> </p>
<CCol md="6"> <Example href="components/list-group/#disabled-items">
<h4 class="mt-4">Buttons</h4> <CListGroup>
<Example href="components/list-group.html#links-and-buttons"> <CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroup> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem component="button" active>Cras justo odio</CListGroupItem> <CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem component="button">Morbi leo risus</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
<CListGroupItem component="button">Porta ac consectetur ac</CListGroupItem> </CListGroup>
<CListGroupItem component="button" disabled>Vestibulum at eros</CListGroupItem> </Example>
</CListGroup> </CCardBody>
</Example> </CCard>
</CCol> </CCol>
<CCol md="6"> <CCol :xs="12">
<h4 class="mt-4">Flush</h4> <CCard class="mb-4">
<Example href="components/list-group.html#flush"> <CCardHeader>
<CListGroup flush> <strong>Vue List Group</strong> <small>Links and buttons</small>
<CListGroupItem>Cras justo odio</CListGroupItem> </CCardHeader>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CCardBody>
<CListGroupItem>Morbi leo risus</CListGroupItem> <p class="text-medium-emphasis small">
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to
<CListGroupItem>Vestibulum at eros</CListGroupItem> create <em>actionable</em> list group items with hover, disabled,
</CListGroup> and active states by adding
</Example> <code>component=&#34;a|button&#34;</code>. We separate these
</CCol> pseudo-classes to ensure list groups made of non-interactive
<CCol md="6"> elements (like <code>&lt;li&gt;</code>s or
<h4 class="mt-4">Horizonstal</h4> <code>&lt;div&gt;</code>
<Example href="components/list-group.html#horizontal"> s) don&#39;tprovide a click or tap affordance.
<template v-for="(item) in ['', '-sm', '-md', '-lg', '-xl', '-xxl']"> </p>
<CListGroup class="mb-2" :layout="'horizontal' + item"> <Example href="components/list-group/#links-and-buttons">
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem component="a" href="#" active>
<CListGroupItem>Morbi leo risus</CListGroupItem> Cras justo odio
</CListGroup> </CListGroupItem>
</template> <CListGroupItem component="a" href="#">
</Example> Dapibus ac facilisis in
</CCol> </CListGroupItem>
<CCol md="6"> <CListGroupItem component="a" href="#">
<h4 class="mt-4">Contextual classes</h4> Morbi leo risus
<Example href="components/list-group.html#contextual-classes"> </CListGroupItem>
<CListGroup> <CListGroupItem component="a" href="#">
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> Porta ac consectetur ac
<CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" :color="item">A simple {{item}} list group item</CListGroupItem> </CListGroupItem>
</CListGroup> <CListGroupItem component="a" href="#" disabled>
</Example> Vestibulum at eros
</CCol> </CListGroupItem>
<CCol md="6"> </CListGroup>
<h4 class="mt-4">Change component to link</h4> </Example>
<Example href="components/list-group.html#contextual-classes"> </CCardBody>
<CListGroup> </CCard>
<CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem> </CCol>
<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> <CCol :xs="12">
</CListGroup> <CCard class="mb-4">
</Example> <CCardHeader>
</CCol> <strong>Vue List Group</strong> <small>Flush</small>
<CCol md="6"> </CCardHeader>
<h4 class="mt-4">Vue list groups with badge</h4> <CCardBody>
<Example href="components/list-group.html#with-badges"> <p class="text-medium-emphasis small">
<CListGroup> Add <code>flush</code> boolean property to remove some borders and
<CListGroupItem class="d-flex justify-content-between align-items-center">Cras justo odio<CBadge color="primary" shape="rounded-pill">14</CBadge></CListGroupItem> rounded corners to render list group items edge-to-edge in a parent
<CListGroupItem class="d-flex justify-content-between align-items-center">Dapibus ac facilisis in<CBadge color="primary" shape="rounded-pill">2</CBadge></CListGroupItem> container (e.g., cards).
<CListGroupItem class="d-flex justify-content-between align-items-center">Morbi leo risus<CBadge color="primary" shape="rounded-pill">1</CBadge></CListGroupItem> </p>
</CListGroup> <Example href="components/list-group/#flush">
</Example> <CListGroup flush>
</CCol> <CListGroupItem>Cras justo odio</CListGroupItem>
<CCol md="6"> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<h4 class="mt-4">Custom content</h4> <CListGroupItem>Morbi leo risus</CListGroupItem>
<Example href="components/list-group.html#custom-content"> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroup> <CListGroupItem>Vestibulum at eros</CListGroupItem>
<CListGroupItem component="a" href="#" active> </CListGroup>
<div class="d-flex w-100 justify-content-between"> </Example>
<h5 class="mb-1">List group item heading</h5> </CCardBody>
<small>3 days ago</small> </CCard>
</div> </CCol>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <CCol :xs="12">
<small>Donec id elit non mi porta.</small> <CCard class="mb-4">
</CListGroupItem> <CCardHeader>
<CListGroupItem component="a" href="#"> <strong>Vue List Group</strong> <small>Horizontal</small>
<div class="d-flex w-100 justify-content-between"> </CCardHeader>
<h5 class="mb-1">List group item heading</h5> <CCardBody>
<small class="text-muted">3 days ago</small> <p class="text-medium-emphasis small">
</div> Add <code>layout=&#34;horizontal&#34;</code> to change the layout of
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> list group items from vertical to horizontal across all breakpoints.
<small class="text-muted">Donec id elit non mi porta.</small> Alternatively, choose a responsive variant
</CListGroupItem> <code
<CListGroupItem component="a" href="#"> >.layout=&#34;horizontal-&#123;sm | md | lg | xl |
<div class="d-flex w-100 justify-content-between"> xxl&#125;&#34;</code
<h5 class="mb-1">List group item heading</h5> >
<small class="text-muted">3 days ago</small> to make a list group horizontal starting at that breakpoint&#39;s
</div> <code>min-width</code>. Currently
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <strong
<small class="text-muted">Donec id elit non mi porta.</small> >horizontal list groups cannot be combined with flush list
</CListGroupItem> groups.</strong
</CListGroup> >
</Example> </p>
</CCol> <Example href="components/list-group/#flush">
<CCol md="6"> <template
<h4 class="mt-4">Checkboxes and radios</h4> v-for="item in ['', '-sm', '-md', '-lg', '-xl', '-xxl']"
<Example href="components/list-group.html#checkboxes-and-radios"> :key="item"
<CListGroup> >
<CListGroupItem><CFormCheck label="Cras justo odio"/></CListGroupItem> <CListGroup class="mb-2" :layout="'horizontal' + item">
<CListGroupItem><CFormCheck label="Dapibus ac facilisis in" defaultChecked/></CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem><CFormCheck label="Morbi leo risus" defaultChecked/></CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem><CFormCheck label="orta ac consectetur ac"/></CListGroupItem> <CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem><CFormCheck label="Vestibulum at eros"/></CListGroupItem> </CListGroup>
</CListGroup> </template>
</Example> </Example>
</CCol> </CCardBody>
</CRow> </CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue List Group</strong> <small>Contextual classes</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Use contextual classes to style list items with a stateful
background and color.
</p>
<Example href="components/list-group/#contextual-classes">
<CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem
v-for="item in [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
]"
:color="item"
:key="item"
>A simple {{ item }} list group item</CListGroupItem
>
</CListGroup>
</Example>
<p class="text-medium-emphasis small">
Contextual classes also work with <code>&lt;a&gt;</code>s or
<code>&lt;button&gt;</code>s. Note the addition of the hover styles
here not present in the previous example. Also supported is the
<code>active</code> state; apply it to indicate an active selection
on a contextual list group item.
</p>
<Example href="components/list-group/#contextual-classes">
<CListGroup>
<CListGroupItem component="a" href="#"
>Dapibus ac facilisis in</CListGroupItem
>
<CListGroupItem
v-for="item in [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
]"
component="a"
href="#"
:color="item"
:key="item"
>A simple {{ item }} list group item</CListGroupItem
>
</CListGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue List Group</strong> <small>With badges</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add badges to any list group item to show unread counts, activity,
and more.
</p>
<Example href="components/list-group/#with-badges">
<CListGroup>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Cras justo odio
<CBadge color="primary" shape="rounded-pill"> 14 </CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Dapibus ac facilisis in
<CBadge color="primary" shape="rounded-pill"> 2 </CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Morbi leo risus
<CBadge color="primary" shape="rounded-pill"> 1 </CBadge>
</CListGroupItem>
</CListGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue List Group</strong> <small>Custom content</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add nearly any HTML within, even for linked list groups like the one
below, with the help of
<a href="https://coreui.io/docs/utilities/flex/"
>flexbox utilities</a
>.
</p>
<Example href="components/list-group/#custom-content">
<CListGroup>
<CListGroupItem component="a" href="#" active>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem component="a" href="#">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-medium-emphasis">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small class="text-medium-emphasis"
>Donec id elit non mi porta.</small
>
</CListGroupItem>
<CListGroupItem component="a" href="#">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-medium-emphasis">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small class="text-medium-emphasis"
>Donec id elit non mi porta.</small
>
</CListGroupItem>
</CListGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue List Group</strong> <small>Checkboxes and radios</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Place CoreUI&#39;s checkboxes and radios within list group items and
customize as needed.
</p>
<Example href="components/list-group/#checkboxes-and-radios">
<CListGroup>
<CListGroupItem>
<CFormCheck label="Cras justo odio" />
</CListGroupItem>
<CListGroupItem>
<CFormCheck label="Dapibus ac facilisis in" defaultChecked />
</CListGroupItem>
<CListGroupItem>
<CFormCheck label="Morbi leo risus" defaultChecked />
</CListGroupItem>
<CListGroupItem>
<CFormCheck label="orta ac consectetur ac" />
</CListGroupItem>
<CListGroupItem>
<CFormCheck label="Vestibulum at eros" />
</CListGroupItem>
</CListGroup>
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -172,6 +361,6 @@
<script> <script>
export default { export default {
name: "ListGroups", name: 'ListGroups',
}; }
</script> </script>
src/views/base/Navs.vue
+367 -232
View File
@@ -1,246 +1,381 @@
<template> <template>
<CRow> <CRow>
<CCol> <CCol :xs="12">
<CCard> <DocsCallout name="Nav" href="components/nav" />
<CCardHeader> </CCol>
<strong>Vue Nav</strong> <CCol :xs="12">
</CCardHeader> <CCard class="mb-4">
<CCardBody> <CCardHeader>
<h4 class="mt-4">Base Nav</h4> <strong>Vue Navs</strong> <small>Base navs</small>
<Example href="components/nav.html#base-nav"> </CCardHeader>
<CNav> <CCardBody>
<CNavItem> <p class="text-medium-emphasis small">
<CNavLink href="#" active> The base <code>.nav</code> component is built with flexbox and provide a strong
Active foundation for building all types of navigation components. It includes some style
</CNavLink> overrides (for working with lists), some link padding for larger hit areas, and basic
</CNavItem> disabled styling.
<CNavItem> </p>
<CNavLink href="#">Link</CNavLink> <Example href="components/nav#base-nav">
</CNavItem> <CNav>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#" active>
</CNavItem> Active
<CNavItem> </CNavLink>
<CNavLink href="#" disabled> </CNavItem>
Disabled <CNavItem>
</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
</CNav> <CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example> </Example>
<p class="text-medium-emphasis small">
<h4 class="mt-4">Nav horizontal alignment</h4> Classes are used throughout, so your markup can be super flexible. Use{' '}
<Example href="components/nav.html#horizontal-alignment"> <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
<CNav class="justify-content-center"> items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because
<CNavItem> the .nav uses display: flex, the nav links behave the same as nav items would, but
<CNavLink href="#" active> without the extra markup.
Active </p>
</CNavLink> <Example href="components/nav#base-nav">
</CNavItem> <CNav component="nav">
<CNavItem> <CNavLink href="#" active>
<CNavLink href="#">Link</CNavLink> Active
</CNavItem> </CNavLink>
<CNavItem> <CNavLink href="#">Link</CNavLink>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> <CNavLink href="#" disabled>
<CNavItem> Disabled
<CNavLink href="#" disabled> </CNavLink>
Disabled </CNav>
</CNavLink>
</CNavItem>
</CNav>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Nav right alignment</h4> </CCard>
<Example href="components/nav.html#horizontal-alignment"> </CCol>
<CNav class="justify-content-end"> <CCol :xs="12">
<CNavItem> <CCard class="mb-4">
<CNavLink href="#" active> <CCardHeader>
Active <strong>Vue Navs</strong> <small>Horizontal alignment</small>
</CNavLink> </CCardHeader>
</CNavItem> <CCardBody>
<CNavItem> <p class="text-medium-emphasis small">
<CNavLink href="#">Link</CNavLink> Change the horizontal alignment of your nav with{' '}
</CNavItem> <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
<CNavItem> flexbox utilities
<CNavLink href="#">Link</CNavLink> </a>
</CNavItem> . By default, navs are left-aligned, but you can easily change them to center or right
<CNavItem> aligned.
<CNavLink href="#" disabled> </p>
Disabled <p class="text-medium-emphasis small">
</CNavLink> Centered with <code>.justify-content-center</code>:
</CNavItem> </p>
</CNav> <Example href="components/nav#horizontal-alignment">
<CNav class="justify-content-center">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example> </Example>
<p class="text-medium-emphasis small">
<h4 class="mt-4">Vertical nav</h4> Right-aligned with <code>.justify-content-end</code>:
<Example href="components/nav.html#vertical"> </p>
<CNav class="flex-column"> <Example href="components/nav#base-nav">
<CNavItem> <CNav class="justify-content-end">
<CNavLink href="#" active> <CNavItem>
Active <CNavLink href="#" active>
</CNavLink> Active
</CNavItem> </CNavLink>
<CNavItem> </CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavItem>
</CNavItem> <CNavLink href="#">Link</CNavLink>
<CNavItem> </CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavItem>
</CNavItem> <CNavLink href="#">Link</CNavLink>
<CNavItem> </CNavItem>
<CNavLink href="#" disabled> <CNavItem>
Disabled <CNavLink href="#" disabled>
</CNavLink> Disabled
</CNavItem> </CNavLink>
</CNav> </CNavItem>
</CNav>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Tabs nav</h4> </CCard>
<Example href="components/nav.html#tabs"> </CCol>
<CNav variant="tabs"> <CCol :xs="12">
<CNavItem> <CCard class="mb-4">
<CNavLink href="#" active> <CCardHeader>
Active <strong>Vue Navs</strong> <small>Vertical</small>
</CNavLink> </CCardHeader>
</CNavItem> <CCardBody>
<CNavItem> <p class="text-medium-emphasis small">
<CNavLink href="#">Link</CNavLink> Stack your navigation by changing the flex item direction with the{' '}
</CNavItem> <code>.flex-column</code> utility. Need to stack them on some viewports but not
<CNavItem> others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
<CNavLink href="#">Link</CNavLink> </p>
</CNavItem> <Example href="components/nav#vertical">
<CNavItem> <CNav class="flex-column">
<CNavLink href="#" disabled> <CNavItem>
Disabled <CNavLink href="#" active>
</CNavLink> Active
</CNavItem> </CNavLink>
</CNav> </CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Pills nav</h4> </CCard>
<Example href="components/nav.html#pills"> </CCol>
<CNav variant="pills"> <CCol :xs="12">
<CNavItem> <CCard class="mb-4">
<CNavLink href="#" active> <CCardHeader>
Active <strong>Vue Navs</strong> <small>Tabs</small>
</CNavLink> </CCardHeader>
</CNavItem> <CCardBody>
<CNavItem> <p class="text-medium-emphasis small">
<CNavLink href="#">Link</CNavLink> Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
</CNavItem> to generate a tabbed interface
<CNavItem> </p>
<CNavLink href="#">Link</CNavLink> <Example href="components/nav#tabs">
</CNavItem> <CNav variant="tabs">
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" active>
Disabled Active
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CNav> <CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Fill nav</h4> </CCard>
<Example href="components/nav.html#fill-and-justify"> </CCol>
<CNav variant="pills" layout="fill"> <CCol :xs="12">
<CNavItem> <CCard class="mb-4">
<CNavLink href="#" active> <CCardHeader>
Active <strong>Vue Navs</strong> <small>Pills</small>
</CNavLink> </CCardHeader>
</CNavItem> <CCardBody>
<CNavItem> <p class="text-medium-emphasis small">
<CNavLink href="#">Link</CNavLink> Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
</CNavItem> </p>
<CNavItem> <Example href="components/nav#pills">
<CNavLink href="#">Link</CNavLink> <CNav variant="pills">
</CNavItem> <CNavItem>
<CNavItem> <CNavLink href="#" active>
<CNavLink href="#" disabled> Active
Disabled </CNavLink>
</CNavLink> </CNavItem>
</CNavItem> <CNavItem>
</CNav> <CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Justified nav</h4> </CCard>
<Example href="components/nav.html#fill-and-justify"> </CCol>
<CNav variant="pills" layout="justified"> <CCol :xs="12">
<CNavItem> <CCard class="mb-4">
<CNavLink href="#" active> <CCardHeader>
Active <strong>Vue Navs</strong> <small>Fill and justify</small>
</CNavLink> </CCardHeader>
</CNavItem> <CCardBody>
<CNavItem> <p class="text-medium-emphasis small">
<CNavLink href="#">Link</CNavLink> Force your <code>.nav</code>&#39;s contents to extend the full available width one of
</CNavItem> two modifier classes. To proportionately fill all available space with your{' '}
<CNavItem> <code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
<CNavLink href="#">Link</CNavLink> horizontal space is occupied, but not every nav item has the same width.
</CNavItem> </p>
<CNavItem> <Example href="components/nav#fill-and-justify">
<CNavLink href="#" disabled> <CNav variant="pills" layout="fill">
Disabled <CNavItem>
</CNavLink> <CNavLink href="#" active>
</CNavItem> Active
</CNav> </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example> </Example>
<p class="text-medium-emphasis small">
<h4 class="mt-4">Vue nav with dropdown</h4> For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
<Example href="components/nav.html#using-dropdowns"> space will be occupied by nav links, but unlike the .nav-fill above, every nav item
<CNav> will be the same width.
<CNavItem> </p>
<CNavLink href="#" active> <Example href="components/nav#fill-and-justify">
Active <CNav variant="pills" layout="justified">
</CNavLink> <CNavItem>
</CNavItem> <CNavLink href="#" active>
<CDropdown variant="nav-item"> Active
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> </CNavLink>
<CDropdownMenu> </CNavItem>
<CDropdownItem href="#">Action</CDropdownItem> <CNavItem>
<CDropdownItem href="#">Another action</CDropdownItem> <CNavLink href="#">Link</CNavLink>
<CDropdownItem href="#">Something else here</CDropdownItem> </CNavItem>
</CDropdownMenu> <CNavItem>
</CDropdown> <CNavLink href="#">Link</CNavLink>
<CNavItem> </CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavItem>
</CNavItem> <CNavLink href="#" disabled>
<CNavItem> Disabled
<CNavLink href="#" disabled> </CNavLink>
Disabled </CNavItem>
</CNavLink> </CNav>
</CNavItem>
</CNav>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Vue pills nav with dropdown</h4> </CCard>
<Example href="components/nav.html#pills-with-dropdowns"> </CCol>
<CNav variant="pills"> <CCol :xs="12">
<CNavItem> <CCard class="mb-4">
<CNavLink href="#" active> <CCardHeader>
Active <strong>Vue Navs</strong> <small>Working with flex utilities</small>
</CNavLink> </CCardHeader>
</CNavItem> <CCardBody>
<CDropdown variant="nav-item"> <p class="text-medium-emphasis small">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> If you need responsive nav variations, consider using a series of{' '}
<CDropdownMenu> <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
<CDropdownItem href="#">Action</CDropdownItem> verbose, these utilities offer greater customization across responsive breakpoints. In
<CDropdownItem href="#">Another action</CDropdownItem> the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
<CDropdownItem href="#">Something else here</CDropdownItem> horizontal layout that fills the available width starting from the small breakpoint.
</CDropdownMenu> </p>
</CDropdown> <Example href="components/nav#working-with-flex-utilities">
<CNavItem> <CNav component="nav" variant="pills" class="flex-column flex-sm-row">
<CNavLink href="#">Link</CNavLink> <CNavLink href="#" active>
</CNavItem> Active
<CNavItem> </CNavLink>
<CNavLink href="#" disabled> <CNavLink href="#">Link</CNavLink>
Disabled <CNavLink href="#">Link</CNavLink>
</CNavLink> <CNavLink href="#" disabled>
</CNavItem> Disabled
</CNav> </CNavLink>
</CNav>
</Example> </Example>
</CCardBody>
</CCard>
</CCardBody> </CCol>
</CCard> <CCol :xs="12">
</CCol> <CCard class="mb-4">
</CRow> <CCardHeader>
<strong>Vue Navs</strong> <small>Tabs with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="components/nav#tabs-with-dropdowns">
<CNav>
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CDropdown variant="nav-item">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Pills with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="components/nav#pills-with-dropdowns">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CDropdown variant="nav-item">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template> </template>
<script> <script>
src/views/base/Popovers.vue
+70 -22
View File
@@ -1,28 +1,76 @@
<template> <template>
<CRow> <CRow>
<CCol> <CCol :xs="12">
<CCard> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Popovers</strong> <strong>Vue Popovers</strong> <small>Basic example</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h4 class="mt-4">Vue popover example</h4> <Example href="directives/popover.html#example">
<Example href="directives/popover.html#example"> <CButton
<CButton color="danger"
color="danger" size="lg"
size="lg" v-c-popover="{
v-c-popover="{header: 'Popover title', content: 'And here\’s some amazing content. It’s very engaging. Right?', placement: 'right'}" header: 'Popover title',
> content:
Click to toggle popover 'And here\’s some amazing content. It’s very engaging. Right?',
</CButton> placement: 'right',
</Example> }"
<h4 class="mt-4">Vue popovers four directions</h4> >
<Example href="directives/popover.html#four-directions"> Click to toggle popover
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Popover on top</CButton> </CButton>
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Popover on right</CButton> </Example>
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Popover on bottom</CButton> </CCardBody>
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Popover on left</CButton> </CCard>
</Example> </CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Popover</strong> <small>Four directions</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Four options are available: top, right, bottom, and left aligned.
Directions are mirrored when using CoreUI for Vue in RTL.
</p>
<Example href="directives/popover.html#four-directions">
<CButton
color="secondary"
v-c-popover="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'top',
}"
>Popover on top</CButton
>
<CButton
color="secondary"
v-c-popover="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'right',
}"
>Popover on right</CButton
>
<CButton
color="secondary"
v-c-popover="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'bottom',
}"
>Popover on bottom</CButton
>
<CButton
color="secondary"
v-c-popover="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'left',
}"
>Popover on left</CButton
>
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -31,6 +79,6 @@
<script> <script>
export default { export default {
name: "Popovers", name: 'Popovers',
}; }
</script> </script>
src/views/base/Spinners.vue
+133
View File
@@ -0,0 +1,133 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Spinner" href="components/spinner" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Spinner</strong> <small>Border</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Use the border spinners for a lightweight loading indicator.
</p>
<Example href="components/spinner">
<CSpinner />
</Example>
<p class="text-medium-emphasis small">
The border spinner uses <code>currentColor</code> for its
<code>border-color</code>. You can use any of our text color
utilities on the standard spinner.
</p>
<Example href="components/spinner#colors">
<CSpinner color="primary" />
<CSpinner color="secondary" />
<CSpinner color="success" />
<CSpinner color="danger" />
<CSpinner color="warning" />
<CSpinner color="info" />
<CSpinner color="light" />
<CSpinner color="dark" />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Spinner</strong> <small>Growing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If you don&#39;tfancy a border spinner, switch to the grow spinner.
While it doesn&#39;t technically spin, it does repeatedly grow!
</p>
<Example href="components/spinner#growing-spinner">
<CSpinner variant="grow" />
</Example>
<p class="text-medium-emphasis small">
Once again, this spinner is built with <code>currentColor</code>, so
you can easily change its appearance. Here it is in blue, along with
the supported variants.
</p>
<Example href="components/spinner#growing-spinner">
<CSpinner color="primary" variant="grow" />
<CSpinner color="secondary" variant="grow" />
<CSpinner color="success" variant="grow" />
<CSpinner color="danger" variant="grow" />
<CSpinner color="warning" variant="grow" />
<CSpinner color="info" variant="grow" />
<CSpinner color="light" variant="grow" />
<CSpinner color="dark" variant="grow" />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Spinner</strong> <small>Size</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>size=&#34;sm&#34;</code> property to make a smaller
spinner that can quickly be used within other components.
</p>
<Example href="components/spinner#size">
<CSpinner size="sm" />
<CSpinner size="sm" variant="grow" />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Spinner</strong> <small>Buttons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Use spinners within buttons to indicate an action is currently
processing or taking place. You may also swap the text out of the
spinner element and utilize button text as needed.
</p>
<Example href="components/spinner#buttons">
<CButton disabled>
<CSpinner component="span" size="sm" aria-hidden="true" />
</CButton>
<CButton disabled>
<CSpinner component="span" size="sm" aria-hidden="true" />
Loading...
</CButton>
</Example>
<Example href="components/spinner#buttons">
<CButton disabled>
<CSpinner
component="span"
size="sm"
variant="grow"
aria-hidden="true"
/>
</CButton>
<CButton disabled>
<CSpinner
component="span"
size="sm"
variant="grow"
aria-hidden="true"
/>
Loading...
</CButton>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Spinners',
}
</script>
src/views/base/Tooltips.vue
+65 -31
View File
@@ -1,38 +1,72 @@
<template> <template>
<CRow> <CRow>
<CCol> <CCol :xs="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<strong>Vue Tooltips</strong> <strong>Vue Tooltips</strong> <small>Basic example</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h4 class="mt-4">Tooltips example</h4> <p class="text-medium-emphasis small">
<Example href="directives/tooltip.html"> Hover over the links below to see tooltips:
<p class="text-medium-emphasis"> </p>
Tight pants next level keffiyeh <Example href="directives/tooltip.html">
<CLink v-c-tooltip="'Tooltip text'"> you probably </CLink> <p class="text-medium-emphasis">
haven't heard of them. Tight pants next level keffiyeh
Photo booth beard raw denim letterpress vegan messenger <CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
bag stumptown. Farm-to-table seitan, mcsweeney's fixie haven't heard of them. Photo booth beard raw denim letterpress
sustainable quinoa 8-bit american apparel vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's
<CLink v-c-tooltip="'Tooltip text'"> have a </CLink> fixie sustainable quinoa 8-bit american apparel
terry richardson vinyl chambray. Beard stumptown, <CLink v-c-tooltip="'Tooltip text'"> have a </CLink>
cardigans banh mi lomo thundercats. Tofu biodiesel terry richardson vinyl chambray. Beard stumptown, cardigans banh
williamsburg marfa, four loko mcsweeney''s cleanse mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko
vegan chambray. A really ironic artisan mcsweeney''s cleanse vegan chambray. A really ironic artisan
<CLink v-c-tooltip="'Tooltip text'"> whatever keytar </CLink> <CLink v-c-tooltip="'Tooltip text'"> whatever keytar </CLink>
scenester farm-to-table banksy Austin scenester farm-to-table banksy Austin
<CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink> <CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink>
freegan cred raw denim single-origin coffee viral. freegan cred raw denim single-origin coffee viral.
</p> </p>
</Example> </Example>
<h4 class="mt-4">Tooltips placements</h4> <p class="text-medium-emphasis small">
<Example href="directives/tooltip.html"> Hover over the links below to see tooltips:
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Tooltip on top</CButton> </p>
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Tooltip on right</CButton> <Example href="directives/tooltip.html">
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Tooltip on bottom</CButton> <CButton
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Tooltip on left</CButton> color="secondary"
</Example> v-c-tooltip="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'top',
}"
>Tooltip on top</CButton
>
<CButton
color="secondary"
v-c-tooltip="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'right',
}"
>Tooltip on right</CButton
>
<CButton
color="secondary"
v-c-tooltip="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'bottom',
}"
>Tooltip on bottom</CButton
>
<CButton
color="secondary"
v-c-tooltip="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'left',
}"
>Tooltip on left</CButton
>
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -41,6 +75,6 @@
<script> <script>
export default { export default {
name: "Tooltips", name: 'Tooltips',
}; }
</script> </script>
src/views/buttons/BrandButtons.vue
-81
View File
@@ -1,81 +0,0 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Brand Buttons</strong>
</CCardHeader>
<CCardBody>
TODO: check did I should remove brand-buttons
<Example href="breadcrumbs">
<template v-for="(brandName, key) in brands" :key="key">
<CButton
:name="brandName"
:color="brandName"
class="btn-brand"
>
<CIcon :name="'cib-' + brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
<template v-for="(brandName, key) in brands" :key="key">
<CButton
:name="brandName"
size="sm"
:color="brandName"
class="btn-brand"
>
<CIcon size="sm" :name="'cib-' + brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
<template v-for="(brandName, key) in brands" :key="key">
<CButton
:name="brandName"
size="lg"
:color="brandName"
class="btn-brand"
>
<CIcon size="lg" :name="'cib-' + brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "BrandButtons",
data: function(){
return {
brands: [
'facebook',
'twitter',
'linkedin',
'flickr',
'tumblr',
'xing',
'github',
'stackoverflow',
'youtube',
'dribbble',
'instagram',
'pinterest',
'vk',
'yahoo',
'behance',
'reddit',
'vimeo'
]
}
}
};
</script>
src/views/buttons/ButtonDropdowns.vue
-305
View File
@@ -1,305 +0,0 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Button Dropdowns</strong>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Single button</h4>
<CRow>
<CCol md="6">
<Example href="components/dropdown.html#single-button">
<CDropdown color="secondary">
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</CCol>
<CCol md="6">
<Example href="components/dropdown.html#single-button">
<CDropdown color="secondary" togglerText="Dropdown button">
<CDropdownToggle component="a" color="primary">Dropdown Button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</CCol>
</CRow>
<Example href="components/dropdown.html#single-button">
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
<CDropdown :color="item" :togglerText="item" variant="btn-group">
<CDropdownToggle :color="item">{{item}}</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
</Example>
<h4 class="mt-4">Split button</h4>
<Example href="components/dropdown.html#split-button">
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
<CDropdown :color="item" :togglerText="item" variant="btn-group">
<CButton :color="item">{{ item }}</CButton>
<CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
</Example>
<h4 class="mt-4">Sizing</h4>
<Example href="components/dropdown.html#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="lg">Large button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CButton color="secondary" size="lg">Large split button</CButton>
<CDropdownToggle color="secondary" size="lg" split>Large button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="sm">Small button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CButton color="secondary" size="sm">Small split button</CButton>
<CDropdownToggle color="secondary" size="sm" split>Small button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<h4 class="mt-4">Dark dropdowns</h4>
<Example href="components/dropdown.html#dark-dropdowns">
<CDropdown color="secondary" dark>
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<p>In navbar:</p>
<Example href="components/dropdown.html#dark-dropdowns">
<CNavbar expand="lg" colorScheme="dark" class="bg-dark">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarNav>
<CDropdown dark variant="nav-item">
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CNavbarNav>
</CContainer>
</CNavbar>
</Example>
<h4 class="mt-4">Directions</h4>
<Example href="components/dropdown.html#directions">
<CDropdown color="secondary" direction="dropup">
<CDropdownToggle color="secondary">Dropup</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown color="secondary" direction="dropup">
<CButton color="secondary">Split dropup</CButton>
<CDropdownToggle color="secondary" split/>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<Example href="components/dropdown.html#directions">
<CDropdown color="secondary" direction="dropend">
<CDropdownToggle color="secondary">Dropend</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown color="secondary" direction="dropend">
<CButton color="secondary">Split dropend</CButton>
<CDropdownToggle color="secondary" split/>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<Example href="components/dropdown.html#directions">
<CDropdown color="secondary" direction="dropstart">
<CDropdownToggle color="secondary">Dropstart</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CButtonGroup>
<CDropdown color="secondary" direction="dropstart">
<CDropdownToggle color="secondary" split/>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CButton color="secondary">Split dropstart</CButton>
</CButtonGroup>
</Example>
<h4 class="mt-4">Responsive alignment</h4>
<Example href="components/dropdown.html#responsive-alignment">
<CDropdown color="secondary" :alignment="{ 'lg': 'end' }">
<CDropdownToggle color="secondary">Left-aligned but right aligned when large screen</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<Example href="components/dropdown.html#responsive-alignment">
<CDropdown color="secondary" :alignment="{ 'xs': 'end', 'lg': 'start' }">
<CDropdownToggle color="secondary">Right-aligned but left aligned when large screen</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<h4 class="mt-4">Dropdown menu content examples</h4>
<Example href="components/dropdown.html#menu-content">
<div class="border rounded py-2">
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
</div>
</Example>
<Example href="components/dropdown.html#menu-content">
<div class="border rounded py-2">
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</div>
</Example>
<Example href="components/dropdown.html#menu-content">
<div class="border rounded p-4 text-muted" style="max-width: 200px">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
</Example>
<Example href="components/dropdown.html#menu-content">
<div class="border rounded py-2">
<CForm class="px-4 py-4">
<div class="mb-3">
<CFormLabel for="exampleDropdownFormEmail1">Email address</CFormLabel>
<CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com"/>
</div>
<div class="mb-3">
<CFormLabel for="exampleDropdownFormPassword1">Password</CFormLabel>
<CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password"/>
</div>
<div class="mb-3">
<CFormCheck id="dropdownCheck" label="Remember me"/>
</div>
<CButton type="submit">Sign in</CButton>
</CForm>
<CDropdownDivider/>
<CDropdownItem href="#">New around here? Sign up</CDropdownItem>
<CDropdownItem href="#">Forgot password?</CDropdownItem>
</div>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "ButtonDropdowns",
};
</script>
src/views/buttons/ButtonGroups.vue
+381 -218
View File
@@ -1,224 +1,387 @@
<template> <template>
<CRow> <CRow>
<CCol> <CCol :xs="12">
<CCard> <DocsCallout name="Button Group" href="components/button-group" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Button Groups</strong> <strong>Vue Button Group</strong> <span>Basic example</span>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h4 class="mt-4">Basic example</h4> <p>
<CRow> Wrap a series of <code>&lt;CButton&gt;</code> components in
<CCol md="6"> <code>&lt;CButtonGroup&gt;</code>.
<Example href="components/button-group.html#basic-example"> </p>
<CButtonGroup role="group" aria-label="Basic example"> <Example href="components/button-group">
<CButton color="primary">Left</CButton> <CButtonGroup role="group" aria-label="Basic example">
<CButton color="primary">Middle</CButton> <CButton color="primary">Left</CButton>
<CButton color="primary">Right</CButton> <CButton color="primary">Middle</CButton>
</CButtonGroup> <CButton color="primary">Right</CButton>
</Example> </CButtonGroup>
</CCol> </Example>
<CCol md="6"> <p>
<Example href="components/button-group.html#basic-example"> These classes can also be added to groups of links, as an
<CButtonGroup> alternative to the
<CButton href="#" color="primary" active>Active link</CButton> <code>&lt;CNav&gt;</code> components.
<CButton href="#" color="primary">Link</CButton> </p>
<CButton href="#" color="primary">Link</CButton> <Example href="components/button-group">
</CButtonGroup> <CButtonGroup>
</Example> <CButton href="#" color="primary" active> Active link </CButton>
</CCol> <CButton href="#" color="primary"> Link </CButton>
</CRow> <CButton href="#" color="primary"> Link </CButton>
</CButtonGroup>
</Example>
<CRow> </CCardBody>
<CCol md="6"> </CCard>
<h4 class="mt-4">Mixed styles</h4> </CCol>
<Example href="components/button-group.html#mixed-styles"> <CCol :xs="12">
<CButtonGroup role="group" aria-label="Basic mixed styles example"> <CCard class="mb-4">
<CButton color="danger">Left</CButton> <CCardHeader>
<CButton color="warning">Middle</CButton> <strong>Vue Button Group</strong> <span>Mixed styles</span>
<CButton color="success">Right</CButton> </CCardHeader>
</CButtonGroup> <CCardBody>
</Example> <Example href="components/button-group#mixed-styles">
</CCol> <CButtonGroup role="group" aria-label="Basic mixed styles example">
<CCol md="6"> <CButton color="danger">Left</CButton>
<h4 class="mt-4">Outlined styles</h4> <CButton color="warning">Middle</CButton>
<Example href="components/button-group.html#outlined-styles"> <CButton color="success">Right</CButton>
<CButtonGroup role="group" aria-label="Basic outlined example"> </CButtonGroup>
<CButton color="primary" variant="outline">Left</CButton> </Example>
<CButton color="primary" variant="outline">Middle</CButton> </CCardBody>
<CButton color="primary" variant="outline">Right</CButton> </CCard>
</CButtonGroup> </CCol>
</Example> <CCol :xs="12">
</CCol> <CCard class="mb-4">
</CRow> <CCardHeader>
<strong>Vue Button Group</strong> <span>Outlined styles</span>
</CCardHeader>
<h4 class="mt-4">Checkbox and radio button groups</h4> <CCardBody>
<CRow> <Example href="components/button-group#outlined-styles">
<CCol md="6"> <CButtonGroup role="group" aria-label="Basic outlined example">
<Example href="components/button-group.html#checkbox-and-radio-button-groups"> <CButton color="primary" variant="outline"> Left </CButton>
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group"> <CButton color="primary" variant="outline"> Middle </CButton>
<CFormCheck button buttonVariant="outline" id="btncheck1" autoComplete="off" label="Checkbox 1"/> <CButton color="primary" variant="outline"> Right </CButton>
<CFormCheck button buttonVariant="outline" id="btncheck2" autoComplete="off" label="Checkbox 2"/> </CButtonGroup>
<CFormCheck button buttonVariant="outline" id="btncheck3" autoComplete="off" label="Checkbox 3"/> </Example>
</CButtonGroup> </CCardBody>
</Example> </CCard>
</CCol> </CCol>
<CCol md="6"> <CCol :xs="12">
<Example href="components/button-group.html#checkbox-and-radio-button-groups"> <CCard class="mb-4">
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group"> <CCardHeader>
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/> <strong>Vue Button Group</strong> <span>Checkbox and radio button groups</span>
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/> </CCardHeader>
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/> <CCardBody>
</CButtonGroup> <p>
</Example> Combine button-like checkbox and radio toggle buttons into a
</CCol> seamless looking button group.
</CRow> </p>
<Example
href="components/button-group#checkbox-and-radio-button-groups"
<h4 class="mt-4">Button toolbar</h4> >
<Example href="components/button-group.html#button-toolbar"> <CButtonGroup
<CButtonToolbar role="group" aria-label="Toolbar with button groups"> role="group"
<CButtonGroup class="me-2" role="group" aria-label="First group"> aria-label="Basic checkbox toggle button group"
<CButton color="primary">1</CButton> >
<CButton color="primary">2</CButton> <CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btncheck1"
<CButton color="primary">3</CButton> autoComplete="off" label="Checkbox 1" />
<CButton color="primary">4</CButton> <CFormCheck :button="{ color: 'primary', variant: 'outline' }"
</CButtonGroup> id="btncheck2" autoComplete="off" label="Checkbox 2" />
<CButtonGroup class="me-2" role="group" aria-label="Second group"> <CFormCheck :button="{ color: 'primary', variant: 'outline' }"
<CButton color="secondary">5</CButton> id="btncheck3" autoComplete="off" label="Checkbox 3" />
<CButton color="secondary">6</CButton> </CButtonGroup>
<CButton color="secondary">7</CButton> </Example>
</CButtonGroup> <Example
<CButtonGroup class="me-2" role="group" aria-label="Third group"> href="components/button-group#checkbox-and-radio-button-groups"
<CButton color="info">8</CButton> >
</CButtonGroup> <CButtonGroup
</CButtonToolbar> role="group"
</Example> aria-label="Basic checkbox toggle button group"
<Example href="components/button-group.html#button-toolbar"> >
<CButtonToolbar class="mb-3" role="group" aria-label="Toolbar with button groups"> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
<CButtonGroup class="me-2" role="group" aria-label="First group"> name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"
<CButton color="secondary" variant="outline">1</CButton> /> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
<CButton color="secondary" variant="outline">2</CButton> name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"
<CButton color="secondary" variant="outline">3</CButton> /> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
<CButton color="secondary" variant="outline">4</CButton> name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"
</CButtonGroup> />
<CInputGroup> </CButtonGroup>
<CInputGroupText>@</CInputGroupText> </Example>
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/> </CCardBody>
</CInputGroup> </CCard>
</CButtonToolbar> </CCol>
<CButtonToolbar class="justify-content-between" role="group" aria-label="Toolbar with button groups"> <CCol :xs="12">
<CButtonGroup class="me-2" role="group" aria-label="First group"> <CCard class="mb-4">
<CButton color="secondary" variant="outline">1</CButton> <CCardHeader>
<CButton color="secondary" variant="outline">2</CButton> <strong>Vue Button Group</strong> <span>Button toolbar</span>
<CButton color="secondary" variant="outline">3</CButton> </CCardHeader>
<CButton color="secondary" variant="outline">4</CButton> <CCardBody>
</CButtonGroup> <p>
<CInputGroup> Join sets of button groups into button toolbars for more complicated
<CInputGroupText>@</CInputGroupText> components. Use utility classes as needed to space out groups,
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/> buttons, and more.
</CInputGroup> </p>
</CButtonToolbar> <Example href="components/button-group#button-toolbar">
</Example> <CButtonToolbar
role="group"
<h4 class="mt-4">Sizing</h4> aria-label="Toolbar with button groups"
<Example href="components/button-group.html#sizing"> >
<CButtonGroup size="lg" role="group" aria-label="Large button group"> <CButtonGroup
<CButton color="dark" variant="outline">Left</CButton> class="me-2"
<CButton color="dark" variant="outline">Middle</CButton> role="group"
<CButton color="dark" variant="outline">Right</CButton> aria-label="First group"
</CButtonGroup> >
<br/> <CButton color="primary">1</CButton>
<CButtonGroup role="group" aria-label="Default button group"> <CButton color="primary">2</CButton>
<CButton color="dark" variant="outline">Left</CButton> <CButton color="primary">3</CButton>
<CButton color="dark" variant="outline">Middle</CButton> <CButton color="primary">4</CButton>
<CButton color="dark" variant="outline">Right</CButton> </CButtonGroup>
</CButtonGroup> <CButtonGroup
<br/> class="me-2"
<CButtonGroup size="sm" role="group" aria-label="Small button group"> role="group"
<CButton color="dark" variant="outline">Left</CButton> aria-label="Second group"
<CButton color="dark" variant="outline">Middle</CButton> >
<CButton color="dark" variant="outline">Right</CButton> <CButton color="secondary">5</CButton>
</CButtonGroup> <CButton color="secondary">6</CButton>
</Example> <CButton color="secondary">7</CButton>
</CButtonGroup>
<h4 class="mt-4">Vertical variation</h4> <CButtonGroup
<CRow> class="me-2"
<CCol md="4"> role="group"
<Example href="components/button-group.html#vertical-variation"> aria-label="Third group"
<CButtonGroup vertical role="group" aria-label="Vertical button group"> >
<CButton color="dark">Button</CButton> <CButton color="info">8</CButton>
<CButton color="dark">Button</CButton> </CButtonGroup>
<CButton color="dark">Button</CButton> </CButtonToolbar>
<CButton color="dark">Button</CButton> </Example>
<CButton color="dark">Button</CButton> <p>
<CButton color="dark">Button</CButton> Feel free to combine input groups with button groups in your
<CButton color="dark">Button</CButton> toolbars. Similar to the example above, you’ll likely need some
</CButtonGroup> utilities through to space items correctly.
</Example> </p>
</CCol> <Example href="components/button-group#button-toolbar">
<CCol md="4"> <CButtonToolbar
<Example href="components/button-group.html#vertical-variation"> class="mb-3"
<CButtonGroup vertical role="group" aria-label="Vertical button group"> role="group"
<CButton color="primary">Button</CButton> aria-label="Toolbar with button groups"
<CButton color="primary">Button</CButton> >
<CDropdown variant="btn-group"> <CButtonGroup
<CDropdownToggle color="primary">Dropdown</CDropdownToggle> class="me-2"
<CDropdownMenu> role="group"
<CDropdownItem href="#">Action</CDropdownItem> aria-label="First group"
<CDropdownItem href="#">Another action</CDropdownItem> >
<CDropdownItem href="#">Something else here</CDropdownItem> <CButton color="secondary" variant="outline"> 1 </CButton>
<CDropdownDivider/> <CButton color="secondary" variant="outline"> 2 </CButton>
<CDropdownItem href="#">Separated link</CDropdownItem> <CButton color="secondary" variant="outline"> 3 </CButton>
</CDropdownMenu> <CButton color="secondary" variant="outline"> 4 </CButton>
</CDropdown> </CButtonGroup>
<CButton color="primary">Button</CButton> <CInputGroup>
<CButton color="primary">Button</CButton> <CInputGroupText>@</CInputGroupText>
<CDropdown variant="btn-group"> <CFormInput
<CDropdownToggle color="primary">Dropdown</CDropdownToggle> placeholder="Input group example"
<CDropdownMenu> aria-label="Input group example"
<CDropdownItem href="#">Action</CDropdownItem> aria-describedby="btnGroupAddon"
<CDropdownItem href="#">Another action</CDropdownItem> />
<CDropdownItem href="#">Something else here</CDropdownItem> </CInputGroup>
<CDropdownDivider/> </CButtonToolbar>
<CDropdownItem href="#">Separated link</CDropdownItem> <CButtonToolbar
</CDropdownMenu> class="justify-content-between"
</CDropdown> role="group"
<CDropdown variant="btn-group"> aria-label="Toolbar with button groups"
<CDropdownToggle color="primary">Dropdown</CDropdownToggle> >
<CDropdownMenu> <CButtonGroup
<CDropdownItem href="#">Action</CDropdownItem> class="me-2"
<CDropdownItem href="#">Another action</CDropdownItem> role="group"
<CDropdownItem href="#">Something else here</CDropdownItem> aria-label="First group"
<CDropdownDivider/> >
<CDropdownItem href="#">Separated link</CDropdownItem> <CButton color="secondary" variant="outline"> 1 </CButton>
</CDropdownMenu> <CButton color="secondary" variant="outline"> 2 </CButton>
</CDropdown> <CButton color="secondary" variant="outline"> 3 </CButton>
<CDropdown variant="btn-group"> <CButton color="secondary" variant="outline"> 4 </CButton>
<CDropdownToggle color="primary">Dropdown</CDropdownToggle> </CButtonGroup>
<CDropdownMenu> <CInputGroup>
<CDropdownItem href="#">Action</CDropdownItem> <CInputGroupText>@</CInputGroupText>
<CDropdownItem href="#">Another action</CDropdownItem> <CFormInput
<CDropdownItem href="#">Something else here</CDropdownItem> placeholder="Input group example"
<CDropdownDivider/> aria-label="Input group example"
<CDropdownItem href="#">Separated link</CDropdownItem> aria-describedby="btnGroupAddon"
</CDropdownMenu> />
</CDropdown> </CInputGroup>
</CButtonGroup> </CButtonToolbar>
</Example> </Example>
</CCol> </CCardBody>
<CCol md="4"> </CCard>
<Example href="components/button-group.html#vertical-variation"> </CCol>
<CButtonGroup vertical role="group" aria-label="Vertical button group"> <CCol :xs="12">
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/> <CCard class="mb-4">
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/> <CCardHeader>
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/> <strong>Vue Button Group</strong> <span>Sizing</span>
</CButtonGroup> </CCardHeader>
</Example> <CCardBody>
</CCol> <p>
</CRow> Alternatively, of implementing button sizing classes to each button
in a group, set
<code>size</code> property to all
<code>&lt;CButtonGroup&gt;</code>&#39;s, including each one when
nesting multiple groups.
</p>
<Example href="components/button-group#sizing">
<CButtonGroup
size="lg"
role="group"
aria-label="Large button group"
>
<CButton color="dark" variant="outline"> Left </CButton>
<CButton color="dark" variant="outline"> Middle </CButton>
<CButton color="dark" variant="outline"> Right </CButton>
</CButtonGroup>
<br />
<CButtonGroup role="group" aria-label="Default button group">
<CButton color="dark" variant="outline"> Left </CButton>
<CButton color="dark" variant="outline"> Middle </CButton>
<CButton color="dark" variant="outline"> Right </CButton>
</CButtonGroup>
<br />
<CButtonGroup
size="sm"
role="group"
aria-label="Small button group"
>
<CButton color="dark" variant="outline"> Left </CButton>
<CButton color="dark" variant="outline"> Middle </CButton>
<CButton color="dark" variant="outline"> Right </CButton>
</CButtonGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button Group</strong> <span>Nesting</span>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Put a <code>&lt;CButtonGroup&gt;</code> inside another
<code>&lt;CButtonGroup&gt;</code> when you need dropdown menus
combined with a series of buttons.
</p>
<Example href="components/button-group#nesting">
<CButtonGroup
role="group"
aria-label="Button group with nested dropdown"
>
<CButton color="primary">1</CButton>
<CButton color="primary">2</CButton>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CButtonGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button Group</strong> <span>Vertical variation</span>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Create a set of buttons that appear vertically stacked rather than
horizontally.
<strong>Split button dropdowns are not supported here.</strong>
</p>
<Example href="components/button-group/#vertical-variation">
<CButtonGroup
vertical
role="group"
aria-label="Vertical button group"
>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
</CButtonGroup>
</Example>
<Example href="components/button-group/#vertical-variation">
<CButtonGroup
vertical
role="group"
aria-label="Vertical button group"
>
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CButtonGroup>
</Example>
<Example href="components/button-group/#vertical-variation">
<CButtonGroup
vertical
role="group"
aria-label="Vertical button group"
>
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio
1" defaultChecked /> <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio
2" /> <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio
3" />
</CButtonGroup>
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -227,6 +390,6 @@
<script> <script>
export default { export default {
name: "ButtonGroups", name: 'ButtonGroups',
}; }
</script> </script>
src/views/buttons/Buttons.vue
+437 -167
View File
@@ -1,177 +1,447 @@
<template> <template>
<CRow> <CRow>
<CCol> <CCol :xs="12">
<CCard> <DocsCallout name="Button" href="components/buttons" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Buttons</strong> <strong>Vue Button</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="components/button.html#examples"> <p class="text-medium-emphasis small">
CoreUI includes a bunch of predefined buttons components, each
<template v-for="(shape) in [null, 'rounded-pill', 'rounded-0', 'rounded-circle']"> serving its own semantic purpose. Buttons show what action will
<h4 class="mt-4">Shape {{ shape === null ? 'standard' : shape === 'rounded-0' ? ' square' : shape }}:</h4> happen when the user clicks or touches it. CoreUI buttons are used
<CRow> to initialize operations, both in the background or foreground of an
<CCol md="12" class="mt-4"> experience.
<strong>Standard</strong> </p>
<br> <Example href="components/buttons">
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']"> <template
<CButton :color="item" class="m-2" :shape="shape">{{item}}</CButton> v-for="state in ['normal', 'active', 'disabled']"
</template> :key="state"
</CCol> >
<CCol md="12" class="mt-4"> <CRow class="align-items-center mb-3">
<strong>Standard disabled</strong> <CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
<br> state.charAt(0).toUpperCase() + state.slice(1)
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']"> }}</CCol>
<CButton :color="item" disabled class="m-2" :shape="shape">{{item}}</CButton> <CCol xs>
</template> <template
</CCol> v-for="color in [
<CCol md="12" class="mt-4"> 'primary',
<strong>Variant outline</strong> 'secondary',
<br> 'success',
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']"> 'danger',
<CButton :color="item" variant="outline" class="m-2" :shape="shape">{{item}}</CButton> 'warning',
</template> 'info',
</CCol> 'light',
<CCol md="12" class="mt-4"> 'dark',
<strong>Variant outline disabled</strong> ]"
<br> :key="color"
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']"> >
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape">{{item}}</CButton> <CButton
</template> :color="color"
</CCol> :active="state === 'active' ? true : false"
<CCol md="12" class="mt-4"> :disabled="state === 'disabled' ? true : false"
<strong>Variant ghost</strong> >
<br> {{ color.charAt(0).toUpperCase() + color.slice(1) }}
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']"> </CButton>
<CButton :color="item" variant="ghost" class="m-2" :shape="shape">{{item}}</CButton> </template>
</template> </CCol>
</CCol> </CRow>
<CCol md="12" class="mt-4">
<strong>Variant ghost disabled</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape">{{item}}</CButton>
</template>
</CCol>
</CRow>
<CRow>
<CCol md="12" class="mt-4">
<strong>Standard size="sm"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Standard disabled size="sm"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant outline size="sm"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="outline" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant outline disabled size="sm"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant ghost size="sm"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant ghost disabled size="sm"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
</template>
</CCol>
</CRow>
<CRow>
<CCol md="12" class="mt-4">
<strong>Standard size="lg"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Standard disabled size="lg"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant outline size="lg"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="outline" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant outline disabled size="lg"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant ghost size="lg"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant ghost disabled size="lg"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
</template>
</CCol>
</CRow>
</template> </template>
</Example> </Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button</strong> <small>with icons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
You can combine button with our
<a href="https://icons.coreui.io/">CoreUI Icons</a>.
</p>
<Example href="components/buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
>
<CRow class="align-items-center mb-3">
<CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
state.charAt(0).toUpperCase() + state.slice(1)
}}</CCol>
<h4 class="mt-4">Block buttons</h4> <CCol xs>
<template
<Example href="components/button.html#block-buttons"> v-for="color in [
<div class="d-grid gap-2"> 'primary',
<CButton color="primary">Button</CButton> 'secondary',
<CButton color="primary">Button</CButton> 'success',
</div> 'danger',
<br><br> 'warning',
<div class="d-grid gap-2 d-md-block"> 'info',
<CButton color="primary">Button</CButton> 'light',
<CButton color="primary">Button</CButton> 'dark',
</div> ]"
<br><br> :key="color"
<div class="d-grid gap-2 col-6 mx-auto"> >
<CButton color="primary">Button</CButton> <CButton
<CButton color="primary">Button</CButton> :color="color"
</div> :active="state === 'active' ? true : false"
<br><br> :disabled="state === 'disabled' ? true : false"
<div class="d-grid gap-2 d-md-flex justify-content-md-end"> >
<CButton color="primary" class="me-md-2">Button</CButton> <CIcon icon="cil-bell" class="me-2" />
<CButton color="primary">Button</CButton> {{ color.charAt(0).toUpperCase() + color.slice(1) }}
</div> </CButton>
</Example> </template>
</CCol>
</CRow>
</template>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button</strong> <small>Button components</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
The <code>&lt;CButton&gt;</code> component are designed for
<code>&lt;button&gt;</code> , <code>&lt;a&gt;</code> or
<code>&lt;input&gt;</code>
elements (though some browsers may apply a slightly different
rendering).
</p>
<p class="text-medium-emphasis small">
If you&#39;re using <code>&lt;CButton&gt;</code> component as
<code>&lt;a&gt;</code> elements that are used to trigger
functionality ex. collapsing content, these links should be given a
<code>role=&#34;button&#34;</code> to adequately communicate their
meaning to assistive technologies such as screen readers.
</p>
<Example href="components/buttons#button-components">
<CButton component="a" color="primary" href="#" role="button">
Link
</CButton>
<CButton type="submit" color="primary"> Button </CButton>
<CButton
component="input"
type="button"
color="primary"
value="Input"
/>
<CButton
component="input"
type="submit"
color="primary"
value="Submit"
/>
<CButton
component="input"
type="reset"
color="primary"
value="Reset"
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button</strong> <small>outline</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If you need a button, but without the strong background colors. Set
<code>variant=&#34;outline&#34;</code> prop to remove all background
colors.
</p>
<Example href="components/buttons#outline-buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
>
<CRow class="align-items-center mb-3">
<CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
state.charAt(0).toUpperCase() + state.slice(1)
}}</CCol>
<CCol xs>
<template
v-for="color in [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
]"
:key="color"
>
<CButton
:color="color"
:active="state === 'active' ? true : false"
:disabled="state === 'disabled' ? true : false"
variant="outline"
>
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
</CButton>
</template>
</CCol>
</CRow>
</template>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button</strong> <small>ghost</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If you need a ghost variant of button, set
<code>variant=&#34;ghost&#34;</code> prop to remove all background
colors.
</p>
<Example href="components/buttons#ghost-buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
>
<CRow class="align-items-center mb-3">
<CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
state.charAt(0).toUpperCase() + state.slice(1)
}}</CCol>
<CCol xs>
<template
v-for="color in [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
]"
:key="color"
>
<CButton
:color="color"
:active="state === 'active' ? true : false"
:disabled="state === 'disabled' ? true : false"
variant="ghost"
>
<CIcon icon="{cilBell}" class="me-2" />
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
</CButton>
</template>
</CCol>
</CRow>
</template>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button</strong> <small>Sizes</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or
<code>size=&#34;sm&#34;</code> for additional sizes.
</p>
<Example href="components/buttons#sizes">
<CButton color="primary" size="lg"> Large button </CButton>
<CButton color="secondary" size="lg"> Large button </CButton>
</Example>
<Example href="components/buttons#sizes">
<CButton color="primary" size="sm"> Small button </CButton>
<CButton color="secondary" size="sm"> Small button </CButton>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button</strong> <small>Pill</small>
</CCardHeader>
<CCardBody>
<Example href="components/buttons#pill-buttons">
<template
v-for="color in [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
]"
:key="color"
>
<CButton
:color="color"
:active="state === 'active' ? true : false"
:disabled="state === 'disabled' ? true : false"
shape="rounded-pill"
>
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
</CButton>
</template>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button</strong> <small>Square</small>
</CCardHeader>
<CCardBody>
<Example href="components/buttons#square">
<template
v-for="color in [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
]"
:key="color"
>
<CButton
:color="color"
:active="state === 'active' ? true : false"
:disabled="state === 'disabled' ? true : false"
shape="rounded-0"
>
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
</CButton>
</template>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button</strong> <small>Disabled state</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code>disabled</code> boolean prop to any
<code>&lt;CButton&gt;</code>
component to make buttons look inactive. Disabled button has
<code>pointer-events: none</code> applied to, disabling hover and
active states from triggering.
</p>
<Example href="components/buttons#disabled-state">
<CButton color="primary" size="lg" disabled>
Primary button
</CButton>
<CButton color="secondary" size="lg" disabled> Button </CButton>
</Example>
<p class="text-medium-emphasis small">
Disabled buttons using the <code>&lt;a&gt;</code> component act a
little different:
</p>
<p class="text-medium-emphasis small">
<code>&lt;a&gt;</code>s don&#39;tsupport the
<code>disabled</code> attribute, so CoreUI has to add
<code>.disabled</code> class to make buttons look inactive. CoreUI
also has to add to the disabled button component
<code>aria-disabled=&#34;true&#34;</code> attribute to show the
state of the component to assistive technologies.
</p>
<Example href="components/buttons#disabled-state">
<CButton component="a" href="#" color="primary" size="lg" disabled>
Primary link
</CButton>
<CButton
component="a"
href="#"
color="secondary"
size="lg"
disabled
>
Link
</CButton>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button</strong> <small>Block buttons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Create buttons that span the full width of a parent—by using
utilities.
</p>
<Example href="components/buttons#block-buttons">
<div class="d-grid gap-2">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
<p class="text-medium-emphasis small">
Here we create a responsive variation, starting with vertically
stacked buttons until the <code>md</code> breakpoint, where
<code>.d-md-block</code> replaces the <code>.d-grid</code> class,
thus nullifying the <code>gap-2</code> utility. Resize your browser
to see them change.
</p>
<Example href="components/buttons#block-buttons">
<div class="d-grid gap-2 d-md-block">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
<p class="text-medium-emphasis small">
You can adjust the width of your block buttons with grid column
width classes. For example, for a half-width &#34;block button&#34;,
use <code>.col-6</code>. Center it horizontally with
<code>.mx-auto</code>, too.
</p>
<Example href="components/buttons#block-buttons">
<div class="d-grid gap-2 col-6 mx-auto">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
<p class="text-medium-emphasis small">
Additional utilities can be used to adjust the alignment of buttons
when horizontal. Here we&#39;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&#39;re no longer
stacked.
</p>
<Example href="components/buttons#block-buttons">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<CButton color="primary" class="me-md-2"> Button </CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -180,6 +450,6 @@
<script> <script>
export default { export default {
name: "Buttons", name: 'Buttons',
}; }
</script> </script>
src/views/buttons/Dropdowns.vue
+364
View File
@@ -0,0 +1,364 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Dropdown" href="components/dropdown" />
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Single button</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Here&#39;s how you can put them to work with either
<code>&lt;button&gt;</code>
elements:
</p>
<Example href="components/dropdown#single-button">
<CDropdown>
<CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<p class="text-medium-emphasis small">
The best part is you can do this with any button variant, too:
</p>
<Example href="components/dropdown#single-button">
<template
v-for="color in [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
]"
:key="color"
>
<CDropdown variant="btn-group">
<CDropdownToggle :color="color">{{ color }}</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Split button</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Similarly, create split button dropdowns with virtually the same
markup as single button dropdowns, but with the addition of boolean
prop <code>split</code> for proper spacing around the dropdown
caret.
</p>
<p class="text-medium-emphasis small">
We use this extra class to reduce the horizontal
<code>padding</code> on either side of the caret by 25% and remove
the <code>margin-left</code> that&#39;s attached for normal button
dropdowns. Those additional changes hold the caret centered in the
split button and implement a more properly sized hit area next to
the main button.
</p>
<Example href="components/dropdown#split-button">
<template
v-for="color in [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
]"
:key="color"
>
<CDropdown variant="btn-group">
<CButton :color="color">{{ color }}</CButton>
<CDropdownToggle :color="color" split>{{
color
}}</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Button dropdowns work with buttons of all sizes, including default
and split dropdown buttons.
</p>
<Example href="components/dropdown#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="lg">
Large button
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CButton color="secondary" size="lg">
Large split button
</CButton>
<CDropdownToggle color="secondary" size="lg" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<Example href="components/dropdown#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="sm">
Small button
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CButton color="secondary" size="sm">
Small split button
</CButton>
<CDropdownToggle color="secondary" size="sm" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Single button</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Opt into darker dropdowns to match a dark navbar or custom style by
set
<code>dark</code> property. No changes are required to the dropdown
items.
</p>
<Example href="components/dropdown#dark-dropdowns">
<CDropdown dark>
<CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<p class="text-medium-emphasis small">
And putting it to use in a navbar:
</p>
<Example href="components/dropdown#dark-dropdowns">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="https://coreui.io/react/">
Navbar
</a>
<button
class="navbar-toggler"
type="button"
data-coreui-toggle="collapse"
data-coreui-target="#navbarNavDarkDropdown"
aria-controls="navbarNavDarkDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse"
id="navbarNavDarkDropdown"
>
<ul class="navbar-nav">
<CDropdown dark component="li" variant="nav-item">
<CDropdownToggle>Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#"
>Something else here</CDropdownItem
>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</ul>
</div>
</div>
</nav>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Dropup</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Trigger dropdown menus above elements by adding
<code>direction=&#34;dropup&#34;</code> to the
<code>&lt;CDropdown&gt;</code>
component.
</p>
<Example href="components/dropdown#dropup">
<CDropdown variant="btn-group" direction="dropup">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group" direction="dropup">
<CButton color="secondary">Small split button</CButton>
<CDropdownToggle color="secondary" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Dropright</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Trigger dropdown menus at the right of the elements by adding
<code>direction=&#34;dropend&#34;</code> to the
<code>&lt;CDropdown&gt;</code>
component.
</p>
<Example href="components/dropdown#dropright">
<CDropdown variant="btn-group" direction="dropend">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group" direction="dropend">
<CButton color="secondary">Small split button</CButton>
<CDropdownToggle color="secondary" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Dropleft</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Trigger dropdown menus at the left of the elements by adding
<code>direction=&#34;dropstart&#34;</code> to the
<code>&lt;CDropdown&gt;</code>
component.
</p>
<Example href="components/dropdown#dropleft">
<CButtonGroup>
<CDropdown variant="btn-group" direction="dropstart">
<CDropdownToggle color="secondary" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CButton color="secondary">Small split button</CButton>
</CButtonGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Dropdowns',
}
</script>
src/views/charts/CChartDoughnutExample.vue
+1 -1
View File
@@ -12,7 +12,7 @@ export default {
computed: { computed: {
defaultData () { defaultData () {
return { return {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'], labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
datasets: [ datasets: [
{ {
backgroundColor: [ backgroundColor: [
src/views/charts/CChartPieExample.vue
+1 -1
View File
@@ -12,7 +12,7 @@ export default {
computed: { computed: {
defaultData () { defaultData () {
return { return {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'], labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
datasets: [ datasets: [
{ {
backgroundColor: [ backgroundColor: [
src/views/forms/ChecksRadios.vue
+9 -9
View File
@@ -6,7 +6,7 @@
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Checkbox</strong> <strong>Vue Checkbox</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="forms/checks-radios"> <Example href="forms/checks-radios">
@@ -23,7 +23,7 @@
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Checkbox</strong> <small>Disabled</small> <strong>Vue Checkbox</strong> <small>Disabled</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
@@ -45,7 +45,7 @@
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Radio</strong> <strong>Vue Radio</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
@@ -74,7 +74,7 @@
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Radio</strong> <small>Disabled</small> <strong>Vue Radio</strong> <small>Disabled</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="forms/checks-radios#disabled-1"> <Example href="forms/checks-radios#disabled-1">
@@ -100,7 +100,7 @@
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Switches</strong> <strong>Vue Switches</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
@@ -136,7 +136,7 @@
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Switches</strong> <small>Sizes</small> <strong>Vue Switches</strong> <small>Sizes</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="forms/checks-radios#sizes"> <Example href="forms/checks-radios#sizes">
@@ -161,7 +161,7 @@
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Checks and Radios</strong> <strong>Vue Checks and Radios</strong>
<small>Default layout (stacked)</small> <small>Default layout (stacked)</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@@ -204,7 +204,7 @@
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Checks and Radios</strong> <small>Inline</small> <strong>Vue Checks and Radios</strong> <small>Inline</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
@@ -256,7 +256,7 @@
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Checks and Radios</strong> <small>Without labels</small> <strong>Vue Checks and Radios</strong> <small>Without labels</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
src/views/forms/FormControl.vue
+10 -28
View File
@@ -43,8 +43,7 @@
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Set heights using <code>size</code> property like Set heights using <code>size</code> property like
<code>size=&#34;lg&#34;</code> and <code>size=&#34;lg&#34;</code> and <code>size=&#34;sm&#34;</code>.
<code>size=&#34;sm&#34;</code>.
</p> </p>
<Example href="forms/form-control#sizing"> <Example href="forms/form-control#sizing">
<CFormInput <CFormInput
@@ -137,10 +136,7 @@
</p> </p>
<Example href="components/accordion"> <Example href="components/accordion">
<CRow class="mb-3"> <CRow class="mb-3">
<CFormLabel <CFormLabel for="staticEmail" class="col-sm-2 col-form-label">
for="staticEmail"
class="col-sm-2 col-form-label"
>
Email Email
</CFormLabel> </CFormLabel>
<div class="col-sm-10"> <div class="col-sm-10">
@@ -154,10 +150,7 @@
</div> </div>
</CRow> </CRow>
<CRow class="mb-3"> <CRow class="mb-3">
<CFormLabel <CFormLabel for="inputPassword" class="col-sm-2 col-form-label">
for="inputPassword"
class="col-sm-2 col-form-label"
>
Password Password
</CFormLabel> </CFormLabel>
<div class="col-sm-10"> <div class="col-sm-10">
@@ -180,10 +173,7 @@
/> />
</div> </div>
<div class="col-auto"> <div class="col-auto">
<CFormLabel <CFormLabel for="inputPassword2" class="visually-hidden">
for="inputPassword2"
class="visually-hidden"
>
Password Password
</CFormLabel> </CFormLabel>
<CFormInput <CFormInput
@@ -193,9 +183,7 @@
/> />
</div> </div>
<div class="col-auto"> <div class="col-auto">
<CButton type="submit" class="mb-3"> <CButton type="submit" class="mb-3"> Confirm identity </CButton>
Confirm identity
</CButton>
</div> </div>
</CForm> </CForm>
</Example> </Example>
@@ -210,9 +198,7 @@
<CCardBody> <CCardBody>
<Example href="forms/form-control#file-input"> <Example href="forms/form-control#file-input">
<div class="mb-3"> <div class="mb-3">
<CFormLabel for="formFile" <CFormLabel for="formFile">Default file input example</CFormLabel>
>Default file input example</CFormLabel
>
<CFormInput type="file" id="formFile" /> <CFormInput type="file" id="formFile" />
</div> </div>
<div class="mb-3"> <div class="mb-3">
@@ -228,15 +214,11 @@
<CFormInput type="file" id="formFileDisabled" disabled /> <CFormInput type="file" id="formFileDisabled" disabled />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<CFormLabel for="formFileSm" <CFormLabel for="formFileSm">Small file input example</CFormLabel>
>Small file input example</CFormLabel
>
<CFormInput type="file" size="sm" id="formFileSm" /> <CFormInput type="file" size="sm" id="formFileSm" />
</div> </div>
<div> <div>
<CFormLabel for="formFileLg" <CFormLabel for="formFileLg">Large file input example</CFormLabel>
>Large file input example</CFormLabel
>
<CFormInput type="file" size="lg" id="formFileLg" /> <CFormInput type="file" size="lg" id="formFileLg" />
</div> </div>
</Example> </Example>
@@ -266,6 +248,6 @@
<script> <script>
export default { export default {
name: "FormControl", name: 'FormControl',
}; }
</script> </script>
src/views/notifications/Alerts.vue
+144 -67
View File
@@ -1,69 +1,146 @@
<template> <template>
<CRow> <CRow>
<CCol> <CCol :xs="12">
<CCard> <DocsCallout name="Alert" href="components/alert" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Alerts</strong> <strong>Vue Alert</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h4 class="mt-4">Alerts examples</h4> <p class="text-medium-emphasis small">
<Example href="components/alert.html#examples"> Vue Alert is prepared for any length of text, as well as an
<CAlert color="primary">A simple primary alert—check it out!</CAlert> optional close button. For a styling, use one of the
<CAlert color="secondary">A simple secondary alert—check it out!</CAlert> <strong>required</strong> contextual <code>color</code> props
<CAlert color="success">A simple success alert—check it out!</CAlert> (e.g., <code>primary</code>). For inline dismissal, use the
<CAlert color="danger">A simple danger alert—check it out!</CAlert> <a
<CAlert color="warning">A simple warning alert—check it out!</CAlert> href="https://coreui.io/react/docs/4.0/components/alert#dismissing"
<CAlert color="info">A simple info alert—check it out!</CAlert> >
<CAlert color="light">A simple light alert—check it out!</CAlert> dismissing prop
<CAlert color="dark">A simple dark alert—check it out!</CAlert> </a>
</Example> .
</p>
<h4 class="mt-4">Link color</h4> <Example href="components/alert">
<Example href="components/alert.html#link-color"> <CAlert color="primary"
<CAlert color="primary"> >A simple primary alert—check it out!</CAlert
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. >
</CAlert> <CAlert color="secondary"
<CAlert color="secondary"> >A simple secondary alert—check it out!</CAlert
A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. >
</CAlert> <CAlert color="success"
<CAlert color="success"> >A simple success alert—check it out!</CAlert
A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. >
</CAlert> <CAlert color="danger">A simple danger alert—check it out!</CAlert>
<CAlert color="danger"> <CAlert color="warning"
A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. >A simple warning alert—check it out!</CAlert
</CAlert> >
<CAlert color="warning"> <CAlert color="info">A simple info alert—check it out!</CAlert>
A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. <CAlert color="light">A simple light alert—check it out!</CAlert>
</CAlert> <CAlert color="dark">A simple dark alert—check it out!</CAlert>
<CAlert color="info"> </Example>
A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. </CCardBody>
</CAlert> </CCard>
<CAlert color="light"> </CCol>
A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. <CCol :xs="12">
</CAlert> <CCard class="mb-4">
<CAlert color="dark"> <CCardHeader>
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. <strong>Vue Alert</strong> <small>Link color</small>
</CAlert> </CCardHeader>
</Example> <CCardBody>
<p class="text-medium-emphasis small">
<h4 class="mt-4">Additional content</h4> Use the <code>&lt;CAlertLink&gt;</code> component to immediately
<Example href="components/alert.html#additional-content"> give matching colored links inside any alert.
<CAlert color="success" v-bind:visible="true"> </p>
<CAlertHeading>Well done!</CAlertHeading> <Example href="components/alert#link-color">
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <CAlert color="primary">
<hr /> A simple primary alert with
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> <CAlertLink href="#">an example link</CAlertLink>. Give it a click
</CAlert> if you like.
</Example> </CAlert>
<CAlert color="secondary">
<h4 class="mt-4">Dismissing</h4> A simple secondary alert with
<Example href="components/alert.html#dismissing"> <CAlertLink href="#">an example link</CAlertLink>. Give it a click
<CAlert color="warning" dismissible @dismiss="alert"> if you like.
<strong>Go right ahead</strong> and click that dimiss over there on the right. </CAlert>
</CAlert> <CAlert color="success">
</Example> A simple success alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
<CAlert color="danger">
A simple danger alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
<CAlert color="warning">
A simple warning alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
<CAlert color="info">
A simple info alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
<CAlert color="light">
A simple light alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
<CAlert color="dark">
A simple dark alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Alert</strong> <small>Additional content</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Alert can also incorporate supplementary components &amp; elements
like heading, paragraph, and divider.
</p>
<Example href="components/alert#additional-content">
<CAlert color="success">
<CAlertHeading tag="h4">Well done!</CAlertHeading>
<p>
Aww yeah, you successfully read this important alert message.
This example text is going to run a bit longer so that you can
see how spacing within an alert works with this kind of content.
</p>
<hr />
<p class="mb-0">
Whenever you need to, be sure to use margin utilities to keep
things nice and tidy.
</p>
</CAlert>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Alert</strong> <small>Dismissing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Alerts can also be easily dismissed. Just add the
<code>dismissible</code> prop.
</p>
<Example href="components/alert#dismissing">
<CAlert color="warning" dismissible @dismiss="alert">
<strong>Go right ahead</strong> and click that dimiss over there
on the right.
</CAlert>
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -72,11 +149,11 @@
<script> <script>
export default { export default {
name: "Alerts", name: "Alerts",
methods: { methods: {
alert: function(){ alert: function () {
alert("👋 Well, hi there! Thanks for dismissing me.") alert("👋 Well, hi there! Thanks for dismissing me.");
}, },
} },
}; };
</script> </script>
src/views/notifications/Badges.vue
+82 -45
View File
@@ -1,53 +1,90 @@
<template> <template>
<CRow> <CRow>
<CCol> <CCol :xs="12">
<CCard> <DocsCallout name="Badges" href="components/badge" />
</CCol>
<CCol :lg="6">
<CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Badges</strong> <strong>Vue Badges</strong> <small>Dismissing</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h4 class="mt-4">Basic usage</h4> <p class="text-medium-emphasis small">
<Example href="components/badge.html#basic-usage"> Bootstrap badge scale to suit the size of the parent element by
<h1>Example heading <CBadge color="secondary">New</CBadge></h1> using relative font sizing and <code>em</code> units.
<h2>Example heading <CBadge color="secondary">New</CBadge></h2> </p>
<h3>Example heading <CBadge color="secondary">New</CBadge></h3> <Example href="components/badge">
<h4>Example heading <CBadge color="secondary">New</CBadge></h4> <h1>Example heading <CBadge color="secondary">New</CBadge></h1>
<h5>Example heading <CBadge color="secondary">New</CBadge></h5> <h2>Example heading <CBadge color="secondary">New</CBadge></h2>
<h6>Example heading <CBadge color="secondary">New</CBadge></h6> <h3>Example heading <CBadge color="secondary">New</CBadge></h3>
</Example> <h4>Example heading <CBadge color="secondary">New</CBadge></h4>
<Example href="components/badge.html#basic-usage"> <h5>Example heading <CBadge color="secondary">New</CBadge></h5>
<CButton color="primary"> <h6>Example heading <CBadge color="secondary">New</CBadge></h6>
Notifications <CBadge color="secondary">4</CBadge> </Example>
</CButton> <p class="text-medium-emphasis small">
<br> Badges can be used as part of links or buttons to provide a counter.
<CButton color="primary"> </p>
Profile <CBadge color="secondary">9</CBadge> <Example href="components/badge">
<span class="visually-hidden">unread messages</span> <CButton color="primary">
</CButton> Notifications <CBadge color="secondary">4</CBadge>
</CButton>
</Example> </Example>
<p class="text-medium-emphasis small">
<h4 class="mt-4">Contextual variations</h4> Remark that depending on how you use them, badges may be complicated
<Example href="components/badge.html#contextual-variations"> for users of screen readers and related assistive technologies.
<CBadge color="primary">primary</CBadge> </p>
<CBadge color="success">success</CBadge> <p class="text-medium-emphasis small">
<CBadge color="danger">danger</CBadge> Unless the context is clear, consider including additional context
<CBadge color="warning">warning</CBadge> with a visually hidden piece of additional text.
<CBadge color="info">info</CBadge> </p>
<CBadge color="light">light</CBadge> <Example href="components/badge">
<CBadge color="dark">dark</CBadge> <CButton color="primary">
</Example> Profile <CBadge color="secondary">9</CBadge>
<span class="visually-hidden">unread messages</span>
<h4 class="mt-4">Pill badges</h4> </CButton>
<Example href="components/badge.html#pill-badges"> </Example>
<CBadge color="primary" shape="rounded-pill">primary</CBadge> </CCardBody>
<CBadge color="success" shape="rounded-pill">success</CBadge> </CCard>
<CBadge color="danger" shape="rounded-pill">danger</CBadge> </CCol>
<CBadge color="warning" shape="rounded-pill">warning</CBadge> <CCol :lg="6">
<CBadge color="info" shape="rounded-pill">info</CBadge> <CCard class="mb-4">
<CBadge color="light" shape="rounded-pill">light</CBadge> <CCardHeader>
<CBadge color="dark" shape="rounded-pill">dark</CBadge> <strong>Vue Badges</strong> <small>Contextual variations</small>
</Example> </CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add any of the below-mentioned <code>color</code> props to modify
the presentation of a badge.
</p>
<Example href="components/badge#contextual-variations">
<CBadge color="primary">primary</CBadge>
<CBadge color="success">success</CBadge>
<CBadge color="danger">danger</CBadge>
<CBadge color="warning">warning</CBadge>
<CBadge color="info">info</CBadge>
<CBadge color="light">light</CBadge>
<CBadge color="dark">dark</CBadge>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Badges</strong> <small>Pill badges</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make
badges rounded.
</p>
<Example href="components/badge#pill-badges">
<CBadge color="primary" shape="rounded-pill"> primary </CBadge>
<CBadge color="success" shape="rounded-pill"> success </CBadge>
<CBadge color="danger" shape="rounded-pill"> danger </CBadge>
<CBadge color="warning" shape="rounded-pill"> warning </CBadge>
<CBadge color="info" shape="rounded-pill"> info </CBadge>
<CBadge color="light" shape="rounded-pill"> light </CBadge>
<CBadge color="dark" shape="rounded-pill"> dark </CBadge>
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
src/views/notifications/Modals.vue
+1030 -417
View File
File diff suppressed because it is too large Load Diff
src/views/widgets/Widgets.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<CRow> <CRow>
<CCol> <CCol>
<CCard> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Widgets</strong> <strong>Vue Widgets</strong>
</CCardHeader> </CCardHeader>