sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 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
+268 -79
View File
@@ -1,16 +1,20 @@
<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>
<Example href="components/list-group">
<CListGroup> <CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -19,10 +23,21 @@
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
<CCol md="6"> <CCol :xs="12">
<h4 class="mt-4">Active items</h4> <CCard class="mb-4">
<Example href="components/list-group.html#active-items"> <CCardHeader>
<strong>Vue List Group</strong> <small>Active items</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>active</code> boolean property to a
<code>&lt;CListGroupItem&gt;</code> to show the current active
selection.
</p>
<Example href="components/list-group/#active-items">
<CListGroup> <CListGroup>
<CListGroupItem active>Cras justo odio</CListGroupItem> <CListGroupItem active>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -31,10 +46,20 @@
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
<CCol md="6"> <CCol :xs="12">
<h4 class="mt-4">Disabled items</h4> <CCard class="mb-4">
<Example href="components/list-group.html#disabled-items"> <CCardHeader>
<strong>Vue List Group</strong> <small>Disabled items</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>disabled</code> boolean property to a
<code>&lt;CListGroupItem&gt;</code> to make it appear disabled.
</p>
<Example href="components/list-group/#disabled-items">
<CListGroup> <CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem> <CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -43,34 +68,59 @@
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
<CCol md="6"> <CCol :xs="12">
<h4 class="mt-4">Links</h4> <CCard class="mb-4">
<Example href="components/list-group.html#links-and-buttons"> <CCardHeader>
<strong>Vue List Group</strong> <small>Links and buttons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to
create <em>actionable</em> list group items with hover, disabled,
and active states by adding
<code>component=&#34;a|button&#34;</code>. We separate these
pseudo-classes to ensure list groups made of non-interactive
elements (like <code>&lt;li&gt;</code>s or
<code>&lt;div&gt;</code>
s) don&#39;tprovide a click or tap affordance.
</p>
<Example href="components/list-group/#links-and-buttons">
<CListGroup> <CListGroup>
<CListGroupItem component="a" href="#" active>Cras justo odio</CListGroupItem> <CListGroupItem component="a" href="#" active>
<CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem> Cras justo odio
<CListGroupItem component="a" href="#">Morbi leo risus</CListGroupItem> </CListGroupItem>
<CListGroupItem component="a" href="#">Porta ac consectetur ac</CListGroupItem> <CListGroupItem component="a" href="#">
<CListGroupItem component="a" href="#" disabled>Vestibulum at eros</CListGroupItem> Dapibus ac facilisis in
</CListGroupItem>
<CListGroupItem component="a" href="#">
Morbi leo risus
</CListGroupItem>
<CListGroupItem component="a" href="#">
Porta ac consectetur ac
</CListGroupItem>
<CListGroupItem component="a" href="#" disabled>
Vestibulum at eros
</CListGroupItem>
</CListGroup> </CListGroup>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
<CCol md="6"> <CCol :xs="12">
<h4 class="mt-4">Buttons</h4> <CCard class="mb-4">
<Example href="components/list-group.html#links-and-buttons"> <CCardHeader>
<CListGroup> <strong>Vue List Group</strong> <small>Flush</small>
<CListGroupItem component="button" active>Cras justo odio</CListGroupItem> </CCardHeader>
<CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem> <CCardBody>
<CListGroupItem component="button">Morbi leo risus</CListGroupItem> <p class="text-medium-emphasis small">
<CListGroupItem component="button">Porta ac consectetur ac</CListGroupItem> Add <code>flush</code> boolean property to remove some borders and
<CListGroupItem component="button" disabled>Vestibulum at eros</CListGroupItem> rounded corners to render list group items edge-to-edge in a parent
</CListGroup> container (e.g., cards).
</Example> </p>
</CCol> <Example href="components/list-group/#flush">
<CCol md="6">
<h4 class="mt-4">Flush</h4>
<Example href="components/list-group.html#flush">
<CListGroup flush> <CListGroup flush>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -79,11 +129,35 @@
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
<CCol md="6"> <CCol :xs="12">
<h4 class="mt-4">Horizonstal</h4> <CCard class="mb-4">
<Example href="components/list-group.html#horizontal"> <CCardHeader>
<template v-for="(item) in ['', '-sm', '-md', '-lg', '-xl', '-xxl']"> <strong>Vue List Group</strong> <small>Horizontal</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>layout=&#34;horizontal&#34;</code> to change the layout of
list group items from vertical to horizontal across all breakpoints.
Alternatively, choose a responsive variant
<code
>.layout=&#34;horizontal-&#123;sm | md | lg | xl |
xxl&#125;&#34;</code
>
to make a list group horizontal starting at that breakpoint&#39;s
<code>min-width</code>. Currently
<strong
>horizontal list groups cannot be combined with flush list
groups.</strong
>
</p>
<Example href="components/list-group/#flush">
<template
v-for="item in ['', '-sm', '-md', '-lg', '-xl', '-xxl']"
:key="item"
>
<CListGroup class="mb-2" :layout="'horizontal' + item"> <CListGroup class="mb-2" :layout="'horizontal' + item">
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -91,79 +165,194 @@
</CListGroup> </CListGroup>
</template> </template>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
<CCol md="6"> <CCol :xs="12">
<h4 class="mt-4">Contextual classes</h4> <CCard class="mb-4">
<Example href="components/list-group.html#contextual-classes"> <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> <CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" :color="item">A simple {{item}} list group item</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> </CListGroup>
</Example> </Example>
</CCol> <p class="text-medium-emphasis small">
<CCol md="6"> Contextual classes also work with <code>&lt;a&gt;</code>s or
<h4 class="mt-4">Change component to link</h4> <code>&lt;button&gt;</code>s. Note the addition of the hover styles
<Example href="components/list-group.html#contextual-classes"> 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> <CListGroup>
<CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem component="a" href="#"
<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> >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> </CListGroup>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
<CCol md="6"> <CCol :xs="12">
<h4 class="mt-4">Vue list groups with badge</h4> <CCard class="mb-4">
<Example href="components/list-group.html#with-badges"> <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> <CListGroup>
<CListGroupItem class="d-flex justify-content-between align-items-center">Cras justo odio<CBadge color="primary" shape="rounded-pill">14</CBadge></CListGroupItem> <CListGroupItem
<CListGroupItem class="d-flex justify-content-between align-items-center">Dapibus ac facilisis in<CBadge color="primary" shape="rounded-pill">2</CBadge></CListGroupItem> class="d-flex justify-content-between align-items-center"
<CListGroupItem class="d-flex justify-content-between align-items-center">Morbi leo risus<CBadge color="primary" shape="rounded-pill">1</CBadge></CListGroupItem> >
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> </CListGroup>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
<CCol md="6"> <CCol :xs="12">
<h4 class="mt-4">Custom content</h4> <CCard class="mb-4">
<Example href="components/list-group.html#custom-content"> <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> <CListGroup>
<CListGroupItem component="a" href="#" active> <CListGroupItem component="a" href="#" active>
<div class="d-flex w-100 justify-content-between"> <div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5> <h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small> <small>3 days ago</small>
</div> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <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> <small>Donec id elit non mi porta.</small>
</CListGroupItem> </CListGroupItem>
<CListGroupItem component="a" href="#"> <CListGroupItem component="a" href="#">
<div class="d-flex w-100 justify-content-between"> <div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5> <h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small> <small class="text-medium-emphasis">3 days ago</small>
</div> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <p class="mb-1">
<small class="text-muted">Donec id elit non mi porta.</small> 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>
<CListGroupItem component="a" href="#"> <CListGroupItem component="a" href="#">
<div class="d-flex w-100 justify-content-between"> <div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5> <h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small> <small class="text-medium-emphasis">3 days ago</small>
</div> </div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <p class="mb-1">
<small class="text-muted">Donec id elit non mi porta.</small> 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>
</CListGroup> </CListGroup>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
<CCol md="6"> <CCol :xs="12">
<h4 class="mt-4">Checkboxes and radios</h4> <CCard class="mb-4">
<Example href="components/list-group.html#checkboxes-and-radios"> <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> <CListGroup>
<CListGroupItem><CFormCheck label="Cras justo odio"/></CListGroupItem> <CListGroupItem>
<CListGroupItem><CFormCheck label="Dapibus ac facilisis in" defaultChecked/></CListGroupItem> <CFormCheck label="Cras justo odio" />
<CListGroupItem><CFormCheck label="Morbi leo risus" defaultChecked/></CListGroupItem> </CListGroupItem>
<CListGroupItem><CFormCheck label="orta ac consectetur ac"/></CListGroupItem> <CListGroupItem>
<CListGroupItem><CFormCheck label="Vestibulum at eros"/></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> </CListGroup>
</Example> </Example>
</CCol>
</CRow>
</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
+169 -34
View File
@@ -1,13 +1,21 @@
<template> <template>
<CRow> <CRow>
<CCol> <CCol :xs="12">
<CCard> <DocsCallout name="Nav" href="components/nav" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Nav</strong> <strong>Vue Navs</strong> <small>Base navs</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h4 class="mt-4">Base Nav</h4> <p class="text-medium-emphasis small">
<Example href="components/nav.html#base-nav"> The base <code>.nav</code> component is built with flexbox and provide a strong
foundation for building all types of navigation components. It includes some style
overrides (for working with lists), some link padding for larger hit areas, and basic
disabled styling.
</p>
<Example href="components/nav#base-nav">
<CNav> <CNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@@ -27,9 +35,46 @@
</CNavItem> </CNavItem>
</CNav> </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
items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because
the .nav uses display: flex, the nav links behave the same as nav items would, but
without the extra markup.
</p>
<Example href="components/nav#base-nav">
<CNav component="nav">
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNav>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Horizontal alignment</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Change the horizontal alignment of your nav with{' '}
<a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
flexbox utilities
</a>
. By default, navs are left-aligned, but you can easily change them to center or right
aligned.
</p>
<p class="text-medium-emphasis small">
Centered with <code>.justify-content-center</code>:
</p>
<Example href="components/nav#horizontal-alignment">
<CNav class="justify-content-center"> <CNav class="justify-content-center">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@@ -49,9 +94,10 @@
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </Example>
<p class="text-medium-emphasis small">
<h4 class="mt-4">Nav right alignment</h4> Right-aligned with <code>.justify-content-end</code>:
<Example href="components/nav.html#horizontal-alignment"> </p>
<Example href="components/nav#base-nav">
<CNav class="justify-content-end"> <CNav class="justify-content-end">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@@ -71,9 +117,21 @@
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Vertical nav</h4> </CCard>
<Example href="components/nav.html#vertical"> </CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Vertical</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Stack your navigation by changing the flex item direction with the{' '}
<code>.flex-column</code> utility. Need to stack them on some viewports but not
others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
</p>
<Example href="components/nav#vertical">
<CNav class="flex-column"> <CNav class="flex-column">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@@ -93,9 +151,20 @@
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Tabs nav</h4> </CCard>
<Example href="components/nav.html#tabs"> </CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Tabs</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
to generate a tabbed interface
</p>
<Example href="components/nav#tabs">
<CNav variant="tabs"> <CNav variant="tabs">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@@ -115,9 +184,19 @@
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Pills nav</h4> </CCard>
<Example href="components/nav.html#pills"> </CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Pills</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
</p>
<Example href="components/nav#pills">
<CNav variant="pills"> <CNav variant="pills">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@@ -137,9 +216,22 @@
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Fill nav</h4> </CCard>
<Example href="components/nav.html#fill-and-justify"> </CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Fill and justify</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Force your <code>.nav</code>&#39;s contents to extend the full available width one of
two modifier classes. To proportionately fill all available space with your{' '}
<code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
horizontal space is occupied, but not every nav item has the same width.
</p>
<Example href="components/nav#fill-and-justify">
<CNav variant="pills" layout="fill"> <CNav variant="pills" layout="fill">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@@ -159,9 +251,12 @@
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </Example>
<p class="text-medium-emphasis small">
<h4 class="mt-4">Justified nav</h4> For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
<Example href="components/nav.html#fill-and-justify"> space will be occupied by nav links, but unlike the .nav-fill above, every nav item
will be the same width.
</p>
<Example href="components/nav#fill-and-justify">
<CNav variant="pills" layout="justified"> <CNav variant="pills" layout="justified">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@@ -181,9 +276,44 @@
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Vue nav with dropdown</h4> </CCard>
<Example href="components/nav.html#using-dropdowns"> </CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Working with flex utilities</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If you need responsive nav variations, consider using a series of{' '}
<a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
verbose, these utilities offer greater customization across responsive breakpoints. In
the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
horizontal layout that fills the available width starting from the small breakpoint.
</p>
<Example href="components/nav#working-with-flex-utilities">
<CNav component="nav" variant="pills" class="flex-column flex-sm-row">
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNav>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Tabs with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="components/nav#tabs-with-dropdowns">
<CNav> <CNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@@ -208,9 +338,16 @@
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Vue pills nav with dropdown</h4> </CCard>
<Example href="components/nav.html#pills-with-dropdowns"> </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"> <CNav variant="pills">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@@ -235,8 +372,6 @@
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
src/views/base/Popovers.vue
+60 -12
View File
@@ -1,27 +1,75 @@
<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="{header: 'Popover title', content: 'And here\’s some amazing content. It’s very engaging. Right?', placement: 'right'}" v-c-popover="{
header: 'Popover title',
content:
'And here\’s some amazing content. It’s very engaging. Right?',
placement: 'right',
}"
> >
Click to toggle popover Click to toggle popover
</CButton> </CButton>
</Example> </Example>
<h4 class="mt-4">Vue popovers four directions</h4> </CCardBody>
</CCard>
</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"> <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
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Popover on right</CButton> color="secondary"
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Popover on bottom</CButton> v-c-popover="{
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Popover on left</CButton> 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> </Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
@@ -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
+52 -18
View File
@@ -1,37 +1,71 @@
<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">
Hover over the links below to see tooltips:
</p>
<Example href="directives/tooltip.html"> <Example href="directives/tooltip.html">
<p class="text-medium-emphasis"> <p class="text-medium-emphasis">
Tight pants next level keffiyeh Tight pants next level keffiyeh
<CLink v-c-tooltip="'Tooltip text'"> you probably </CLink> <CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
haven't heard of them. haven't heard of them. Photo booth beard raw denim letterpress
Photo booth beard raw denim letterpress vegan messenger vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's
bag stumptown. Farm-to-table seitan, mcsweeney's fixie fixie sustainable quinoa 8-bit american apparel
sustainable quinoa 8-bit american apparel
<CLink v-c-tooltip="'Tooltip text'"> have a </CLink> <CLink v-c-tooltip="'Tooltip text'"> have a </CLink>
terry richardson vinyl chambray. Beard stumptown, terry richardson vinyl chambray. Beard stumptown, cardigans banh
cardigans banh mi lomo thundercats. Tofu biodiesel mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko
williamsburg marfa, four loko mcsweeney''s cleanse mcsweeney''s cleanse vegan chambray. A really ironic artisan
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">
Hover over the links below to see tooltips:
</p>
<Example href="directives/tooltip.html"> <Example href="directives/tooltip.html">
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Tooltip on top</CButton> <CButton
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Tooltip on right</CButton> color="secondary"
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Tooltip on bottom</CButton> v-c-tooltip="{
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Tooltip on left</CButton> 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> </Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
@@ -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
+244 -81
View File
@@ -1,103 +1,176 @@
<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>
<Example href="components/button-group">
<CButtonGroup role="group" aria-label="Basic example"> <CButtonGroup role="group" aria-label="Basic example">
<CButton color="primary">Left</CButton> <CButton color="primary">Left</CButton>
<CButton color="primary">Middle</CButton> <CButton color="primary">Middle</CButton>
<CButton color="primary">Right</CButton> <CButton color="primary">Right</CButton>
</CButtonGroup> </CButtonGroup>
</Example> </Example>
</CCol> <p>
<CCol md="6"> These classes can also be added to groups of links, as an
<Example href="components/button-group.html#basic-example"> alternative to the
<code>&lt;CNav&gt;</code> components.
</p>
<Example href="components/button-group">
<CButtonGroup> <CButtonGroup>
<CButton href="#" color="primary" active> Active link </CButton> <CButton href="#" color="primary" active> Active link </CButton>
<CButton href="#" color="primary"> Link </CButton> <CButton href="#" color="primary"> Link </CButton>
<CButton href="#" color="primary"> Link </CButton> <CButton href="#" color="primary"> Link </CButton>
</CButtonGroup> </CButtonGroup>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
</CRow> <CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<CRow> <strong>Vue Button Group</strong> <span>Mixed styles</span>
<CCol md="6"> </CCardHeader>
<h4 class="mt-4">Mixed styles</h4> <CCardBody>
<Example href="components/button-group.html#mixed-styles"> <Example href="components/button-group#mixed-styles">
<CButtonGroup role="group" aria-label="Basic mixed styles example"> <CButtonGroup role="group" aria-label="Basic mixed styles example">
<CButton color="danger">Left</CButton> <CButton color="danger">Left</CButton>
<CButton color="warning">Middle</CButton> <CButton color="warning">Middle</CButton>
<CButton color="success">Right</CButton> <CButton color="success">Right</CButton>
</CButtonGroup> </CButtonGroup>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
<CCol md="6"> <CCol :xs="12">
<h4 class="mt-4">Outlined styles</h4> <CCard class="mb-4">
<Example href="components/button-group.html#outlined-styles"> <CCardHeader>
<strong>Vue Button Group</strong> <span>Outlined styles</span>
</CCardHeader>
<CCardBody>
<Example href="components/button-group#outlined-styles">
<CButtonGroup role="group" aria-label="Basic outlined example"> <CButtonGroup role="group" aria-label="Basic outlined example">
<CButton color="primary" variant="outline"> Left </CButton> <CButton color="primary" variant="outline"> Left </CButton>
<CButton color="primary" variant="outline"> Middle </CButton> <CButton color="primary" variant="outline"> Middle </CButton>
<CButton color="primary" variant="outline"> Right </CButton> <CButton color="primary" variant="outline"> Right </CButton>
</CButtonGroup> </CButtonGroup>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
</CRow> <CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<h4 class="mt-4">Checkbox and radio button groups</h4> <strong>Vue Button Group</strong> <span>Checkbox and radio button groups</span>
<CRow> </CCardHeader>
<CCol md="6"> <CCardBody>
<Example href="components/button-group.html#checkbox-and-radio-button-groups"> <p>
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group"> Combine button-like checkbox and radio toggle buttons into a
<CFormCheck button buttonVariant="outline" id="btncheck1" autoComplete="off" label="Checkbox 1"/> seamless looking button group.
<CFormCheck button buttonVariant="outline" id="btncheck2" autoComplete="off" label="Checkbox 2"/> </p>
<CFormCheck button buttonVariant="outline" id="btncheck3" autoComplete="off" label="Checkbox 3"/> <Example
href="components/button-group#checkbox-and-radio-button-groups"
>
<CButtonGroup
role="group"
aria-label="Basic checkbox toggle button group"
>
<CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btncheck1"
autoComplete="off" label="Checkbox 1" />
<CFormCheck :button="{ color: 'primary', variant: 'outline' }"
id="btncheck2" autoComplete="off" label="Checkbox 2" />
<CFormCheck :button="{ color: 'primary', variant: 'outline' }"
id="btncheck3" autoComplete="off" label="Checkbox 3" />
</CButtonGroup> </CButtonGroup>
</Example> </Example>
</CCol> <Example
<CCol md="6"> href="components/button-group#checkbox-and-radio-button-groups"
<Example href="components/button-group.html#checkbox-and-radio-button-groups"> >
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group"> <CButtonGroup
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/> role="group"
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/> aria-label="Basic checkbox toggle button group"
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/> >
<CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"
/> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"
/> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"
/>
</CButtonGroup> </CButtonGroup>
</Example> </Example>
</CCardBody>
</CCard>
</CCol> </CCol>
</CRow> <CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<h4 class="mt-4">Button toolbar</h4> <strong>Vue Button Group</strong> <span>Button toolbar</span>
<Example href="components/button-group.html#button-toolbar"> </CCardHeader>
<CButtonToolbar role="group" aria-label="Toolbar with button groups"> <CCardBody>
<CButtonGroup class="me-2" role="group" aria-label="First group"> <p>
Join sets of button groups into button toolbars for more complicated
components. Use utility classes as needed to space out groups,
buttons, and more.
</p>
<Example href="components/button-group#button-toolbar">
<CButtonToolbar
role="group"
aria-label="Toolbar with button groups"
>
<CButtonGroup
class="me-2"
role="group"
aria-label="First group"
>
<CButton color="primary">1</CButton> <CButton color="primary">1</CButton>
<CButton color="primary">2</CButton> <CButton color="primary">2</CButton>
<CButton color="primary">3</CButton> <CButton color="primary">3</CButton>
<CButton color="primary">4</CButton> <CButton color="primary">4</CButton>
</CButtonGroup> </CButtonGroup>
<CButtonGroup class="me-2" role="group" aria-label="Second group"> <CButtonGroup
class="me-2"
role="group"
aria-label="Second group"
>
<CButton color="secondary">5</CButton> <CButton color="secondary">5</CButton>
<CButton color="secondary">6</CButton> <CButton color="secondary">6</CButton>
<CButton color="secondary">7</CButton> <CButton color="secondary">7</CButton>
</CButtonGroup> </CButtonGroup>
<CButtonGroup class="me-2" role="group" aria-label="Third group"> <CButtonGroup
class="me-2"
role="group"
aria-label="Third group"
>
<CButton color="info">8</CButton> <CButton color="info">8</CButton>
</CButtonGroup> </CButtonGroup>
</CButtonToolbar> </CButtonToolbar>
</Example> </Example>
<Example href="components/button-group.html#button-toolbar"> <p>
<CButtonToolbar class="mb-3" role="group" aria-label="Toolbar with button groups"> Feel free to combine input groups with button groups in your
<CButtonGroup class="me-2" role="group" aria-label="First group"> toolbars. Similar to the example above, you’ll likely need some
utilities through to space items correctly.
</p>
<Example href="components/button-group#button-toolbar">
<CButtonToolbar
class="mb-3"
role="group"
aria-label="Toolbar with button groups"
>
<CButtonGroup
class="me-2"
role="group"
aria-label="First group"
>
<CButton color="secondary" variant="outline"> 1 </CButton> <CButton color="secondary" variant="outline"> 1 </CButton>
<CButton color="secondary" variant="outline"> 2 </CButton> <CButton color="secondary" variant="outline"> 2 </CButton>
<CButton color="secondary" variant="outline"> 3 </CButton> <CButton color="secondary" variant="outline"> 3 </CButton>
@@ -105,11 +178,23 @@
</CButtonGroup> </CButtonGroup>
<CInputGroup> <CInputGroup>
<CInputGroupText>@</CInputGroupText> <CInputGroupText>@</CInputGroupText>
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/> <CFormInput
placeholder="Input group example"
aria-label="Input group example"
aria-describedby="btnGroupAddon"
/>
</CInputGroup> </CInputGroup>
</CButtonToolbar> </CButtonToolbar>
<CButtonToolbar class="justify-content-between" role="group" aria-label="Toolbar with button groups"> <CButtonToolbar
<CButtonGroup class="me-2" role="group" aria-label="First group"> class="justify-content-between"
role="group"
aria-label="Toolbar with button groups"
>
<CButtonGroup
class="me-2"
role="group"
aria-label="First group"
>
<CButton color="secondary" variant="outline"> 1 </CButton> <CButton color="secondary" variant="outline"> 1 </CButton>
<CButton color="secondary" variant="outline"> 2 </CButton> <CButton color="secondary" variant="outline"> 2 </CButton>
<CButton color="secondary" variant="outline"> 3 </CButton> <CButton color="secondary" variant="outline"> 3 </CButton>
@@ -117,14 +202,36 @@
</CButtonGroup> </CButtonGroup>
<CInputGroup> <CInputGroup>
<CInputGroupText>@</CInputGroupText> <CInputGroupText>@</CInputGroupText>
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/> <CFormInput
placeholder="Input group example"
aria-label="Input group example"
aria-describedby="btnGroupAddon"
/>
</CInputGroup> </CInputGroup>
</CButtonToolbar> </CButtonToolbar>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Sizing</h4> </CCard>
<Example href="components/button-group.html#sizing"> </CCol>
<CButtonGroup size="lg" role="group" aria-label="Large button group"> <CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button Group</strong> <span>Sizing</span>
</CCardHeader>
<CCardBody>
<p>
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"> Left </CButton>
<CButton color="dark" variant="outline"> Middle </CButton> <CButton color="dark" variant="outline"> Middle </CButton>
<CButton color="dark" variant="outline"> Right </CButton> <CButton color="dark" variant="outline"> Right </CButton>
@@ -136,18 +243,69 @@
<CButton color="dark" variant="outline"> Right </CButton> <CButton color="dark" variant="outline"> Right </CButton>
</CButtonGroup> </CButtonGroup>
<br /> <br />
<CButtonGroup size="sm" role="group" aria-label="Small button group"> <CButtonGroup
size="sm"
role="group"
aria-label="Small button group"
>
<CButton color="dark" variant="outline"> Left </CButton> <CButton color="dark" variant="outline"> Left </CButton>
<CButton color="dark" variant="outline"> Middle </CButton> <CButton color="dark" variant="outline"> Middle </CButton>
<CButton color="dark" variant="outline"> Right </CButton> <CButton color="dark" variant="outline"> Right </CButton>
</CButtonGroup> </CButtonGroup>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Vertical variation</h4> </CCard>
<CRow> </CCol>
<CCol md="4"> <CCol :xs="12">
<Example href="components/button-group.html#vertical-variation"> <CCard class="mb-4">
<CButtonGroup vertical role="group" aria-label="Vertical button group"> <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>
@@ -157,10 +315,12 @@
<CButton color="dark">Button</CButton> <CButton color="dark">Button</CButton>
</CButtonGroup> </CButtonGroup>
</Example> </Example>
</CCol> <Example href="components/button-group/#vertical-variation">
<CCol md="4"> <CButtonGroup
<Example href="components/button-group.html#vertical-variation"> vertical
<CButtonGroup vertical role="group" aria-label="Vertical button group"> role="group"
aria-label="Vertical button group"
>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
<CDropdown variant="btn-group"> <CDropdown variant="btn-group">
@@ -207,18 +367,21 @@
</CDropdown> </CDropdown>
</CButtonGroup> </CButtonGroup>
</Example> </Example>
</CCol> <Example href="components/button-group/#vertical-variation">
<CCol md="4"> <CButtonGroup
<Example href="components/button-group.html#vertical-variation"> vertical
<CButtonGroup vertical role="group" aria-label="Vertical button group"> role="group"
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/> aria-label="Vertical button group"
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/> >
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/> <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> </CButtonGroup>
</Example> </Example>
</CCol>
</CRow>
</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
+417 -147
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>
</CCol>
<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> </template>
</CCol> </CCol>
</CRow> </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
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"
>
<CIcon icon="cil-bell" 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>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>
<Example href="components/button.html#block-buttons"> <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"> <div class="d-grid gap-2">
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
</div> </div>
<br><br> </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"> <div class="d-grid gap-2 d-md-block">
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
</div> </div>
<br><br> </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"> <div class="d-grid gap-2 col-6 mx-auto">
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
</div> </div>
<br><br> </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"> <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" class="me-md-2"> Button </CButton>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
</div> </div>
</Example> </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
+112 -35
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
<a
href="https://coreui.io/react/docs/4.0/components/alert#dismissing"
>
dismissing prop
</a>
.
</p>
<Example href="components/alert">
<CAlert color="primary"
>A simple primary alert—check it out!</CAlert
>
<CAlert color="secondary"
>A simple secondary alert—check it out!</CAlert
>
<CAlert color="success"
>A simple success alert—check it out!</CAlert
>
<CAlert color="danger">A simple danger alert—check it out!</CAlert> <CAlert color="danger">A simple danger alert—check it out!</CAlert>
<CAlert color="warning">A simple warning alert—check it out!</CAlert> <CAlert color="warning"
>A simple warning alert—check it out!</CAlert
>
<CAlert color="info">A simple info alert—check it out!</CAlert> <CAlert color="info">A simple info alert—check it out!</CAlert>
<CAlert color="light">A simple light alert—check it out!</CAlert> <CAlert color="light">A simple light alert—check it out!</CAlert>
<CAlert color="dark">A simple dark alert—check it out!</CAlert> <CAlert color="dark">A simple dark alert—check it out!</CAlert>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Link color</h4> </CCard>
<Example href="components/alert.html#link-color"> </CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Alert</strong> <small>Link color</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Use the <code>&lt;CAlertLink&gt;</code> component to immediately
give matching colored links inside any alert.
</p>
<Example href="components/alert#link-color">
<CAlert color="primary"> <CAlert color="primary">
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. A simple primary alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert> </CAlert>
<CAlert color="secondary"> <CAlert color="secondary">
A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. A simple secondary alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert> </CAlert>
<CAlert color="success"> <CAlert color="success">
A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. A simple success alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert> </CAlert>
<CAlert color="danger"> <CAlert color="danger">
A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. A simple danger alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert> </CAlert>
<CAlert color="warning"> <CAlert color="warning">
A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. A simple warning alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert> </CAlert>
<CAlert color="info"> <CAlert color="info">
A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. A simple info alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert> </CAlert>
<CAlert color="light"> <CAlert color="light">
A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. A simple light alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert> </CAlert>
<CAlert color="dark"> <CAlert color="dark">
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like. A simple dark alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert> </CAlert>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Additional content</h4> </CCard>
<Example href="components/alert.html#additional-content"> </CCol>
<CAlert color="success" v-bind:visible="true"> <CCol :xs="12">
<CAlertHeading>Well done!</CAlertHeading> <CCard class="mb-4">
<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> <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 /> <hr />
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> <p class="mb-0">
Whenever you need to, be sure to use margin utilities to keep
things nice and tidy.
</p>
</CAlert> </CAlert>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Dismissing</h4> </CCard>
<Example href="components/alert.html#dismissing"> </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"> <CAlert color="warning" dismissible @dismiss="alert">
<strong>Go right ahead</strong> and click that dimiss over there on the right. <strong>Go right ahead</strong> and click that dimiss over there
on the right.
</CAlert> </CAlert>
</Example> </Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -75,8 +152,8 @@ 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
+51 -14
View File
@@ -1,13 +1,19 @@
<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
using relative font sizing and <code>em</code> units.
</p>
<Example href="components/badge">
<h1>Example heading <CBadge color="secondary">New</CBadge></h1> <h1>Example heading <CBadge color="secondary">New</CBadge></h1>
<h2>Example heading <CBadge color="secondary">New</CBadge></h2> <h2>Example heading <CBadge color="secondary">New</CBadge></h2>
<h3>Example heading <CBadge color="secondary">New</CBadge></h3> <h3>Example heading <CBadge color="secondary">New</CBadge></h3>
@@ -15,20 +21,42 @@
<h5>Example heading <CBadge color="secondary">New</CBadge></h5> <h5>Example heading <CBadge color="secondary">New</CBadge></h5>
<h6>Example heading <CBadge color="secondary">New</CBadge></h6> <h6>Example heading <CBadge color="secondary">New</CBadge></h6>
</Example> </Example>
<Example href="components/badge.html#basic-usage"> <p class="text-medium-emphasis small">
Badges can be used as part of links or buttons to provide a counter.
</p>
<Example href="components/badge">
<CButton color="primary"> <CButton color="primary">
Notifications <CBadge color="secondary">4</CBadge> Notifications <CBadge color="secondary">4</CBadge>
</CButton> </CButton>
<br> </Example>
<p class="text-medium-emphasis small">
Remark that depending on how you use them, badges may be complicated
for users of screen readers and related assistive technologies.
</p>
<p class="text-medium-emphasis small">
Unless the context is clear, consider including additional context
with a visually hidden piece of additional text.
</p>
<Example href="components/badge">
<CButton color="primary"> <CButton color="primary">
Profile <CBadge color="secondary">9</CBadge> Profile <CBadge color="secondary">9</CBadge>
<span class="visually-hidden">unread messages</span> <span class="visually-hidden">unread messages</span>
</CButton> </CButton>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Contextual variations</h4> </CCard>
<Example href="components/badge.html#contextual-variations"> </CCol>
<CCol :lg="6">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Badges</strong> <small>Contextual variations</small>
</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="primary">primary</CBadge>
<CBadge color="success">success</CBadge> <CBadge color="success">success</CBadge>
<CBadge color="danger">danger</CBadge> <CBadge color="danger">danger</CBadge>
@@ -37,9 +65,18 @@
<CBadge color="light">light</CBadge> <CBadge color="light">light</CBadge>
<CBadge color="dark">dark</CBadge> <CBadge color="dark">dark</CBadge>
</Example> </Example>
</CCardBody>
<h4 class="mt-4">Pill badges</h4> </CCard>
<Example href="components/badge.html#pill-badges"> <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="primary" shape="rounded-pill"> primary </CBadge>
<CBadge color="success" shape="rounded-pill"> success </CBadge> <CBadge color="success" shape="rounded-pill"> success </CBadge>
<CBadge color="danger" shape="rounded-pill"> danger </CBadge> <CBadge color="danger" shape="rounded-pill"> danger </CBadge>
src/views/notifications/Modals.vue
+822 -209
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>