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

refactor: template changes to implement new CCard syntax

Browse Source
This commit is contained in:
woothu
2019-03-05 11:19:23 +01:00
parent 7e3646e438
commit 403122ddfb
36 changed files with 2725 additions and 2895 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Charts.vue
+9 -9
View File
@@ -1,34 +1,34 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<CCardGroup columns class="card-columns"> <CCardGroup columns class="card-columns">
<CCard header="Line Chart"> <CCard header="Line Chart" bodyWrapper>
<LineExample/> <LineExample/>
</CCard> </CCard>
<CCard header="Bar Chart"> <CCard header="Bar Chart" bodyWrapper>
<BarExample/> <BarExample/>
</CCard> </CCard>
<CCard header="Doughnut Chart"> <CCard header="Doughnut Chart" bodyWrapper>
<DoughnutExample/> <DoughnutExample/>
</CCard> </CCard>
<CCard header="Radar Chart"> <CCard header="Radar Chart" bodyWrapper>
<RadarExample/> <RadarExample/>
</CCard> </CCard>
<CCard header="Pie Chart"> <CCard header="Pie Chart" bodyWrapper>
<PieExample/> <PieExample/>
</CCard> </CCard>
<CCard header="Polar Area Chart"> <CCard header="Polar Area Chart" bodyWrapper>
<PolarAreaExample/> <PolarAreaExample/>
</CCard> </CCard>
<CCard header="Simple line chart"> <CCard header="Simple line chart" bodyWrapper>
<CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='success'/> label='Sales' borderColor='success'/>
</CCard> </CCard>
<CCard header="Simple pointed chart"> <CCard header="Simple pointed chart" bodyWrapper>
<CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]' <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/> style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
</CCard> </CCard>
<CCard header="Simple bar chart"> <CCard header="Simple bar chart" bodyWrapper>
<CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='danger'/> label='Sales' color='danger'/>
</CCard> </CCard>
src/views/Dashboard.vue
+32 -30
View File
@@ -7,10 +7,10 @@
<CDropdown class="float-right" <CDropdown class="float-right"
variant="transparent p-0" variant="transparent p-0"
right right
button-content="<i class='icon-settings'></i>" buttonContent="<i class='icon-settings'></i>"
tag="div" tag="div"
> >
<!-- <template slot="button-content"> <!-- <template slot="buttonContent">
</template> --> </template> -->
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
@@ -31,10 +31,10 @@
variant="transparent p-0" variant="transparent p-0"
right right
no-caret no-caret
button-content="<i class='icon-location-pin'></i>" buttonContent="<i class='icon-location-pin'></i>"
tag="div" tag="div"
> >
<!-- <i slot="button-content" <!-- <i slot="buttonContent"
class="icon-location-pin" class="icon-location-pin"
></i> --> ></i> -->
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
@@ -58,7 +58,7 @@
<CDropdown class="float-right" <CDropdown class="float-right"
variant="transparent p-0" variant="transparent p-0"
right right
button-content="<i class='icon-settings'></i>" buttonContent="<i class='icon-settings'></i>"
tag="div" tag="div"
> >
@@ -80,9 +80,9 @@
<CDropdown class="float-right" <CDropdown class="float-right"
variant="transparent p-0" variant="transparent p-0"
right right
button-content="<i class='icon-settings'></i>" buttonContent="<i class='icon-settings'></i>"
> >
<!-- <template slot="button-content"> <!-- <template slot="buttonContent">
<i class="icon-settings"></i> <i class="icon-settings"></i>
</template> --> </template> -->
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
@@ -98,28 +98,30 @@
</CRow> </CRow>
<CCard> <CCard>
<CRow> <CCardBody>
<CCol sm="5"> <CRow>
<h4 id="traffic" class="card-title mb-0">Traffic</h4> <CCol sm="5">
<div class="small text-muted">November 2017</div> <h4 id="traffic" class="card-title mb-0">Traffic</h4>
</CCol> <div class="small text-muted">November 2017</div>
<CCol sm="7" class="d-none d-md-block"> </CCol>
<CButton variant="primary" class="float-right"><i class="icon-cloud-download"></i></CButton> <CCol sm="7" class="d-none d-md-block">
<CButtonGroup class="float-right mr-3"> <CButton variant="primary" class="float-right"><i class="icon-cloud-download"></i></CButton>
<CButton variant="outline-secondary" <CButtonGroup class="float-right mr-3">
v-for="(value, key) in ['Day', 'Month', 'Year']" <CButton variant="outline-secondary"
:key="key" v-for="(value, key) in ['Day', 'Month', 'Year']"
class="mx-0" :key="key"
:pressed="value === selected ? true : false" class="mx-0"
@click="selected = value" :pressed="value === selected ? true : false"
> @click="selected = value"
{{value}} >
</CButton> {{value}}
</CButtonGroup> </CButton>
</CCol> </CButtonGroup>
</CRow> </CCol>
<MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample> </CRow>
<CCardFooter slot="footer"> <MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample>
</CCardBody>
<CCardFooter>
<CRow class="text-center"> <CRow class="text-center">
<CCol md sm="12" class="mb-sm-2 mb-0"> <CCol md sm="12" class="mb-sm-2 mb-0">
<div class="text-muted">Visits</div> <div class="text-muted">Visits</div>
@@ -181,7 +183,7 @@
</CRow><!--/.row--> </CRow><!--/.row-->
<CRow> <CRow>
<CCol md="12"> <CCol md="12">
<CCard header="Traffic &amp; Sales"> <CCard header="Traffic &amp; Sales" bodyWrapper>
<CRow> <CRow>
<CCol sm="12" lg="6"> <CCol sm="12" lg="6">
<CRow> <CRow>
src/views/Widgets.vue
+8 -8
View File
@@ -203,8 +203,8 @@
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget06 header="9.823" text="Members online"> <CWidget06 header="9.823" text="Members online">
<template slot='dropdown'> <template slot='dropdown'>
<CDropdownclass="float-right" variant="transparent p-0" right> <CDropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="buttonContent">
<i class="icon-settings"></i> <i class="icon-settings"></i>
</template> </template>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
@@ -220,8 +220,8 @@
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget06 variant="info" header="9.823" text="Members online"> <CWidget06 variant="info" header="9.823" text="Members online">
<CDropdownslot="dropdown" class="float-right" variant="transparent p-0" right no-caret> <CDropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
<i slot="button-content" <i slot="buttonContent"
class="icon-location-pin" class="icon-location-pin"
></i> ></i>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
@@ -242,8 +242,8 @@
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget06 variant="warning" header="9.823" text="Members online"> <CWidget06 variant="warning" header="9.823" text="Members online">
<template slot='dropdown'> <template slot='dropdown'>
<CDropdownclass="float-right" variant="transparent p-0" right> <CDropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="buttonContent">
<i class="icon-settings"></i> <i class="icon-settings"></i>
</template> </template>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
@@ -261,8 +261,8 @@
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget06 variant="danger" header="9.823" text="Members online"> <CWidget06 variant="danger" header="9.823" text="Members online">
<template slot="dropdown"> <template slot="dropdown">
<CDropdownclass="float-right" variant="transparent p-0" right> <CDropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="buttonContent">
<i class="icon-settings"></i> <i class="icon-settings"></i>
</template> </template>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
src/views/base/Breadcrumbs.vue
+6 -4
View File
@@ -4,7 +4,7 @@
<CRow> <CRow>
<CCol cols> <CCol cols>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -12,9 +12,11 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/> <CCardBody>
<CBreadcrumb :items="items2"/> <CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
<CBreadcrumb :items="items3"/> <CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items3"/>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/base/Cards.vue
+69 -55
View File
@@ -2,80 +2,93 @@
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header="Card title"> <CCard header="Card title" :body="loremIpsum"/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard footer="Card Footer"> <CCard footer="Card Footer" :body="loremIpsum" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header="<i class='fa fa-check'></i> Card with icon"> <CCard
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. header="<i class='fa fa-check'></i> Card with icon"
</CCard> :body="loremIpsum"
/>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Card with switch Card with switch
<label class="switch switch-sm switch-text switch-info float-right mb-0"> <CSwitch
<input type="checkbox" class="switch-input"> class="float-right"
<span class="switch-label" data-on="On" data-off="Off"></span> size="sm"
<span class="switch-handle"></span> shape="pill"
</label> variant="info"
dataOn="On"
dataOff="Off"
:checked="true"
/>
</CCardHeader> </CCardHeader>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Card with label Card with label
<CBadge variant="success" class="float-right">Success</CBadge> <CBadge variant="success" class="float-right">Success</CBadge>
</CCardHeader> </CCardHeader>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Card with label Card with label
<CBadge pill variant="danger" class="float-right">42</CBadge> <CBadge pill variant="danger" class="float-right">42</CBadge>
</CCardHeader> </CCardHeader>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <CCardBody :body="loremIpsum"/>
</CCard> </CCard>
</CCol> </CCol>
</CRow><!--/.row--> </CRow><!--/.row-->
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header="Card outline primary" border-variant="primary"> <CCard
header="Card outline primary"
borderVariant="primary"
:body="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline secondary"
borderVariant="secondary"
:body="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline success"
borderVariant="success"
bodyWrapper
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header="Card outline secondary" border-variant="secondary"> <CCard header="Card outline info" borderVariant="info" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header="Card outline success" border-variant="success"> <CCard header="Card outline warning" borderVariant="warning" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header="Card outline info" border-variant="info"> <CCard header="Card outline danger" borderVariant="danger" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header="Card outline warning" border-variant="warning">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header="Card outline danger" border-variant="danger">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
@@ -83,22 +96,22 @@
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-primary" header="Card with primary accent"> <CCard class="card-accent-primary" header="Card with primary accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-secondary" header="Card with secondary accent"> <CCard class="card-accent-secondary" header="Card with secondary accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-success" header="Card with success accent"> <CCard class="card-accent-success" header="Card with success accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-info" header="Card with info accent"> <CCard class="card-accent-info" header="Card with info accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
@@ -108,14 +121,14 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-danger" header="Card with danger accent"> <CCard class="card-accent-danger" header="Card with danger accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
</CRow><!--/.row--> </CRow><!--/.row-->
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-primary text-center"> <CCard class="bg-primary text-center" bodyWrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -125,7 +138,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-success text-center"> <CCard class="bg-success text-center" bodyWrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -135,7 +148,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-info text-center"> <CCard class="bg-info text-center" bodyWrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -145,7 +158,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-warning text-center"> <CCard class="bg-warning text-center" bodyWrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -155,7 +168,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-danger text-center"> <CCard class="bg-danger text-center" bodyWrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -165,7 +178,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-secondary text-center"> <CCard class="bg-secondary text-center" bodyWrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -177,34 +190,34 @@
</CRow><!--/.row--> </CRow><!--/.row-->
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header="Card title" class="bg-primary"> <CCard header="Card title" class="bg-primary" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header="Card title" class="bg-success"> <CCard header="Card title" class="bg-success" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header="Card title" class="bg-info"> <CCard header="Card title" class="bg-info" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header="Card title" class="bg-warning"> <CCard header="Card title" class="bg-warning" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header="Card title" class="bg-danger"> <CCard header="Card title" class="bg-danger" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<transition name="fade"> <transition name="fade">
<CCard class="bg-secondary" no-body v-if="show" > <CCard class="bg-secondary" v-if="show" >
<CCardHeader slot="header"> <CCardHeader>
Card with header actions Card with header actions
<div class="card-header-actions"> <div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting" > <CLink href="#" class="card-header-action btn-setting" >
@@ -218,7 +231,7 @@
</CLink> </CLink>
</div> </div>
</CCardHeader> </CCardHeader>
<CCollapse slot="body" :show="isCollapsed" :duration="400"> <CCollapse :show="isCollapsed" :duration="400">
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCardBody> </CCardBody>
@@ -229,7 +242,7 @@
</CRow> </CRow>
<!-- <CRow> <!-- <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard noWrapper> <CCard >
<CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/> <CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/>
<CCardHeader header="Card title"/> <CCardHeader header="Card title"/>
<CCardBody style="max-height:200px;overflow-y:auto"> <CCardBody style="max-height:200px;overflow-y:auto">
@@ -253,7 +266,8 @@ export default {
data: function () { data: function () {
return { return {
show: true, show: true,
isCollapsed: true isCollapsed: true,
loremIpsum: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.'
} }
} }
} }
src/views/base/Carousels.vue
+17 -15
View File
@@ -4,7 +4,7 @@
<CRow> <CRow>
<CCol md="12" lg="9" > <CCol md="12" lg="9" >
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Carousel</strong> <strong> Bootstrap Carousel</strong>
<div class="card-header-actions"> <div class="card-header-actions">
@@ -18,20 +18,22 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<CCarousel> <CCardBody>
<CCarouselItem <CCarousel>
caption="First Slide" <CCarouselItem
imgSrc="https://lorempixel.com/1024/480/technics/2/" caption="First Slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum." imgSrc="https://lorempixel.com/1024/480/technics/2/"
/> text="Nulla vitae elit libero, a pharetra augue mollis interdum."
<CCarouselItem />
active <CCarouselItem
imgSrc="https://lorempixel.com/1024/480/technics/4/" active
/> imgSrc="https://lorempixel.com/1024/480/technics/4/"
<CCarouselItem />
imgSrc="https://lorempixel.com/1024/480/technics/8/" <CCarouselItem
/> imgSrc="https://lorempixel.com/1024/480/technics/8/"
</CCarousel> />
</CCarousel>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/base/Collapses.vue
+20 -19
View File
@@ -4,20 +4,21 @@
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Collapse </strong> <i class="fa fa-align-justify"></i>
<div class="Fcard-header-actions"> <strong> Bootstrap Collapse </strong>
<a href="https://bootstrap-vue.js.org/docs/components/collapse" class="card-header-action" rel="noreferrer noopener" target="_blank"> <div class="card-header-actions">
<CLink class="card-header-action">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </CLink>
</div> </div>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CButton id="collapse1" variant="primary"> <CButton id="collapse1" variant="primary">
Toggle Collapse Toggle Collapse
</CButton> </CButton>
<CCollapse toggler="collapse1" class="mt-2"> <CCollapse toggler="collapse1" class="mt-2">
<CCard> <CCard bodyWrapper>
<p class="card-text">Collapse contents Here</p> <p class="card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm"> <CButton id="collapse2" size="sm">
Toggle Inner Collapse Toggle Inner Collapse
@@ -27,12 +28,12 @@
</CCollapse> </CCollapse>
</CCard> </CCard>
</CCollapse> </CCollapse>
</div> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<!-- <CCol cols="12" md="6"> <!-- <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
</CCardHeader> </CCardHeader>
<div> <div>
@@ -52,7 +53,7 @@
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
</CCardHeader> </CCardHeader>
<div> <div>
@@ -67,7 +68,7 @@
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
</CCardHeader> </CCardHeader>
<div> <div>
@@ -89,7 +90,7 @@
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
</CCardHeader> </CCardHeader>
<div> <div>
@@ -110,16 +111,16 @@
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
</CCardHeader> </CCardHeader>
<div role="tablist"> <div role="tablist">
<CCard class="mb-1"> <CCard class="mb-1">
<CCardHeader slot="header" class="p-1" role="tab"> <CCardHeader class="p-1" role="tab">
<CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton> <CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton>
</CCardHeader> </CCardHeader>
<CCollapse id="accordion1" visible accordion="my-accordion" role="tabpanel"> <CCollapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
<CCardBody slot="body"> <CCardBody>
<p class="card-text"> <p class="card-text">
I start opened because <code>visible</code> is <code>true</code> I start opened because <code>visible</code> is <code>true</code>
</p> </p>
@@ -130,11 +131,11 @@
</CCollapse> </CCollapse>
</CCard> </CCard>
<CCard class="mb-1"> <CCard class="mb-1">
<CCardHeader slot="header" class="p-1" role="tab"> <CCardHeader class="p-1" role="tab">
<CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton> <CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton>
</CCardHeader> </CCardHeader>
<CCollapse id="accordion2" accordion="my-accordion" role="tabpanel"> <CCollapse id="accordion2" accordion="my-accordion" role="tabpanel">
<CCardBody slot="body"> <CCardBody>
<p class="card-text"> <p class="card-text">
{{ text }} {{ text }}
</p> </p>
@@ -142,11 +143,11 @@
</CCollapse> </CCollapse>
</CCard> </CCard>
<CCard class="mb-1"> <CCard class="mb-1">
<CCardHeader slot="header" class="p-1" role="tab"> <CCardHeader class="p-1" role="tab">
<CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton> <CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton>
</CCardHeader> </CCardHeader>
<CCollapse id="accordion3" accordion="my-accordion" role="tabpanel"> <CCollapse id="accordion3" accordion="my-accordion" role="tabpanel">
<CCardBody slot="body"> <CCardBody>
<p class="card-text"> <p class="card-text">
{{ text }} {{ text }}
</p> </p>
src/views/base/Forms.vue
+636 -747
View File
File diff suppressed because it is too large Load Diff
src/views/base/Jumbotrons.vue
+11 -11
View File
@@ -4,7 +4,7 @@
<CRow> <CRow>
<CCol> <CCol>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Bootstrap Jumbotron </strong> <i class="fa fa-align-justify"></i> <strong> Bootstrap Jumbotron </strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -12,21 +12,21 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2"> <CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
<p>For more information visit website</p> <p>For more information visit website</p>
<CButton variant="primary" href="#">More Info</CButton> <CButton variant="primary" href="#">More Info</CButton>
</CJumbotron> </CJumbotron>
</div> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol> <CCol>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong> <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>with slots</small> <small>with slots</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CJumbotron header="Bootstrap 4" lead=""> <CJumbotron header="Bootstrap 4" lead="">
<p slot="lead" class="lead"> <p slot="lead" class="lead">
This is a simple hero unit, a simple jumbotron-style component for This is a simple hero unit, a simple jumbotron-style component for
@@ -40,21 +40,21 @@
<CButton variant="primary" href="#">Do Something</CButton> <CButton variant="primary" href="#">Do Something</CButton>
<CButton variant="success" href="#">Do Something Else</CButton> <CButton variant="success" href="#">Do Something Else</CButton>
</CJumbotron> </CJumbotron>
</div> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol> <CCol>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong> <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>variants</small> <small>variants</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CJumbotron variant="info" <CJumbotron variant="info"
text-variant="white" textVariant="white"
border-variant="dark" borderVariant="dark"
header="Bootstrap 4"> header="Bootstrap 4">
<p slot="lead" class="lead"> <p slot="lead" class="lead">
@@ -67,7 +67,7 @@
out within the larger container. out within the larger container.
</p> </p>
</CJumbotron> </CJumbotron>
</div> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/base/ListGroups.vue
+177 -159
View File
@@ -1,22 +1,10 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<!-- <CRow>
<CCol>
<CCard>
<CMedia asideClasses="m-5 align-self-end" asideRight>
<img slot="aside" src="img/avatars/6.jpg">
<div class="text-center">
ehhehefgofdjdjfd<br><br><br><br><br><br><br><br><br><br><br><br>dfs
</div>
</CMedia>
</CCard>
</CCol>
</CRow> -->
<CRow> <CRow>
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap list group </strong> <i class="fa fa-align-justify"></i><strong> Bootstrap list group </strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -24,215 +12,245 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<CListGroup> <CCardBody>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
</CListGroup> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small> <i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
</CCardHeader> </CCardHeader>
<CListGroup> <CCardBody>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroup>
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem> <CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
</CListGroup> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small> <i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>disabled items</small>
</CCardHeader> </CCardHeader>
<CListGroup> <CCardBody>
<CListGroupItem disabled>Cras justo odio</CListGroupItem> <CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
</CListGroup> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small> <i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>actionable items</small>
</CCardHeader> </CCardHeader>
<CListGroup> <CCardBody>
<CListGroupItem href="#some-link">Awesome link</CListGroupItem> <CListGroup>
<CListGroupItem href="#" active>Link with active state</CListGroupItem> <CListGroupItem href="#some-link">Awesome link</CListGroupItem>
<CListGroupItem href="#">Action links are easy</CListGroupItem> <CListGroupItem href="#" active>Link with active state</CListGroupItem>
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem> <CListGroupItem href="#">Action links are easy</CListGroupItem>
</CListGroup> <CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small> <i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>buttons</small>
</CCardHeader> </CCardHeader>
<CListGroup> <CCardBody>
<CListGroupItem tag="button">Button item</CListGroupItem> <CListGroup>
<CListGroupItem tag="button">I am a button</CListGroupItem> <CListGroupItem tag="button">Button item</CListGroupItem>
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem> <CListGroupItem tag="button">I am a button</CListGroupItem>
<CListGroupItem tag="button">This is a button too</CListGroupItem> <CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
</CListGroup> <CListGroupItem tag="button">This is a button too</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small> <i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>with badges</small>
</CCardHeader> </CCardHeader>
<CListGroup> <CCardBody>
<CListGroupItem class="d-flex justify-content-between align-items-center"> <CListGroup>
Cras justo odio <CListGroupItem class="d-flex justify-content-between align-items-center">
<CBadge variant="primary" pill>14</CBadge> Cras justo odio
</CListGroupItem> <CBadge variant="primary" pill>14</CBadge>
<CListGroupItem class="d-flex justify-content-between align-items-center"> </CListGroupItem>
Dapibus ac facilisis in <CListGroupItem class="d-flex justify-content-between align-items-center">
<CBadge variant="primary" pill>2</CBadge> Dapibus ac facilisis in
</CListGroupItem> <CBadge variant="primary" pill>2</CBadge>
<CListGroupItem class="d-flex justify-content-between align-items-center"> </CListGroupItem>
Morbi leo risus <CListGroupItem class="d-flex justify-content-between align-items-center">
<CBadge variant="primary" pill>1</CBadge> Morbi leo risus
</CListGroupItem> <CBadge variant="primary" pill>1</CBadge>
</CListGroup> </CListGroupItem>
</CListGroup>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> List group </strong> <strong> List group </strong>
<small>variants</small> <small>variants</small>
</CCardHeader> </CCardHeader>
<CListGroup> <CCardBody>
<CListGroupItem>This is a default list group item</CListGroupItem> <CListGroup>
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem> <CListGroupItem>This is a default list group item</CListGroupItem>
<CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem> <CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem variant="success">This is a success list group item</CListGroupItem> <CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem variant="danger">This is a danger list group item</CListGroupItem> <CListGroupItem variant="success">This is a success list group item</CListGroupItem>
<CListGroupItem variant="warning">This is a warning list group item</CListGroupItem> <CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem variant="info">This is a info list group item</CListGroupItem> <CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem variant="light">This is a light list group item</CListGroupItem> <CListGroupItem variant="info">This is a info list group item</CListGroupItem>
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem> <CListGroupItem variant="light">This is a light list group item</CListGroupItem>
</CListGroup> <CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> List group </strong> <strong> List group </strong>
<small>variants active</small> <small>variants active</small>
</CCardHeader> </CCardHeader>
<CListGroup> <CCardBody>
<CListGroupItem href="#">This is a default list group item</CListGroupItem> <CListGroup>
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem> <CListGroupItem href="#">This is a default list group item</CListGroupItem>
<CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem> <CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem> <CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem> <CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
<CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem> <CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem> <CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem> <CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem> <CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
</CListGroup> <CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol cols="12"> <CCol cols="12">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>inside cards</small> <i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>inside cards</small>
</CCardHeader> </CCardHeader>
<CCardGroup deck> <CCardBody>
<CCard header="<b>Card with list group</b>"> <CCardGroup deck>
<CListGroup> <CCard header="<b>Card with list group</b>">
<CListGroupItem href="#">Cras justo odio</CListGroupItem> <CListGroup>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem> <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
</CListGroup> <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
<p class="card-text mt-2"> </CListGroup>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex <p class="card-text mt-2">
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
ad sit ipsum anim Lorem. consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
</p> ad sit ipsum anim Lorem.
</CCard> </p>
<CCard noWrapper header="<b>Card with flush list group</b>"> </CCard>
<CListGroup flush> <CCard header="<b>Card with flush list group</b>">
<CListGroupItem href="#">Cras justo odio</CListGroupItem> <CListGroup flush>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem> <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
</CListGroup> <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
<CCardBody slot="body"> </CListGroup>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex <CCardBody>
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
ad sit ipsum anim Lorem. consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
</CCardBody> ad sit ipsum anim Lorem.
</CCard> </CCardBody>
</CCardGroup> </CCard>
</CCardGroup>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol md="6"> <CCol md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small> <i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
</CCardHeader> </CCardHeader>
<CListGroup> <CCardBody>
<CListGroupItem href="#" active class="flex-column align-items-start"> <CListGroup>
<div class="d-flex w-100 justify-content-between"> <CListGroupItem href="#" active class="flex-column align-items-start">
<h5 class="mb-1">List group item heading</h5> <div class="d-flex w-100 justify-content-between">
<small>3 days ago</small> <h5 class="mb-1">List group item heading</h5>
</div> <small>3 days ago</small>
<p class="mb-1"> </div>
Donec id elit non mi porta gravida at eget metus. Maecenas <p class="mb-1">
sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas
</p> sed diam eget risus varius blandit.
<small>Donec id elit non mi porta.</small> </p>
</CListGroupItem> <small>Donec id elit non mi porta.</small>
<CListGroupItem href="#" class="flex-column align-items-start"> </CListGroupItem>
<div class="d-flex w-100 justify-content-between"> <CListGroupItem href="#" class="flex-column align-items-start">
<h5 class="mb-1">List group item heading</h5> <div class="d-flex w-100 justify-content-between">
<small class="text-muted">3 days ago</small> <h5 class="mb-1">List group item heading</h5>
</div> <small class="text-muted">3 days ago</small>
<p class="mb-1"> </div>
Donec id elit non mi porta gravida at eget metus. Maecenas <p class="mb-1">
sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas
</p> sed diam eget risus varius blandit.
<small class="text-muted">Donec id elit non mi porta.</small> </p>
</CListGroupItem> <small class="text-muted">Donec id elit non mi porta.</small>
<CListGroupItem href="#" disabled class="flex-column align-items-start"> </CListGroupItem>
<div class="d-flex w-100 justify-content-between"> <CListGroupItem href="#" disabled class="flex-column align-items-start">
<h5 class="mb-1">Disabled List group item</h5> <div class="d-flex w-100 justify-content-between">
<small class="text-muted">3 days ago</small> <h5 class="mb-1">Disabled List group item</h5>
</div> <small class="text-muted">3 days ago</small>
<p class="mb-1"> </div>
Donec id elit non mi porta gravida at eget metus. Maecenas <p class="mb-1">
sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas
</p> sed diam eget risus varius blandit.
<small class="text-muted">Donec id elit non mi porta.</small> </p>
</CListGroupItem> <small class="text-muted">Donec id elit non mi porta.</small>
</CListGroup> </CListGroupItem>
</CListGroup>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/base/Navbars.vue
+59 -57
View File
@@ -31,7 +31,7 @@
</CNavbar> </CNavbar>
</CCard> --> </CCard> -->
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -39,55 +39,57 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<CNavbar toggleable="md" type="dark" variant="info"> <CCardBody>
<CNavbarToggle @click="show=!show"/> <CNavbar toggleable="md" type="dark" variant="info">
<CNavbarBrand href="#">NavBar</CNavbarBrand> <CNavbarToggle @click="show=!show"/>
<CCollapse :show="show" <CNavbarBrand href="#">NavBar</CNavbarBrand>
navbar <CCollapse :show="show"
> navbar
<CNavbarNav> >
<CNavItem href="#">Link</CNavItem> <CNavbarNav>
<CNavItem href="#" disabled>Disabled</CNavItem> <CNavItem href="#">Link</CNavItem>
</CNavbarNav> <CNavItem href="#" disabled>Disabled</CNavItem>
</CNavbarNav>
<!-- Right aligned nav items --> <!-- Right aligned nav items -->
<CNavbarNav class="ml-auto"> <CNavbarNav class="ml-auto">
<CForm inline> <CForm inline>
<CFormInput <CFormInput
class="mr-sm-2" class="mr-sm-2"
placeholder="Search" placeholder="Search"
size="sm" size="sm"
/> />
<CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton> <CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
</CForm> </CForm>
<CDropdown button-content="Lang" <CDropdown buttonContent="Lang"
nav nav
placement="bottom-end" placement="bottom-end"
> >
<CDropdownItem>EN</CDropdownItem> <CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem> <CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem> <CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem> <CDropdownItem>FA</CDropdownItem>
</CDropdown> </CDropdown>
<CDropdown nav <CDropdown nav
button-content="<em>User</em>" buttonContent="<em>User</em>"
placement="bottom-end" placement="bottom-end"
> >
<CDropdownItem>Profile</CDropdownItem> <CDropdownItem>Profile</CDropdownItem>
<CDropdownItem>Signout</CDropdownItem> <CDropdownItem>Signout</CDropdownItem>
</CDropdown> </CDropdown>
</CNavbarNav> </CNavbarNav>
</CCollapse> </CCollapse>
</CNavbar> </CNavbar>
</CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>brand</small> <small>brand</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<!-- Image and text --> <!-- Image and text -->
<CNavbar variant="faded" light> <CNavbar variant="faded" light>
<CNavbarBrand href="#"> <CNavbarBrand href="#">
@@ -95,14 +97,14 @@
BootstrapVue BootstrapVue
</CNavbarBrand> </CNavbarBrand>
</CNavbar> </CNavbar>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>text</small> <small>text</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CNavbar toggleable="sm" light variant="light"> <CNavbar toggleable="sm" light variant="light">
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle> <CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
<CNavbarBrand>BootstrapVue</CNavbarBrand> <CNavbarBrand>BootstrapVue</CNavbarBrand>
@@ -112,14 +114,14 @@
</CNavbarNav> </CNavbarNav>
</CCollapse> </CCollapse>
</CNavbar> </CNavbar>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>dropdown</small> <small>dropdown</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CNavbar type="dark" variant="primary"> <CNavbar type="dark" variant="primary">
<!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle> <!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
<CCollapse :show="navbarDropdown" navbar> --> <CCollapse :show="navbarDropdown" navbar> -->
@@ -127,27 +129,27 @@
<CNavItem href="#">Home</CNavItem> <CNavItem href="#">Home</CNavItem>
<CNavItem href="#">Link</CNavItem> <CNavItem href="#">Link</CNavItem>
<!-- Navbar dropdowns --> <!-- Navbar dropdowns -->
<CDropdown button-content="Lang" right nav> <CDropdown buttonContent="Lang" right nav>
<CDropdownItem>EN</CDropdownItem> <CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem> <CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem> <CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem> <CDropdownItem>FA</CDropdownItem>
</CDropdown> </CDropdown>
<CDropdown button-content="User" right nav> <CDropdown buttonContent="User" right nav>
<CDropdownItem>Account</CDropdownItem> <CDropdownItem>Account</CDropdownItem>
<CDropdownItem>Settings</CDropdownItem> <CDropdownItem>Settings</CDropdownItem>
</CDropdown> </CDropdown>
</CNavbarNav> </CNavbarNav>
<!-- </CCollapse> --> <!-- </CCollapse> -->
</CNavbar> </CNavbar>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>form</small> <small>form</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CNavbar type="light" variant="light"> <CNavbar type="light" variant="light">
<CForm inline> <CForm inline>
<CFormInput <CFormInput
@@ -158,14 +160,14 @@
<CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton> <CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
</CForm> </CForm>
</CNavbar> </CNavbar>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>input group</small> <small>input group</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CNavbar type="light" variant="light"> <CNavbar type="light" variant="light">
<CForm inline> <CForm inline>
<CFormInput <CFormInput
@@ -174,7 +176,7 @@
/> />
</CForm> </CForm>
</CNavbar> </CNavbar>
</div> </CCardBody>
</CCard> </CCard>
</div> </div>
</div> </div>
src/views/base/Navs.vue
+57 -42
View File
@@ -2,28 +2,33 @@
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<div class="card-header-actions"> <!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank"> <CLink
href="#"
class="card-header-action"
>
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </CLink>
</div> </div> -->
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CNav> <CNav>
<CNavItem active>Active</CNavItem> <CNavItem active>Active</CNavItem>
<CNavItem title="Link"/> <CNavItem title="Link"/>
<CNavItem>Another Link</CNavItem> <CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem> <CNavItem disabled>Disabled</CNavItem>
</CNav> </CNav>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>icons</small> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>icons</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CNav> <CNav>
<CNavItem active> <CNavItem active>
<i class="icon-basket-loaded"></i> <i class="icon-basket-loaded"></i>
@@ -36,13 +41,15 @@
</CNavItem> </CNavItem>
<CNavItem disabled>Disabled</CNavItem> <CNavItem disabled>Disabled</CNavItem>
</CNav> </CNav>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>tab style</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CNav tabs> <CNav tabs>
<CNavItem active> <CNavItem active>
Active Active
@@ -55,61 +62,67 @@
</CNavItem> </CNavItem>
<CNavItem disabled>Disabled</CNavItem> <CNavItem disabled>Disabled</CNavItem>
</CNav> </CNav>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header" @click="item++"> <CCardHeader @click="item++">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>pill style</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CNav pills> <CNav pills>
<CNavItem active>Active</CNavItem> <CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem> <CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem> <CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem> <CNavItem disabled>Disabled</CNavItem>
</CNav> </CNav>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>fill tabs</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CNav fill tabs> <CNav fill tabs>
<CNavItem active>Active</CNavItem> <CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem> <CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem> <CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem> <CNavItem disabled>Disabled</CNavItem>
</CNav> </CNav>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>justified tabs</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CNav justified tabs> <CNav justified tabs>
<CNavItem active>Active</CNavItem> <CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem> <CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem> <CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem> <CNavItem disabled>Disabled</CNavItem>
</CNav> </CNav>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong> <strong> Bootstrap Navs </strong>
<small>dropdown support</small> <small>dropdown support</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CNav pills> <CNav pills>
<CNavItem active>Active</CNavItem> <CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem> <CNavItem>Link</CNavItem>
<CDropdown id="nav7_ddown" <CDropdown id="nav7_ddown"
nav nav
placement="bottom-end" placement="bottom-end"
button-content="Dropdown" buttonContent="Dropdown"
> >
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> --> <!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
<CDropdownItem>one</CDropdownItem> <CDropdownItem>one</CDropdownItem>
@@ -118,24 +131,26 @@
<CDropdownItem>three</CDropdownItem> <CDropdownItem>three</CDropdownItem>
</CDropdown> </CDropdown>
</CNav> </CNav>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong> <strong> Bootstrap Navs </strong>
<small>vertical variation</small> <small>vertical variation</small>
</CCardHeader> </CCardHeader>
<CRow> <CCardBody>
<CCol cols="3" class="m-0"> <CRow>
<CNav vertical pills > <CCol cols="3" class="m-0">
<CNavItem active>Active</CNavItem> <CNav vertical pills >
<CNavItem>Link</CNavItem> <CNavItem active>Active</CNavItem>
<CNavItem>Another Link</CNavItem> <CNavItem>Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem> <CNavItem>Another Link</CNavItem>
</CNav> <CNavItem disabled>Disabled</CNavItem>
</CCol> </CNav>
</CRow> </CCol>
</CRow>
</CCardBody>
</CCard> </CCard>
</div> </div>
</div> </div>
src/views/base/Paginations.vue
+6 -6
View File
@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -10,7 +10,7 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<h6>Default</h6> <h6>Default</h6>
<CPagination v-model="currentPage" :pages="10"/> <CPagination v-model="currentPage" :pages="10"/>
<br> <br>
@@ -26,14 +26,14 @@
</div> </div>
<div>currentPage: {{currentPage}}</div> <div>currentPage: {{currentPage}}</div>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Pagination </strong> <i class="fa fa-align-justify"></i><strong> Pagination </strong>
<small>alignment</small> <small>alignment</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<h6>Left alignment (default)</h6> <h6>Left alignment (default)</h6>
<CPagination v-model="currentPage" :pages="10"/> <CPagination v-model="currentPage" :pages="10"/>
<br> <br>
@@ -47,7 +47,7 @@
<br> <br>
<div>currentPage: {{currentPage}}</div> <div>currentPage: {{currentPage}}</div>
</div> </CCardBody>
</CCard> </CCard>
</div> </div>
</div> </div>
src/views/base/Popovers.vue
+51 -173
View File
@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Popovers</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Popovers</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -10,56 +10,58 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<CRow> <CCardBody>
<CCol cols="4"> <CRow>
<div class="my-3 text-center"> <CCol cols="4">
<CButton <div class="my-3 text-center">
variant="primary" <CButton
v-c-popover="{ variant="primary"
header: 'Popover header', v-c-popover="{
content: 'I am popover content!' header: 'Popover header',
}" content: 'I am popover content!'
> }"
Hover Me >
</CButton> Hover Me
</div> </CButton>
</CCol> </div>
<CCol cols="4"> </CCol>
<div class="my-3 text-center"> <CCol cols="4">
<CButton <div class="my-3 text-center">
variant="primary" <CButton
v-c-popover="{ variant="primary"
header: 'Popover!', v-c-popover="{
content: 'I start <strong>open</strong>', header: 'Popover!',
active: true content: 'I start <strong>open</strong>',
}" active: true
text="Hover me" }"
/> text="Hover me"
</div> />
</CCol> </div>
<CCol cols="4"> </CCol>
<div class="my-3 text-center"> <CCol cols="4">
<CButton <div class="my-3 text-center">
variant="primary" <CButton
v-c-popover.click="{ variant="primary"
header: 'Popover!', v-c-popover.click="{
content: 'I am showing on click and hiding on click outside tooltip!', header: 'Popover!',
placement: 'bottom', content: 'I am showing on click and hiding on click outside tooltip!',
active: true placement: 'bottom'
}" }"
> >
Click me Click me
</CButton> </CButton>
</div> </div>
</CCol> </CCol>
</CRow> </CRow>
</CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Popovers </strong> <i class="fa fa-align-justify"></i>
<strong> Popovers </strong>
<small>placement</small> <small>placement</small>
</CCardHeader> </CCardHeader>
<div class="my-3"> <CCardBody class="my-3">
<CRow> <CRow>
<CCol <CCol
md="4" md="4"
@@ -79,116 +81,8 @@
</CButton> </CButton>
</CCol> </CCol>
</CRow> </CRow>
</div> </CCardBody>
</CCard> </CCard>
<!-- <CCard class="d-sm-down-none">
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
<small>via properties or slots</small>
</CCardHeader>
<CRow>
<CCol md="6" class="py-4 text-center">
<CButton id="exPopover2" variant="primary">Using properties</CButton>
<b-popover target="exPopover2"
title="Prop Examples"
triggers="hover focus"
content="Embedding content using properties is easy">
</b-popover>
</CCol>
<CCol md="6" class="py-4 text-center">
<CButton id="exPopover3" variant="primary">Using slots</CButton>
<b-popover target="exPopover3" triggers="hover focus">
<template slot="title">Content via Slots</template>
Embedding content <span class="text-danger">using slots</span>
affords you <em>greater <strong>control.</strong></em> and
basic HTML support.
</b-popover>
</CCol>
</CRow>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
<small>show</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="popoverButton-sync" variant="primary">I have a popover</CButton>
</div>
<div class="p-2">
<CButton class="px-1" @click="show = !show">Toggle Popover</CButton>
<b-popover :show.sync="show" target="popoverButton-sync" title="Popover">
Hello <strong>World!</strong>
</b-popover>
</div>
</div>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popover </strong>
<small>open/close events</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="popoverButton-event" variant="primary">I have a popover</CButton>
</div>
<div class="p-2">
<CButton class="px-1" @click="onOpen">Open</CButton>
<CButton class="px-1" @click="onClose">Close</CButton>
</div>
<b-popover ref="popover1" target="popoverButton-event" title="Popover">
Hello <strong>World!</strong>
</b-popover>
</div>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popover </strong>
<small>enable/disable events</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="popoverButton-disableevent" variant="primary">I have a popover</CButton>
</div>
<div class="p-2">
<CButton class="px-1" @click="onEnable">Enable</CButton>
<CButton class="px-1" @click="onDisable">Disable</CButton>
</div>
<b-popover ref="popover2" target="popoverButton-disableevent" title="Popover">
Hello <strong>World!</strong>
</b-popover>
</div>
</CCard> -->
<!-- <CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small>
</CCardHeader>
<CRow>
<CCol md="3" class="py-3 text-center">
<CButton v-b-popover.hover.top="'I am Top'"
title="Popover!"
variant="primary">Top</CButton>
</CCol>
<CCol md="3" class="py-3 text-center">
<CButton v-b-popover.hover.left="'I am Left'"
title="Popover!"
variant="primary">Left</CButton>
</CCol>
<CCol md="3" class="py-3 text-center">
<CButton v-b-popover.hover.right="'I am Right'"
title="Popover!"
variant="primary">Right</CButton>
</CCol>
<CCol md="3" class="py-3 text-center">
<CButton v-b-popover.hover.bottom="'I am Bottom'"
title="Popover!"
variant="primary">Bottom</CButton>
</CCol>
</CRow>
</CCard> -->
</div> </div>
</div> </div>
</template> </template>
@@ -203,23 +97,7 @@ export default {
'bottom-start', 'bottom', 'bottom-end', 'bottom-start', 'bottom', 'bottom-end',
'right-start', 'right', 'right-end', 'right-start', 'right', 'right-end',
'left-start', 'left', 'left-end' 'left-start', 'left', 'left-end'
], ]
show: false,
counter: 0
}
},
methods: {
onOpen () {
this.$refs.popover1.$emit('open')
},
onClose () {
this.$refs.popover1.$emit('close')
},
onEnable () {
this.$refs.popover2.$emit('enable')
},
onDisable () {
this.$refs.popover2.$emit('disable')
} }
} }
} }
src/views/base/ProgressBars.vue
+24 -24
View File
@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Progress</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Progress</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -10,7 +10,7 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CProgress :value="counter" :max="max" show-progress animated></CProgress> <CProgress :value="counter" :max="max" show-progress animated></CProgress>
<CProgress class="mt-1" :max="max" show-value> <CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" variant="success"/> <CProgressBar :value="counter*(6/10)" variant="success"/>
@@ -18,13 +18,13 @@
<CProgressBar :value="counter*(1.5/10)" variant="danger"/> <CProgressBar :value="counter*(1.5/10)" variant="danger"/>
</CProgress> </CProgress>
<CButton class="mt-4" @click="clicked">Click me</CButton> <CButton class="mt-4" @click="clicked">Click me</CButton>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small> <i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<h6>No label</h6> <h6>No label</h6>
<CProgress :value="value" :max="max2" class="mb-3"></CProgress> <CProgress :value="value" :max="max2" class="mb-3"></CProgress>
<h6>Value label</h6> <h6>Value label</h6>
@@ -35,39 +35,39 @@
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"></CProgress> <CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"></CProgress>
<h6>Progress label with precision</h6> <h6>Progress label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></CProgress> <CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></CProgress>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small> <i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<h6>Default width</h6> <h6>Default width</h6>
<CProgress :value="value3" class="mb-3"></CProgress> <CProgress :value="value3" class="mb-3"></CProgress>
<h6>Custom widths</h6> <h6>Custom widths</h6>
<CProgress :value="value3" class="w-75 mb-2"></CProgress> <CProgress :value="value3" class="w-75 mb-2"></CProgress>
<CProgress :value="value3" class="w-50 mb-2"></CProgress> <CProgress :value="value3" class="w-50 mb-2"></CProgress>
<CProgress :value="value3" class="w-25"></CProgress> <CProgress :value="value3" class="w-25"></CProgress>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small> <i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<h6>Default height</h6> <h6>Default height</h6>
<CProgress :value="value3" show-progress class="mb-3"></CProgress> <CProgress :value="value3" show-progress class="mb-3"></CProgress>
<h6>Custom heights</h6> <h6>Custom heights</h6>
<CProgress height="2rem" :value="value3" show-progress class="mb-2"></CProgress> <CProgress height="2rem" :value="value3" show-progress class="mb-2"></CProgress>
<CProgress height="20px" :value="value3" show-progress class="mb-2"></CProgress> <CProgress height="20px" :value="value3" show-progress class="mb-2"></CProgress>
<CProgress height="2px" :value="value3"></CProgress> <CProgress height="2px" :value="value3"></CProgress>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small> <i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<div :key="index" v-for="(bar, index) in bars" class="row mb-1"> <div :key="index" v-for="(bar, index) in bars" class="row mb-1">
<div class="col-sm-2">{{ bar.variant }}:</div> <div class="col-sm-2">{{ bar.variant }}:</div>
<div class="col-sm-10 pt-1"> <div class="col-sm-10 pt-1">
@@ -77,13 +77,13 @@
></CProgress> ></CProgress>
</div> </div>
</div> </div>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small> <i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CProgress :value="25" variant="success" :striped="striped" class="mb-2"></CProgress> <CProgress :value="25" variant="success" :striped="striped" class="mb-2"></CProgress>
<CProgress :value="50" variant="info" :striped="striped" class="mb-2"></CProgress> <CProgress :value="50" variant="info" :striped="striped" class="mb-2"></CProgress>
<CProgress :value="75" variant="warning" :striped="striped" class="mb-2"></CProgress> <CProgress :value="75" variant="warning" :striped="striped" class="mb-2"></CProgress>
@@ -91,13 +91,13 @@
<CButton variant="secondary" @click="striped = !striped"> <CButton variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped {{ striped ? 'Remove' : 'Add'}} Striped
</CButton> </CButton>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small> <i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CProgress :value="25" variant="success" striped :animated="animate" class="mb-2"></CProgress> <CProgress :value="25" variant="success" striped :animated="animate" class="mb-2"></CProgress>
<CProgress :value="50" variant="info" striped :animated="animate" class="mb-2"></CProgress> <CProgress :value="50" variant="info" striped :animated="animate" class="mb-2"></CProgress>
<CProgress :value="75" variant="warning" striped :animated="animate" class="mb-2"></CProgress> <CProgress :value="75" variant="warning" striped :animated="animate" class="mb-2"></CProgress>
@@ -105,13 +105,13 @@
<CButton variant="secondary" @click="animate = !animate"> <CButton variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation {{ animate ? 'Stop' : 'Start'}} Animation
</CButton> </CButton>
</div> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small> <i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CProgress :max="max3" class="mb-3"> <CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"></CProgressBar> <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
<CProgressBar variant="success" :value="values[1]"></CProgressBar> <CProgressBar variant="success" :value="values[1]"></CProgressBar>
@@ -132,7 +132,7 @@
<CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar> <CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar>
<CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar> <CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar>
</CProgress> </CProgress>
</div> </CCardBody>
</CCard> </CCard>
</div> </div>
</div> </div>
src/views/base/Switches.vue
+323 -303
View File
@@ -1,445 +1,490 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<!-- <p>myFlag1: {{radio}}</p>
<p>myFlag1: {{myFlag1}}</p>
<p>myFlag2: {{myFlag2}}</p>
<CSwitch v-model="myFlag1"/>
<CSwitch v-model="myFlag2" checked @change="test" /> -->
<CRow> <CRow>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard v-if="true"> <CCard v-if="true">
<CCardHeader slot="header"> <CCardHeader>
<h5> <h5>
Radio switches Radio switches
<CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge> <CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
<CBadge variant="danger" class="float-right">NEW</CBadge> <CBadge variant="danger" class="float-right">NEW</CBadge>
</h5> </h5>
</CCardHeader> </CCardHeader>
<!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/> --> <CCardBody>
<CSwitch class="mx-1" <!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/> -->
:key="key" <CSwitch class="mx-1"
:variant="variant" :key="key"
shape="3d" :variant="variant"
outline="alt" shape="3d"
v-bind="labelIcon" outline="alt"
type="radio" v-bind="labelIcon"
name="radio" type="radio"
v-model="radio" name="radio"
:value="variant" v-model="radio"
v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']" :value="variant"
/> v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
/>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch default Switch default
<CBadge variant="primary">{{checker}}</CBadge> <CBadge variant="primary">{{checker}}</CBadge>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" <CCardBody>
variant="primary" <CSwitch class="mx-1"
checked variant="primary"
name="switch1" checked
v-model="checker" name="switch1"
value="someValue" v-model="checker"
trueValue="yes" value="someValue"
falseValue="no" trueValue="yes"
/> falseValue="no"
<CSwitch class="mx-1" />
ref="totest" <CSwitch class="mx-1"
variant="primary" variant="primary"
checked checked
name="switch1" name="switch1"
:checked="true" :checked="true"
value="someValue" value="someValue"
/> />
<CSwitch class="mx-1" <CSwitch class="mx-1"
:variant="variant" :variant="variant"
checked checked
:key="key" :key="key"
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']" v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
/> />
<CSwitch class="mx-1" variant="primary" disabled /> <CSwitch class="mx-1" variant="primary" disabled />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch pills Switch pills
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="pill"/> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked shape="pill" /> <CSwitch class="mx-1" variant="primary" checked shape="pill"/>
<CSwitch class="mx-1" variant="success" checked shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" /> <CSwitch class="mx-1" variant="success" checked shape="pill" />
<CSwitch class="mx-1" variant="info" checked shape="pill" /> <CSwitch class="mx-1" variant="warning" checked shape="pill" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" /> <CSwitch class="mx-1" variant="info" checked shape="pill" />
<CSwitch class="mx-1" variant="light" checked shape="pill" /> <CSwitch class="mx-1" variant="danger" checked shape="pill" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" /> <CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" disabled shape="pill" /> <CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" disabled shape="pill" />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
3d Switch 3d Switch
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="3d" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked shape="3d" /> <CSwitch class="mx-1" variant="primary" checked shape="3d" />
<CSwitch class="mx-1" variant="success" checked shape="3d" /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" /> <CSwitch class="mx-1" variant="success" checked shape="3d" />
<CSwitch class="mx-1" variant="info" checked shape="3d" /> <CSwitch class="mx-1" variant="warning" checked shape="3d" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" /> <CSwitch class="mx-1" variant="info" checked shape="3d" />
<CSwitch class="mx-1" variant="light" checked shape="3d" /> <CSwitch class="mx-1" variant="danger" checked shape="3d" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" /> <CSwitch class="mx-1" variant="light" checked shape="3d" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" /> <CSwitch class="mx-1" variant="dark" checked shape="3d" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
3d Switch <small><code>disabled</code></small> 3d Switch <small><code>disabled</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="3d" disabled /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="success" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="warning" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="info" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="danger" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="light" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="dark" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" /> <CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
3d Switch <small><code>outline="alt"</code></small> 3d Switch <small><code>outline="alt"</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
3d Switch <small><code>label</code></small> 3d Switch <small><code>label</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
3d Switch <small><code>outline="alt"</code></small> 3d Switch <small><code>outline="alt"</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
3d Switch <small><code>outline="alt"</code></small> 3d Switch <small><code>outline="alt"</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>outline</code></small> Switch <small><code>outline</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked outline /> <CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="mx-1" variant="success" checked outline /> <CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="mx-1" variant="warning" checked outline /> <CSwitch class="mx-1" variant="success" checked outline />
<CSwitch class="mx-1" variant="info" checked outline /> <CSwitch class="mx-1" variant="warning" checked outline />
<CSwitch class="mx-1" variant="danger" checked outline /> <CSwitch class="mx-1" variant="info" checked outline />
<CSwitch class="mx-1" variant="light" checked outline /> <CSwitch class="mx-1" variant="danger" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline /> <CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled /> <CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>outline shape="pill"</code></small> Switch <small><code>outline shape="pill"</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill"/> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" /> <CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
<CSwitch class="mx-1" variant="success" checked outline shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" /> <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" /> <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" /> <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" /> <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" /> <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled /> <CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>outline="alt"</code></small> Switch <small><code>outline="alt"</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline="alt" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked outline="alt" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" /> <CSwitch class="mx-1" variant="success" checked outline="alt" />
<CSwitch class="mx-1" variant="info" checked outline="alt" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" /> <CSwitch class="mx-1" variant="info" checked outline="alt" />
<CSwitch class="mx-1" variant="light" checked outline="alt" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" /> <CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled /> <CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>outline="alt" shape="pill"</code></small> Switch <small><code>outline="alt" shape="pill"</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled /> <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>label</code></small> Switch <small><code>label</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked /> <CSwitch class="mx-1" variant="primary" checked />
<CSwitch class="mx-1" variant="success" checked /> <CSwitch class="mx-1" variant="secondary" checked />
<CSwitch class="mx-1" variant="warning" checked /> <CSwitch class="mx-1" variant="success" checked />
<CSwitch class="mx-1" variant="info" checked /> <CSwitch class="mx-1" variant="warning" checked />
<CSwitch class="mx-1" variant="danger" checked /> <CSwitch class="mx-1" variant="info" checked />
<CSwitch class="mx-1" variant="light" checked /> <CSwitch class="mx-1" variant="danger" checked />
<CSwitch class="mx-1" variant="dark" checked /> <CSwitch class="mx-1" variant="light" checked />
<CSwitch class="mx-1" variant="primary" disabled /> <CSwitch class="mx-1" variant="dark" checked />
<CSwitch class="mx-1" variant="primary" disabled />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>label shape="pill"</code></small> Switch <small><code>label shape="pill"</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="pill" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked shape="pill" /> <CSwitch class="mx-1" variant="primary" checked shape="pill" />
<CSwitch class="mx-1" variant="success" checked shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" /> <CSwitch class="mx-1" variant="success" checked shape="pill" />
<CSwitch class="mx-1" variant="info" checked shape="pill" /> <CSwitch class="mx-1" variant="warning" checked shape="pill" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" /> <CSwitch class="mx-1" variant="info" checked shape="pill" />
<CSwitch class="mx-1" variant="light" checked shape="pill" /> <CSwitch class="mx-1" variant="danger" checked shape="pill" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" /> <CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled /> <CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked outline /> <CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="mx-1" variant="success" checked outline /> <CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="mx-1" variant="warning" checked outline /> <CSwitch class="mx-1" variant="success" checked outline />
<CSwitch class="mx-1" variant="info" checked outline /> <CSwitch class="mx-1" variant="warning" checked outline />
<CSwitch class="mx-1" variant="danger" checked outline /> <CSwitch class="mx-1" variant="info" checked outline />
<CSwitch class="mx-1" variant="light" checked outline /> <CSwitch class="mx-1" variant="danger" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline /> <CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled /> <CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" /> <CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" /> <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" /> <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" /> <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" /> <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" /> <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled /> <CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline="alt" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked outline="alt" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" /> <CSwitch class="mx-1" variant="success" checked outline="alt" />
<CSwitch class="mx-1" variant="info" checked outline="alt" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" /> <CSwitch class="mx-1" variant="info" checked outline="alt" />
<CSwitch class="mx-1" variant="light" checked outline="alt" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" /> <CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled /> <CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled /> <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>label</code></small> Switch <small><code>label</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked dataOn="" dataOff=""/> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
<CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>shape </CCard>shape
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>label shape="pill"</code></small> Switch <small><code>label shape="pill"</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" /> <CCardBody>
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol md="12"> <CCol md="12">
<CCard noWrapper> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Sizes Sizes
</CCardHeader> </CCardHeader>
<CCardBody slot="body" class="p-0"> <CCardBody class="p-0">
<CTable <CTable
hover hover
striped striped
@@ -472,19 +517,9 @@
</template> </template>
<script> <script>
// import CSwitch from './CSwitch'
export default { export default {
name: 'switches', name: 'switches',
computed: { data () {
icon (icon) {
return icon
}
},
// components: {
// CSwitch
// },
data: () => {
return { return {
fields: [ fields: [
{key: 'size'}, {key: 'size'},
@@ -498,10 +533,6 @@ export default {
], ],
checker: 'yes', checker: 'yes',
radio: 'primary', radio: 'primary',
radio2: 'warning',
myFlag1: true,
myFlag2: false,
picker: '',
labelIcon: { labelIcon: {
dataOn: '\u2713', dataOn: '\u2713',
dataOff: '\u2715' dataOff: '\u2715'
@@ -511,17 +542,6 @@ export default {
dataOff: 'no' dataOff: 'no'
} }
} }
},
methods: {
test (a, event) {
console.log(a)
console.log(typeof a)
console.log(event)
},
test2 () {
console.log(this.$refs.totest)
this.$refs.totest.$forceUpdate()
}
} }
} }
</script> </script>
src/views/base/Table.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<CCard :header="caption"> <CCard :header="caption" bodyWrapper>
<CTable <CTable
:hover="hover" :hover="hover"
:striped="striped" :striped="striped"
src/views/base/Tables.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol sm="12"> <CCol sm="12">
<CCard header="CTable power presentation"> <CCard header="CTable power presentation" bodyWrapper>
<CTable :items="items.slice(0)" <CTable :items="items.slice(0)"
:fields="fields" :fields="fields"
:perPage="6" :perPage="6"
src/views/base/Tabs.vue
+168 -158
View File
@@ -3,190 +3,200 @@
<CRow> <CRow>
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Tabs Tabs
</CCardHeader> </CCardHeader>
<CTabs addTabClasses="mt-1"> <CCardBody>
<CTab title="Home" active> <CTabs addTabClasses="mt-1">
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore <CTab title="Home" active>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
<CTab title="Profile" > </CTab>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore <CTab title="Profile" >
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
<CTab title="Disabled" disabled> </CTab>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore <CTab title="Disabled" disabled>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
</CTabs> </CTab>
</CTabs>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Tabs Tabs
</CCardHeader> </CCardHeader>
<CTabs <CCardBody>
pills <CTabs
addNavClasses="mb-3" pills
> addNavClasses="mb-3"
<CTab title="Home" active> >
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore <CTab title="Home" active>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
<CTab title="Profile" > </CTab>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore <CTab title="Profile" >
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
<CTab title="Disabled" disabled> </CTab>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore <CTab title="Disabled" disabled>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
</CTabs> </CTab>
</CTabs>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Tabs with icons Tabs with icons
</CCardHeader> </CCardHeader>
<CTabs addTabClasses="mt-1"> <CCardBody>
<CTab active> <CTabs addTabClasses="mt-1">
<template slot="title"> <CTab active>
<i class="icon-calculator"></i> <template slot="title">
</template> <i class="icon-calculator"></i>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore </template>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
<CTab> </CTab>
<template slot="title"> <CTab>
<i class="icon-basket-loaded"></i> <template slot="title">
</template> <i class="icon-basket-loaded"></i>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore </template>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
<CTab> </CTab>
<template slot="title"> <CTab>
<i class="icon-pie-chart"></i> <template slot="title">
</template> <i class="icon-pie-chart"></i>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore </template>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
</CTabs> </CTab>
</CTabs>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Tabs with icons Tabs with icons
</CCardHeader> </CCardHeader>
<CTabs <CCardBody>
addTabClasses="mt-1" <CTabs
card addTabClasses="mt-1"
> card
<CTab active> >
<template slot="title"> <CTab active>
<i class="icon-calculator"></i> {{tabs[0]}} <template slot="title">
</template> <i class="icon-calculator"></i> {{tabs[0]}}
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore </template>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
<CTab> </CTab>
<template slot="title"> <CTab>
<i class="icon-basket-loaded"></i> {{tabs[1]}} <template slot="title">
</template> <i class="icon-basket-loaded"></i> {{tabs[1]}}
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore </template>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
<CTab> </CTab>
<template slot="title"> <CTab>
<i class="icon-pie-chart"></i> {{tabs[2]}} <template slot="title">
</template> <i class="icon-pie-chart"></i> {{tabs[2]}}
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore </template>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
</CTabs> </CTab>
</CTabs>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
Tabs vertical Tabs vertical
</CCardHeader> </CCardHeader>
<CTabs <CCardBody>
card <CTabs
pills card
vertical="4" pills
v-model="tabIndex[1]" vertical="4"
> v-model="tabIndex[1]"
<CTab active> >
<template slot="title"> <CTab active>
<i class="icon-calculator"></i> {{tabs[0]}} <template slot="title">
</template> <i class="icon-calculator"></i> {{tabs[0]}}
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore </template>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
<CTab> </CTab>
<template slot="title"> <CTab>
<i class="icon-basket-loaded"></i> {{tabs[1]}} <template slot="title">
</template> <i class="icon-basket-loaded"></i> {{tabs[1]}}
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore </template>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
<CTab> </CTab>
<template slot="title"> <CTab>
<i class="icon-pie-chart"></i> {{tabs[2]}} <template slot="title">
</template> <i class="icon-pie-chart"></i> {{tabs[2]}}
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore </template>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
</CTab> officia deserunt mollit anim id est laborum.
</CTabs> </CTab>
</CTabs>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/base/Tooltips.vue
+49 -135
View File
@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Tooltips </strong> <strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small> <small><code>v-c-tooltip</code> directive</small>
@@ -12,129 +12,63 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<CRow> <CCardBody>
<CCol cols="4"> <CRow>
<div class="text-center my-3"> <CCol cols="4">
<CButton v-c-tooltip.hover.click="'I am a tooltip!'"> <div class="text-center my-3">
Hover Me <CButton v-c-tooltip.hover.click="'I am a tooltip!'">
</CButton> Hover Me
</div> </CButton>
</CCol> </div>
<CCol cols="4"> </CCol>
<div class="text-center my-3"> <CCol cols="4">
<CButton v-c-tooltip="{content: 'I start open!', active:true }"> <div class="text-center my-3">
Hover me <CButton v-c-tooltip="{content: 'I start open!', active:true }">
</CButton> Hover me
</div> </CButton>
</CCol> </div>
<CCol cols="4"> </CCol>
<div class="text-center my-3"> <CCol cols="4">
<CButton v-c-tooltip.click=" <div class="text-center my-3">
'I am showing on click and hiding on click outside tooltip!' <CButton v-c-tooltip.click="
"> 'I am showing on click and hiding on click outside tooltip!'
Click me ">
</CButton> Click me
</div> </CButton>
</CCol> </div>
</CRow> </CCol>
</CRow>
</CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Tooltips </strong> <strong> Tooltips </strong>
<small>placement</small> <small>placement</small>
</CCardHeader> </CCardHeader>
<div class="my-3"> <CCardBody>
<CRow> <div class="my-3">
<CCol <CRow>
md="4" <CCol
class="py-4 text-center" md="4"
v-for="placement in placements" class="py-4 text-center"
:key="placement" v-for="placement in placements"
> :key="placement"
<CButton
variant="primary"
v-c-tooltip.hover="{
content: `Placement ${placement}`,
placement
}"
> >
{{ placement }} <CButton
</CButton> variant="primary"
</CCol> v-c-tooltip.hover="{
</CRow> content: `Placement ${placement}`,
</div> placement
</CCard> }"
<!-- <CRow> >
<CCol md="6" class="py-4 text-center"> {{ placement }}
<CButton id="exButton1" variant="outline-success">Live chat</CButton> </CButton>
</CCol> </CCol>
<CCol md="6" class="py-4 text-center"> </CRow>
<CButton id="exButton2" variant="outline-success">Html chat</CButton>
</CCol>
</CRow>
<b-tooltip target="exButton1" title="Online!"></b-tooltip>
<b-tooltip target="exButton2" placement="bottom">
Hello <strong>World!</strong>
</b-tooltip>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>show</code> prop</small>
</CCardHeader>
<div class="text-center">
<CButton id="tooltipButton-1" variant="primary">I have a tooltip</CButton>
<br><br>
<CButton @click="show = !show">Toggle Tooltip</CButton>
<b-tooltip :show.sync="show" target="tooltipButton-1" placement="top">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>open close</code> events</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="tooltipButton-showEvent" variant="primary">I have a tooltip</CButton>
</div> </div>
<div class="p-2"> </CCardBody>
<CButton class="px-1 mr-1" @click="onOpen">Open</CButton>
<CButton class="px-1" @click="onClose">Close</CButton>
</div>
<b-tooltip ref="tooltip" target="tooltipButton-showEvent">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</CCard> </CCard>
<CCard id="boundary">
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>enable disable</code> events</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="tooltipButton-disable" variant="primary">I have a tooltip</CButton>
</div>
<div class="p-2">
<CButton @click="disabled = !disabled" class="mr-1">
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
</CButton>
<CButton @click="disableByRef">
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by $ref event
</CButton>
<b-tooltip :disabled.sync="disabled" ref="tooltip2" target="tooltipButton-disable">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</div>
</CCard> -->
</div> </div>
</div> </div>
</template> </template>
@@ -151,26 +85,6 @@ export default {
'left-start', 'left', 'left-end' 'left-start', 'left', 'left-end'
] ]
} }
},
methods: {
// onOpen () {
// this.$refs.tooltip.$emit('open')
// },
// onClose () {
// this.$refs.tooltip.$emit('close')
// },
// disableByRef () {
// if (this.disabled) {
// this.$refs.tooltip2.$emit('enable')
// } else {
// this.$refs.tooltip2.$emit('disable')
// }
// },
// test () {
// this.show = !this.show
// this.placement = 'right'
// this.smh = 200
// }
} }
} }
</script> </script>
src/views/buttons/BrandButtons.vue
+267 -261
View File
@@ -3,282 +3,288 @@
<CRow> <CRow>
<CCol cols="12"> <CCol cols="12">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<strong>Brand Button</strong> <strong>Brand Button</strong>
</CCardHeader> </CCardHeader>
<small>Usage </small><code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code> <CCardBody>
<hr/> <small>Usage </small><code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6> <hr/>
<p> <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<CButton size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton> <p>
<CButton size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton> <CButton size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<CButton size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton> <CButton size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<CButton size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton> <CButton size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<CButton size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton> <CButton size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<CButton size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton> <CButton size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<CButton size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton> <CButton size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<CButton size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton> <CButton size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<CButton size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton> <CButton size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<CButton size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton> <CButton size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<CButton size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton> <CButton size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<CButton size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton> <CButton size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<CButton size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton> <CButton size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<CButton size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton> <CButton size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<CButton size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton> <CButton size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<CButton size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton> <CButton size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<CButton size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton> <CButton size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<CButton size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton> <CButton size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<CButton size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton> <CButton size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<CButton size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton> <CButton size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<CButton size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton> <CButton size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<CButton size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton> <CButton size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<CButton size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton> <CButton size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<CButton size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton> <CButton size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<CButton size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton> <CButton size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
</p> <CButton size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
<h6>Size Normal</h6> </p>
<p> <h6>Size Normal</h6>
<CButton variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton> <p>
<CButton variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton> <CButton variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<CButton variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton> <CButton variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<CButton variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton> <CButton variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<CButton variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton> <CButton variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<CButton variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton> <CButton variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<CButton variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton> <CButton variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<CButton variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton> <CButton variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<CButton variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton> <CButton variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<CButton variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton> <CButton variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<CButton variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton> <CButton variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<CButton variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton> <CButton variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<CButton variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton> <CButton variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<CButton variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton> <CButton variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<CButton variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton> <CButton variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<CButton variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton> <CButton variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<CButton variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton> <CButton variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<CButton variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton> <CButton variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<CButton variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton> <CButton variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<CButton variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton> <CButton variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<CButton variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton> <CButton variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<CButton variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton> <CButton variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<CButton variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton> <CButton variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<CButton variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton> <CButton variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<CButton variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton> <CButton variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
</p> <CButton variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6> </p>
<p> <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<CButton size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton> <p>
<CButton size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton> <CButton size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<CButton size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton> <CButton size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<CButton size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton> <CButton size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<CButton size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton> <CButton size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<CButton size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton> <CButton size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<CButton size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton> <CButton size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<CButton size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton> <CButton size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<CButton size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton> <CButton size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<CButton size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton> <CButton size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<CButton size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton> <CButton size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<CButton size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton> <CButton size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<CButton size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton> <CButton size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<CButton size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton> <CButton size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<CButton size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton> <CButton size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<CButton size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton> <CButton size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<CButton size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton> <CButton size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<CButton size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton> <CButton size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<CButton size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton> <CButton size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<CButton size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton> <CButton size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<CButton size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton> <CButton size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<CButton size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton> <CButton size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<CButton size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton> <CButton size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<CButton size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton> <CButton size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<CButton size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton> <CButton size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
</p> <CButton size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
</p>
</CCardBody>
</CCard> </CCard>
</CCol><!--/.col--> </CCol><!--/.col-->
<CCol cols="12"> <CCol cols="12">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<strong>Brand Button </strong> <small>Icons only</small> <strong>Brand Button </strong> <small>Icons only</small>
</CCardHeader> </CCardHeader>
<small>Usage </small> <code>&lt;CButton variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code> <CCardBody>
<hr/> <small>Usage </small> <code>&lt;CButton variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6> <hr/>
<p> <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<CButton size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton> <p>
<CButton size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton> <CButton size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
<CButton size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton> <CButton size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
<CButton size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton> <CButton size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
<CButton size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton> <CButton size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
<CButton size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton> <CButton size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
<CButton size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton> <CButton size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
<CButton size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton> <CButton size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
<CButton size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton> <CButton size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
<CButton size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton> <CButton size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
<CButton size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton> <CButton size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<CButton size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton> <CButton size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
<CButton size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton> <CButton size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
<CButton size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton> <CButton size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
<CButton size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton> <CButton size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
<CButton size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton> <CButton size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
<CButton size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton> <CButton size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
<CButton size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton> <CButton size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
<CButton size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton> <CButton size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
<CButton size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton> <CButton size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
<CButton size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton> <CButton size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
<CButton size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton> <CButton size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
<CButton size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton> <CButton size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
<CButton size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton> <CButton size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
<CButton size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton> <CButton size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
</p> <CButton size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
<h6>Size Normal</h6> </p>
<p> <h6>Size Normal</h6>
<CButton variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton> <p>
<CButton variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton> <CButton variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
<CButton variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton> <CButton variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
<CButton variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton> <CButton variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
<CButton variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton> <CButton variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
<CButton variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton> <CButton variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
<CButton variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton> <CButton variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
<CButton variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton> <CButton variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
<CButton variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton> <CButton variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
<CButton variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton> <CButton variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
<CButton variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton> <CButton variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<CButton variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton> <CButton variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
<CButton variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton> <CButton variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
<CButton variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton> <CButton variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
<CButton variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton> <CButton variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
<CButton variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton> <CButton variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
<CButton variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton> <CButton variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
<CButton variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton> <CButton variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
<CButton variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton> <CButton variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
<CButton variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton> <CButton variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
<CButton variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton> <CButton variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
<CButton variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton> <CButton variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
<CButton variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton> <CButton variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
<CButton variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton> <CButton variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
<CButton variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton> <CButton variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
</p> <CButton variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6> </p>
<p> <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<CButton size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton> <p>
<CButton size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton> <CButton size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
<CButton size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton> <CButton size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
<CButton size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton> <CButton size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
<CButton size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton> <CButton size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
<CButton size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton> <CButton size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
<CButton size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton> <CButton size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
<CButton size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton> <CButton size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
<CButton size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton> <CButton size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
<CButton size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton> <CButton size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
<CButton size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton> <CButton size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<CButton size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton> <CButton size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
<CButton size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton> <CButton size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
<CButton size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton> <CButton size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
<CButton size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton> <CButton size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
<CButton size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton> <CButton size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
<CButton size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton> <CButton size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
<CButton size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton> <CButton size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
<CButton size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton> <CButton size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
<CButton size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton> <CButton size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
<CButton size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton> <CButton size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
<CButton size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton> <CButton size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
<CButton size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton> <CButton size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
<CButton size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton> <CButton size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
<CButton size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton> <CButton size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
</p> <CButton size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
</p>
</CCardBody>
</CCard> </CCard>
</CCol><!--/.col--> </CCol><!--/.col-->
<CCol cols="12"> <CCol cols="12">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<strong>Brand Button </strong> <small>Text only</small> <strong>Brand Button </strong> <small>Text only</small>
</CCardHeader> </CCardHeader>
<small>Usage </small> <code>&lt;CButton variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code> <CCardBody>
<hr/> <small>Usage </small> <code>&lt;CButton variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6> <hr/>
<p> <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<CButton size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton> <p>
<CButton size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton> <CButton size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
<CButton size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton> <CButton size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
<CButton size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton> <CButton size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
<CButton size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton> <CButton size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
<CButton size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton> <CButton size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
<CButton size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton> <CButton size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
<CButton size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton> <CButton size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
<CButton size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton> <CButton size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
<CButton size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton> <CButton size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
<CButton size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton> <CButton size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
<CButton size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton> <CButton size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
<CButton size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton> <CButton size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
<CButton size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton> <CButton size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
<CButton size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton> <CButton size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
<CButton size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton> <CButton size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
<CButton size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton> <CButton size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
<CButton size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton> <CButton size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
<CButton size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton> <CButton size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
<CButton size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton> <CButton size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
<CButton size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton> <CButton size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
<CButton size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton> <CButton size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
<CButton size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton> <CButton size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
<CButton size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton> <CButton size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
<CButton size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton> <CButton size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
</p> <CButton size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
<h6>Size Normal</h6> </p>
<p> <h6>Size Normal</h6>
<CButton variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton> <p>
<CButton variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton> <CButton variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
<CButton variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton> <CButton variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
<CButton variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton> <CButton variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
<CButton variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton> <CButton variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
<CButton variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton> <CButton variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
<CButton variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton> <CButton variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
<CButton variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton> <CButton variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
<CButton variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton> <CButton variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
<CButton variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton> <CButton variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
<CButton variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton> <CButton variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
<CButton variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton> <CButton variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
<CButton variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton> <CButton variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
<CButton variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton> <CButton variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
<CButton variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton> <CButton variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
<CButton variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton> <CButton variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
<CButton variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton> <CButton variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
<CButton variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton> <CButton variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
<CButton variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton> <CButton variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
<CButton variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton> <CButton variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
<CButton variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton> <CButton variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
<CButton variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton> <CButton variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
<CButton variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton> <CButton variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
<CButton variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton> <CButton variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
<CButton variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton> <CButton variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
</p> <CButton variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6> </p>
<p> <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<CButton size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton> <p>
<CButton size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton> <CButton size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
<CButton size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton> <CButton size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
<CButton size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton> <CButton size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
<CButton size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton> <CButton size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
<CButton size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton> <CButton size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
<CButton size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton> <CButton size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
<CButton size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton> <CButton size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
<CButton size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton> <CButton size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
<CButton size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton> <CButton size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
<CButton size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton> <CButton size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
<CButton size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton> <CButton size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
<CButton size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton> <CButton size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
<CButton size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton> <CButton size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
<CButton size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton> <CButton size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
<CButton size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton> <CButton size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
<CButton size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton> <CButton size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
<CButton size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton> <CButton size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
<CButton size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton> <CButton size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
<CButton size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton> <CButton size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
<CButton size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton> <CButton size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
<CButton size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton> <CButton size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
<CButton size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton> <CButton size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
<CButton size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton> <CButton size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
<CButton size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton> <CButton size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
</p> <CButton size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
</p>
</CCardBody>
</CCard> </CCard>
</CCol><!--/.col--> </CCol><!--/.col-->
</CRow><!--/.row--> </CRow><!--/.row-->
src/views/buttons/ButtonGroups.vue
+146 -136
View File
@@ -4,7 +4,7 @@
<CRow> <CRow>
<CCol cols="12" > <CCol cols="12" >
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -12,95 +12,103 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CButtonGroup> <div>
<CButton>One</CButton> <CButtonGroup>
<CButton>Two</CButton> <CButton>One</CButton>
<CButton>Three</CButton> <CButton>Two</CButton>
<CButton>Four</CButton> <CButton>Three</CButton>
<CButton class="d-sm-down-none">Five</CButton> <CButton>Four</CButton>
</CButtonGroup> <CButton class="d-sm-down-none">Five</CButton>
<br><br> </CButtonGroup>
<CButtonGroup> <br><br>
<CButton class="d-sm-down-none" variant="success">Success</CButton> <CButtonGroup>
<CButton variant="info">Info</CButton> <CButton class="d-sm-down-none" variant="success">Success</CButton>
<CButton variant="warning">Warn</CButton> <CButton variant="info">Info</CButton>
<CButton class="d-sm-down-none" variant="primary">Primary</CButton> <CButton variant="warning">Warn</CButton>
<CButton variant="danger">Danger</CButton> <CButton class="d-sm-down-none" variant="primary">Primary</CButton>
<CButton variant="link">Link</CButton> <CButton variant="danger">Danger</CButton>
</CButtonGroup> <CButton variant="link">Link</CButton>
</div> </CButtonGroup>
</div>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12"> <CCol cols="12">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>sizing <i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CButtonGroup> <div>
<CButton>Left</CButton> <CButtonGroup>
<CButton>Middle</CButton> <CButton>Left</CButton>
<CButton>Right</CButton> <CButton>Middle</CButton>
</CButtonGroup> <CButton>Right</CButton>
<br><br> </CButtonGroup>
<CButtonGroup size="sm"> <br><br>
<CButton>Left</CButton> <CButtonGroup size="sm">
<CButton>Middle</CButton> <CButton>Left</CButton>
<CButton>Right</CButton> <CButton>Middle</CButton>
</CButtonGroup> <CButton>Right</CButton>
<br><br> </CButtonGroup>
<CButtonGroup size="lg"> <br><br>
<CButton>Left</CButton> <CButtonGroup size="lg">
<CButton>Middle</CButton> <CButton>Left</CButton>
<CButton>Right</CButton> <CButton>Middle</CButton>
</CButtonGroup> <CButton>Right</CButton>
</div> </CButtonGroup>
</div>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12"> <CCol cols="12">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CButtonGroup> <div>
<CButton class="d-sm-down-none">Button 1</CButton> <CButtonGroup>
<CButton class="d-sm-down-none">Button 2</CButton> <CButton class="d-sm-down-none">Button 1</CButton>
<CDropdown right text="Menu" variant="success"> <CButton class="d-sm-down-none">Button 2</CButton>
<CDropdownItem>Item 1</CDropdownItem> <CDropdown right text="Menu" variant="success">
<CDropdownItem>Item 2</CDropdownItem> <CDropdownItem>Item 1</CDropdownItem>
<CDropdownDivider></CDropdownDivider> <CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem> <CDropdownDivider></CDropdownDivider>
</CDropdown> <CDropdownItem>Item 3</CDropdownItem>
<CButton class="d-sm-down-none">Button 3</CButton> </CDropdown>
<CDropdown right split text="Split Menu" variant="info"> <CButton class="d-sm-down-none">Button 3</CButton>
<CDropdownItem>Item 1</CDropdownItem> <CDropdown right split text="Split Menu" variant="info">
<CDropdownItem>Item 2</CDropdownItem> <CDropdownItem>Item 1</CDropdownItem>
<CDropdownDivider></CDropdownDivider> <CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem> <CDropdownDivider></CDropdownDivider>
</CDropdown> <CDropdownItem>Item 3</CDropdownItem>
</CButtonGroup> </CDropdown>
</div> </CButtonGroup>
</div>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12"> <CCol cols="12">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation <i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CButtonGroup vertical> <div>
<CButton>Top</CButton> <CButtonGroup vertical>
<CButton>Middle</CButton> <CButton>Top</CButton>
<CButton>Bottom</CButton> <CButton>Middle</CButton>
</CButtonGroup> <CButton>Bottom</CButton>
</div> </CButtonGroup>
</div>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12"> <CCol cols="12">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small> <i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -108,74 +116,76 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CButtonToolbar key-nav aria-label="Toolbar with button groups"> <div>
<CButtonGroup class="mx-1"> <CButtonToolbar key-nav aria-label="Toolbar with button groups">
<CButton class="d-sm-down-none">&laquo;</CButton> <CButtonGroup class="mx-1">
<CButton>&lsaquo;</CButton> <CButton class="d-sm-down-none">&laquo;</CButton>
</CButtonGroup> <CButton>&lsaquo;</CButton>
<CButtonGroup class="mx-1"> </CButtonGroup>
<CButton class="d-sm-down-none">Edit</CButton> <CButtonGroup class="mx-1">
<CButton>Undo</CButton> <CButton class="d-sm-down-none">Edit</CButton>
<CButton>Redo</CButton> <CButton>Undo</CButton>
</CButtonGroup> <CButton>Redo</CButton>
<CButtonGroup class="mx-1"> </CButtonGroup>
<CButton>&rsaquo;</CButton> <CButtonGroup class="mx-1">
<CButton class="d-sm-down-none">&raquo;</CButton> <CButton>&rsaquo;</CButton>
</CButtonGroup> <CButton class="d-sm-down-none">&raquo;</CButton>
</CButtonToolbar> </CButtonGroup>
</div> </CButtonToolbar>
<hr class="d-sm-down-none"/> </div>
<div> <hr class="d-sm-down-none"/>
<CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none"> <div>
<CButtonGroup size="sm" class="mx-1"> <CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
<CButton>New</CButton> <CButtonGroup size="sm" class="mx-1">
<CButton>Edit</CButton> <CButton>New</CButton>
</CButtonGroup> <CButton>Edit</CButton>
<CFormInput </CButtonGroup>
class="mb-0 w-25 mx-1" <CFormInput
size="sm" class="mb-0 w-25 mx-1"
prepend="$" size="sm"
append=".00" prepend="$"
value="100" append=".00"
/> value="100"
<CFormSelect />
class="mb-0 w-25 mx-1" <CFormSelect
size="sm" class="mb-0 w-25 mx-1"
prepend="Size" size="sm"
value="Medium" prepend="Size"
:options="['Large','Medium','Small']" value="Medium"
custom :options="['Large','Medium','Small']"
/> custom
<CButtonGroup size="sm" class="mx-1"> />
<CButton>Save</CButton> <CButtonGroup size="sm" class="mx-1">
<CButton>Cancel</CButton> <CButton>Save</CButton>
</CButtonGroup> <CButton>Cancel</CButton>
</CButtonToolbar> </CButtonGroup>
</div> </CButtonToolbar>
<hr/> </div>
<div> <hr/>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu"> <div>
<CButtonGroup class="mx-1 d-sm-down-none"> <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButton>New</CButton> <CButtonGroup class="mx-1 d-sm-down-none">
<CButton>Edit</CButton> <CButton>New</CButton>
<CButton>Undo</CButton> <CButton>Edit</CButton>
</CButtonGroup> <CButton>Undo</CButton>
<CDropdown </CButtonGroup>
class="mx-1" <CDropdown
placement="bottom-end" class="mx-1"
button-content="Menu" placement="bottom-end"
> buttonContent="Menu"
<CDropdownItem>Item 1</CDropdownItem> >
<CDropdownItem>Item 2</CDropdownItem> <CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem> <CDropdownItem>Item 2</CDropdownItem>
</CDropdown> <CDropdownItem>Item 3</CDropdownItem>
<CButtonGroup class="mx-1"> </CDropdown>
<CButton>Save</CButton> <CButtonGroup class="mx-1">
<CButton>Cancel</CButton> <CButton>Save</CButton>
</CButtonGroup> <CButton>Cancel</CButton>
</CButtonToolbar> </CButtonGroup>
</div> </CButtonToolbar>
</div>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/buttons/Dropdowns.vue
+215 -213
View File
@@ -4,7 +4,7 @@
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Dropdown</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Dropdown</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -12,230 +12,232 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CDropdown id="ddown1" button-content="Dropdown Button" class="m-2"> <div>
<CDropdown id="ddown1" buttonContent="Dropdown Button" class="m-2">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</div>
<!-- <div>
<CDropdown id="ddown-buttons" buttonContent="Dropdown using buttons as menu items" class="m-2">
<CDropdownItem>I'm a button</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
</CDropdown>
</div> -->
<div>
<CDropdown id="ddown-divider" buttonContent="Dropdown with divider" class="m-2">
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Separated Item</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown id="ddown-header" buttonContent="Dropdown with header" class="m-2">
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second Item</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown-left" buttonContent="Left align" variant="primary" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-right"
placement="bottom-end"
buttonContent="Right align"
variant="primary"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown id="ddown-dropup"
buttonContent="Drop-Up"
variant="info"
class="m-2"
dropup
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown id="ddown-offset"
:offset="25"
buttonContent="Offset Dropdown"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown id="ddown-split" split buttonContent="Split Dropdown" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown variant="link"
size="lg"
buttonContent="&#x1f50d;<span class='sr-only'>Search</span>"
no-caret
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown-lg" size="lg" buttonContent="Large" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-lg-split" size="lg" split buttonContent="Large Split" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<br>
<CDropdown id="ddown-sm" size="sm" buttonContent="Small" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-sm-split" size="sm" split buttonContent="Small Split" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown-aria" buttonContent="Dropdown ARIA" variant="primary" class="m-2">
<div role="group" aria-lableledby="header1">
<CDropdownHeader id="header1">Groups</CDropdownHeader>
<CDropdownItem aria-describedby="header1">Add</CDropdownItem>
<CDropdownItem aria-describedby="header1">Delete</CDropdownItem>
</div>
<div role="group" aria-lableledby="header2">
<CDropdownHeader id="header2">Users</CDropdownHeader>
<CDropdownItem aria-describedby="header2">Add</CDropdownItem>
<CDropdownItem aria-describedby="header2">Delete</CDropdownItem>
</div>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
</CCardHeader>
<CCardBody>
<CDropdown size="sm" id="ddown_primary" buttonContent="Primary" variant="primary" class="m-0">
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem> <CDropdownItem>Third Action</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown> </CDropdown>
</div> <CDropdown size="sm" id="ddown_secondary" buttonContent="Secondary" variant="secondary" class="m-0">
<!-- <div> <CDropdownItem>First Action</CDropdownItem>
<CDropdown id="ddown-buttons" button-content="Dropdown using buttons as menu items" class="m-2"> <CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>I'm a button</CDropdownItem> <CDropdownItem>Third Action</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
</CDropdown> </CDropdown>
</div> --> <CDropdown size="sm" id="ddown_success" buttonContent="Success" variant="success" class="m-0">
<div> <CDropdownItem>First Action</CDropdownItem>
<CDropdown id="ddown-divider" button-content="Dropdown with divider" class="m-2"> <CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>First item</CDropdownItem> <CDropdownItem>Third Action</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Separated Item</CDropdownItem>
</CDropdown> </CDropdown>
</div> <CDropdown size="sm" id="ddown_warning" buttonContent="Warning" variant="warning" class="m-0">
<div> <CDropdownItem>First Action</CDropdownItem>
<CDropdown id="ddown-header" button-content="Dropdown with header" class="m-2"> <CDropdownItem>Second Action</CDropdownItem>
<CDropdownHeader>Dropdown header</CDropdownHeader> <CDropdownItem>Third Action</CDropdownItem>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second Item</CDropdownItem>
</CDropdown> </CDropdown>
</div> <CDropdown size="sm" id="ddown_danger" buttonContent="Danger" variant="danger" class="m-0">
</CCard> <CDropdownItem>First Action</CDropdownItem>
</CCol> <CDropdownItem>Second Action</CDropdownItem>
<CCol cols="12" md="6"> <CDropdownItem>Third Action</CDropdownItem>
<CCard
>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
</CCardHeader>
<div>
<CDropdown id="ddown-left" button-content="Left align" variant="primary" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown> </CDropdown>
<CDropdown id="ddown-right" <CDropdown size="sm" id="ddown_info" buttonContent="Info" variant="info" class="m-0">
placement="bottom-end" <CDropdownItem>First Action</CDropdownItem>
button-content="Right align" <CDropdownItem>Second Action</CDropdownItem>
variant="primary" <CDropdownItem>Third Action</CDropdownItem>
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown> </CDropdown>
</div> <CDropdown size="sm" id="ddown_light" buttonContent="Light" variant="light" class="m-0">
<div> <CDropdownItem>First Action</CDropdownItem>
<CDropdown id="ddown-dropup" <CDropdownItem>Second Action</CDropdownItem>
button-content="Drop-Up" <CDropdownItem>Third Action</CDropdownItem>
variant="info"
class="m-2"
dropup
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown> </CDropdown>
</div> <CDropdown size="sm" id="ddown_dark" buttonContent="Dark" variant="dark" class="m-0">
<div> <CDropdownItem>First Action</CDropdownItem>
<CDropdown id="ddown-offset" <CDropdownItem>Second Action</CDropdownItem>
:offset="25" <CDropdownItem>Third Action</CDropdownItem>
button-content="Offset Dropdown"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown> </CDropdown>
</div> <CDropdown size="sm" id="ddown_link" buttonContent="Link" variant="link" class="m-0">
<div> <CDropdownItem>First Action</CDropdownItem>
<CDropdown id="ddown-split" split button-content="Split Dropdown" class="m-2"> <CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Third Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown> </CDropdown>
</div> </CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
</CCardHeader>
<div>
<CDropdown variant="link"
size="lg"
button-content="&#x1f50d;<span class='sr-only'>Search</span>"
no-caret
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
</CCardHeader>
<div>
<CDropdown id="ddown-lg" size="lg" button-content="Large" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-lg-split" size="lg" split button-content="Large Split" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<br>
<CDropdown id="ddown-sm" size="sm" button-content="Small" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-sm-split" size="sm" split button-content="Small Split" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
</CCardHeader>
<div>
<CDropdown id="ddown-aria" button-content="Dropdown ARIA" variant="primary" class="m-2">
<div role="group" aria-lableledby="header1">
<CDropdownHeader id="header1">Groups</CDropdownHeader>
<CDropdownItem aria-describedby="header1">Add</CDropdownItem>
<CDropdownItem aria-describedby="header1">Delete</CDropdownItem>
</div>
<div role="group" aria-lableledby="header2">
<CDropdownHeader id="header2">Users</CDropdownHeader>
<CDropdownItem aria-describedby="header2">Add</CDropdownItem>
<CDropdownItem aria-describedby="header2">Delete</CDropdownItem>
</div>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
</CDropdown>
</div>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
</CCardHeader>
<CDropdown size="sm" id="ddown_primary" button-content="Primary" variant="primary" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_secondary" button-content="Secondary" variant="secondary" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_success" button-content="Success" variant="success" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_warning" button-content="Warning" variant="warning" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_danger" button-content="Danger" variant="danger" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_info" button-content="Info" variant="info" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_light" button-content="Light" variant="light" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_dark" button-content="Dark" variant="dark" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_link" button-content="Link" variant="link" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/buttons/StandardButtons.vue
+67 -61
View File
@@ -1,10 +1,10 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<CCard noWrapper> <CCard >
<CCardHeader slot="header"> <CCardHeader>
<strong>Standard buttons</strong> <strong>Standard buttons</strong>
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="align-items-center"> <CRow class="align-items-center">
<CCol cols="12" xl class="mb-3 mb-xl-0"> <CCol cols="12" xl class="mb-3 mb-xl-0">
Normal Normal
@@ -103,11 +103,11 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper> <CCard >
<CCardHeader slot="header"> <CCardHeader>
<strong>Outline Buttons</strong> <strong>Outline Buttons</strong>
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<p> <p>
Use <code>variant="outline-*"</code> prop Use <code>variant="outline-*"</code> prop
</p> </p>
@@ -203,11 +203,11 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper> <CCard >
<CCardHeader slot="header"> <CCardHeader>
<strong>Ghost Buttons</strong> <strong>Ghost Buttons</strong>
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<p> <p>
Use Use
<code>ghost</code> prop for ghost buttons. <code>ghost</code> prop for ghost buttons.
@@ -304,11 +304,11 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper> <CCard >
<CCardHeader slot="header"> <CCardHeader>
<strong>Square Buttons</strong> <strong>Square Buttons</strong>
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<p> <p>
Use Use
<code>square</code> prop for square buttons. <code>square</code> prop for square buttons.
@@ -411,11 +411,11 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper> <CCard >
<CCardHeader slot="header"> <CCardHeader>
<strong>Pill Buttons</strong> <strong>Pill Buttons</strong>
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<p> <p>
Use Use
<code>pill</code> prop for pill buttons. <code>pill</code> prop for pill buttons.
@@ -518,11 +518,11 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper> <CCard >
<CCardHeader slot="header"> <CCardHeader>
<strong>Sizes</strong> <strong>Sizes</strong>
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p> <p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
<CRow class="align-items-center"> <CRow class="align-items-center">
<CCol cols="2" xl class="mb-3 mb-xl-0"> <CCol cols="2" xl class="mb-3 mb-xl-0">
@@ -586,12 +586,12 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper> <CCard >
<CCardHeader slot="header"> <CCardHeader>
<strong>With Icons</strong> <strong>With Icons</strong>
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="align-items-center mt-3"> <CRow class="align-items-center">
<CCol sm xs="12" class="text-center mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton variant="primary"> <CButton variant="primary">
<i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button <i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button
@@ -621,57 +621,63 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<strong>Toggle pressed state</strong> <strong>Toggle pressed state</strong>
</CCardHeader> </CCardHeader>
<CRow> <CCardBody>
<CCol sm xs="12" class="text-center mt-3"> <CRow>
<CButton variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton> <CCol sm xs="12" class="text-center mt-3">
</CCol> <CButton variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
<CCol sm xs="12" class="text-center mt-3"> </CCol>
<CButton variant="outline-secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton> <CCol sm xs="12" class="text-center mt-3">
</CCol> <CButton variant="outline-secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
<CCol sm xs="12" class="text-center mt-3"> </CCol>
<CButton variant="outline-success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton> <CCol sm xs="12" class="text-center mt-3">
</CCol> <CButton variant="outline-success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
<CCol sm xs="12" class="text-center mt-3"> </CCol>
<CButton variant="outline-info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton> <CCol sm xs="12" class="text-center mt-3">
</CCol> <CButton variant="outline-info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
<CCol sm xs="12" class="text-center mt-3"> </CCol>
<CButton variant="outline-warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton> <CCol sm xs="12" class="text-center mt-3">
</CCol> <CButton variant="outline-warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
<CCol sm xs="12" class="text-center mt-3"> </CCol>
<CButton variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton> <CCol sm xs="12" class="text-center mt-3">
</CCol> <CButton variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
</CRow> </CCol>
</CRow>
</CCardBody>
</CCard> </CCard>
<CRow> <CRow>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<strong>Block Level CButtons</strong> <small>Add this <code>block</code></small> <strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader> </CCardHeader>
<CButton size="lg" variant="secondary" block>Block level button</CButton> <CCardBody>
<CButton size="lg" variant="primary" block>Block level button</CButton> <CButton size="lg" variant="secondary" block>Block level button</CButton>
<CButton size="lg" variant="success" block>Block level button</CButton> <CButton size="lg" variant="primary" block>Block level button</CButton>
<CButton size="lg" variant="info" block>Block level button</CButton> <CButton size="lg" variant="success" block>Block level button</CButton>
<CButton size="lg" variant="warning" block>Block level button</CButton> <CButton size="lg" variant="info" block>Block level button</CButton>
<CButton size="lg" variant="danger" block>Block level button</CButton> <CButton size="lg" variant="warning" block>Block level button</CButton>
<CButton size="lg" variant="link" block>Block level button</CButton> <CButton size="lg" variant="danger" block>Block level button</CButton>
<CButton size="lg" variant="link" block>Block level button</CButton>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<strong>Block Level CButtons</strong> <small>Add this <code>block</code></small> <strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader> </CCardHeader>
<CButton size="lg" variant="outline-secondary" block>Block level button</CButton> <CCardBody>
<CButton size="lg" variant="outline-primary" block>Block level button</CButton> <CButton size="lg" variant="outline-secondary" block>Block level button</CButton>
<CButton size="lg" variant="outline-success" block>Block level button</CButton> <CButton size="lg" variant="outline-primary" block>Block level button</CButton>
<CButton size="lg" variant="outline-info" block>Block level button</CButton> <CButton size="lg" variant="outline-success" block>Block level button</CButton>
<CButton size="lg" variant="outline-warning" block>Block level button</CButton> <CButton size="lg" variant="outline-info" block>Block level button</CButton>
<CButton size="lg" variant="outline-danger" block>Block level button</CButton> <CButton size="lg" variant="outline-warning" block>Block level button</CButton>
<CButton size="lg" ghost variant="info" block>Block level button</CButton> <CButton size="lg" variant="outline-danger" block>Block level button</CButton>
<CButton size="lg" ghost variant="info" block>Block level button</CButton>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/icons/CoreUIIcons.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<CCard noWrapper> <CCard >
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-picture-o"></i>CoreUI Icons <CBadge variant="info">New</CBadge> <i class="fa fa-picture-o"></i>CoreUI Icons <CBadge variant="info">New</CBadge>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" class="card-header-action"> <a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" class="card-header-action">
@@ -9,7 +9,7 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-account-logout icons font-2xl d-block mt-4"></i> <i class="cui-account-logout icons font-2xl d-block mt-4"></i>
src/views/icons/Flags.vue
+3 -3
View File
@@ -1,10 +1,10 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<CCard noWrapper id="new47"> <CCard id="new47">
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-font-awesome"></i> Flags <i class="fa fa-font-awesome"></i> Flags
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol class="mb-5" cols="12"> <CCol class="mb-5" cols="12">
For using the flags inline with text add the classes <code>.flag-icon</code> and <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well. For using the flags inline with text add the classes <code>.flag-icon</code> and <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.
src/views/icons/FontAwesome.vue
+51 -51
View File
@@ -1,10 +1,10 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<CCard noWrapper id="new47"> <CCard id="new47">
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-font-awesome"></i> 50 New Icons in 4.7 <i class="fa fa-font-awesome"></i> 50 New Icons in 4.7
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
<i class="fa fa-address-book fa-lg mt-4"></i><br/>address-book <i class="fa fa-address-book fa-lg mt-4"></i><br/>address-book
@@ -174,9 +174,9 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="new"> <CCard id="new">
<CCardHeader slot="header">20 New Icons in 4.5</CCardHeader> <CCardHeader>20 New Icons in 4.5</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -245,9 +245,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="web-application"> <CCard id="web-application">
<CCardHeader slot="header">Web Application Icons</CCardHeader> <CCardHeader>Web Application Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -1432,9 +1432,9 @@
</CCard> </CCard>
<CCard noWrapper id="hand"> <CCard id="hand">
<CCardHeader slot="header">Hand Icons</CCardHeader> <CCardHeader>Hand Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -1494,9 +1494,9 @@
</CCard> </CCard>
<CCard noWrapper id="transportation"> <CCard id="transportation">
<CCardHeader slot="header">Transportation Icons</CCardHeader> <CCardHeader>Transportation Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -1555,9 +1555,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="gender"> <CCard id="gender">
<CCardHeader slot="header">Gender Icons</CCardHeader> <CCardHeader>Gender Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -1607,9 +1607,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="file-type"> <CCard id="file-type">
<CCardHeader slot="header">File Type Icons</CCardHeader> <CCardHeader>File Type Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -1671,9 +1671,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="spinner"> <CCard id="spinner">
<CCardHeader slot="header">Spinner Icons</CCardHeader> <CCardHeader>Spinner Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<div class="alert alert-success"> <div class="alert alert-success">
<ul class="fa-ul"> <ul class="fa-ul">
<li> <li>
@@ -1704,9 +1704,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="form-control"> <CCard id="form-control">
<CCardHeader slot="header">Form Control Icons</CCardHeader> <CCardHeader>Form Control Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -1747,9 +1747,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="payment"> <CCard id="payment">
<CCardHeader slot="header">Payment Icons</CCardHeader> <CCardHeader>Payment Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -1793,9 +1793,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="chart"> <CCard id="chart">
<CCardHeader slot="header">Chart Icons</CCardHeader> <CCardHeader>Chart Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -1818,9 +1818,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="currency"> <CCard id="currency">
<CCardHeader slot="header">Currency Icons</CCardHeader> <CCardHeader>Currency Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -1906,9 +1906,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="text-editor"> <CCard id="text-editor">
<CCardHeader slot="header">Text Editor Icons</CCardHeader> <CCardHeader>Text Editor Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -2063,9 +2063,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="directional"> <CCard id="directional">
<CCardHeader slot="header">Directional Icons</CCardHeader> <CCardHeader>Directional Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -2232,9 +2232,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="video-player"> <CCard id="video-player">
<CCardHeader slot="header">Video Player Icons</CCardHeader> <CCardHeader>Video Player Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
@@ -2305,9 +2305,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="brand"> <CCard id="brand">
<CCardHeader slot="header">Brand Icons</CCardHeader> <CCardHeader>Brand Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<div class="alert alert-warning"> <div class="alert alert-warning">
<h4><i class="fa fa-warning"></i> Warning!</h4> <h4><i class="fa fa-warning"></i> Warning!</h4>
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
@@ -2796,9 +2796,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard noWrapper id="medical"> <CCard id="medical">
<CCardHeader slot="header">Medical Icons</CCardHeader> <CCardHeader>Medical Icons</CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2"> <CCol cols="6" sm="4" md="3" lg="2">
src/views/icons/SimpleLineIcons.vue
+3 -3
View File
@@ -1,10 +1,10 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<CCard noWrapper class="card-default"> <CCard class="card-default">
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-picture-o"></i> Simple Line Icons <i class="fa fa-picture-o"></i> Simple Line Icons
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3"> <CCol cols="6" sm="4" md="3">
src/views/notifications/Alerts.vue
+118 -108
View File
@@ -4,7 +4,7 @@
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Alert</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Alert</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -12,139 +12,149 @@
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<p></p> <div>
<CAlert show variant="primary">Primary Alert</CAlert> <p></p>
<CAlert show variant="secondary">Secondary Alert</CAlert> <CAlert show variant="primary">Primary Alert</CAlert>
<CAlert show variant="success">Success Alert</CAlert> <CAlert show variant="secondary">Secondary Alert</CAlert>
<CAlert show variant="danger">Danger Alert</CAlert> <CAlert show variant="success">Success Alert</CAlert>
<CAlert show variant="warning">Warning Alert</CAlert> <CAlert show variant="danger">Danger Alert</CAlert>
<CAlert show variant="info">Info Alert</CAlert> <CAlert show variant="warning">Warning Alert</CAlert>
<CAlert show variant="light">Light Alert</CAlert> <CAlert show variant="info">Info Alert</CAlert>
<CAlert show variant="dark">Dark Alert</CAlert> <CAlert show variant="light">Light Alert</CAlert>
</div> <CAlert show variant="dark">Dark Alert</CAlert>
</div>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> Alert <i class="fa fa-align-justify"></i> Alert
<small> use <code>.alert-link</code> to provide links</small> <small> use <code>.alert-link</code> to provide links</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CAlert show variant="primary"> <div>
Primary Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="primary">
</CAlert> Primary Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="secondary"> </CAlert>
Secondary Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="secondary">
</CAlert> Secondary Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="success"> </CAlert>
Success Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="success">
</CAlert> Success Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="danger"> </CAlert>
Danger Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="danger">
</CAlert> Danger Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="warning"> </CAlert>
Warning Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="warning">
</CAlert> Warning Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="info"> </CAlert>
Info Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="info">
</CAlert> Info Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="light"> </CAlert>
Light Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="light">
</CAlert> Light Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="dark"> </CAlert>
Dark Alert with <CAlert show variant="dark">
<CLink href="#" class="alert-link">an example link</CLink> Dark Alert with
. <CLink href="#" class="alert-link">an example link</CLink>
</CAlert> .
</div> </CAlert>
</div>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small> <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
</CCardHeader> </CCardHeader>
<CAlert show variant="success"> <CCardBody>
<h4 class="alert-heading">Well done!</h4> <CAlert show variant="success">
<p> <h4 class="alert-heading">Well done!</h4>
Aww yeah, you successfully read this important alert message. <p>
This example text is going to run a bit longer so that you can see Aww yeah, you successfully read this important alert message.
how spacing within an alert works with this kind of content. This example text is going to run a bit longer so that you can see
</p> how spacing within an alert works with this kind of content.
<hr> </p>
<p class="mb-0"> <hr>
Whenever you need to, be sure to use margin utilities to keep things nice and tidy. <p class="mb-0">
</p> Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</CAlert> </p>
</CAlert>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>dismissible</small> <i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CAlert :show="true" dismissible disabled> <div>
<CAlert :show="true" dismissible disabled>
Dismissible Alert!
</CAlert>
<!-- :dismissible="{attrs: {disabled:'disabled', 'aria-label':'close it'}, class:'hehe' } -->
<CAlert :show="true"
dismissible>
Dismissible Alert!
<CButtonClose slot-scope="{ dismiss }"
@click="dismiss"
aria-label="close it"
style="color:red">
ok
</CButtonClose>
</CAlert>
<CAlert show dismissible>
Dismissible Alert!
</CAlert>
<CAlert variant="danger"
dismissible
fade
:show="showDismissibleAlert"
@dismissed="showDismissibleAlert=false"
>
Dismissible Alert! Dismissible Alert!
</CAlert> </CAlert>
<!-- :dismissible="{attrs: {disabled:'disabled', 'aria-label':'close it'}, class:'hehe' } --> <CButton @click="showDismissibleAlert=true" variant="info" class="m-1">
<CAlert :show="true" Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
dismissible> </CButton>
Dismissible Alert! </div>
<CButtonClose slot-scope="{ dismiss }" </CCardBody>
@click="dismiss"
aria-label="close it"
style="color:red">
ok
</CButtonClose>
</CAlert>
<CAlert show dismissible>
Dismissible Alert!
</CAlert>
<CAlert variant="danger"
dismissible
fade
:show="showDismissibleAlert"
@dismissed="showDismissibleAlert=false"
>
Dismissible Alert!
</CAlert>
<CButton @click="showDismissibleAlert=true" variant="info" class="m-1">
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
</CButton>
</div>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small> <i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<CAlert :show="dismissCountDown" <div>
dismissible <CAlert :show="dismissCountDown"
variant="warning" dismissible
@dismissed="dismissCountdown=0" variant="warning"
@dismiss-count-down="countDownChanged"> @dismissed="dismissCountdown=0"
Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds... @dismiss-count-down="countDownChanged">
</CAlert> Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
</CAlert>
<CAlert :show="dismissCountDown" <CAlert :show="dismissCountDown"
dismissible dismissible
variant="info" variant="info"
@dismissed="dismissCountdown=0" @dismissed="dismissCountdown=0"
@dismiss-count-down="countDownChanged"> @dismiss-count-down="countDownChanged">
Alert will dismiss after {{dismissCountDown}} seconds... Alert will dismiss after {{dismissCountDown}} seconds...
<CProgress variant="info" <CProgress variant="info"
:max="dismissSecs" :max="dismissSecs"
:value="dismissCountDown" :value="dismissCountDown"
height="4px"> height="4px">
</CProgress> </CProgress>
</CAlert> </CAlert>
<CButton @click="showAlert" variant="info" class="m-1"> <CButton @click="showAlert" variant="info" class="m-1">
Show alert with timer Show alert with timer
</CButton> </CButton>
</div> </div>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/notifications/Badges.vue
+29 -20
View File
@@ -1,25 +1,26 @@
<template> <template functional>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard> <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Badge</strong> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Badge</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<div> <CCardBody>
<h2>Example heading <CBadge>New</CBadge></h2> <h2>Example heading <CBadge>New</CBadge></h2>
<h3>Example heading <CBadge>New</CBadge></h3> <h3>Example heading <CBadge>New</CBadge></h3>
<h4>Example heading <CBadge>New</CBadge></h4> <h4>Example heading <CBadge>New</CBadge></h4>
<h5>Example heading <CBadge>New</CBadge></h5> <h5>Example heading <CBadge>New</CBadge></h5>
<h6>Example heading <CBadge>New</CBadge></h6> <h6>Example heading <CBadge>New</CBadge></h6>
</div> </CCardBody>
<CCardFooter slot="footer"> <CCardFooter>
<CButton variant="primary"> <CButton variant="primary">
Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge> Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
</CButton> </CButton>
@@ -27,8 +28,12 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol cols="12" md="6">
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>"> <CCard>
<div> <CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>contextual variations</small>
</CCardHeader>
<CCardBody>
<CBadge variant="primary">Primary</CBadge> <CBadge variant="primary">Primary</CBadge>
<CBadge variant="secondary">Secondary</CBadge> <CBadge variant="secondary">Secondary</CBadge>
<CBadge variant="success">Success</CBadge> <CBadge variant="success">Success</CBadge>
@@ -37,10 +42,14 @@
<CBadge variant="info">Info</CBadge> <CBadge variant="info">Info</CBadge>
<CBadge variant="light">Light</CBadge> <CBadge variant="light">Light</CBadge>
<CBadge variant="dark">Dark</CBadge> <CBadge variant="dark">Dark</CBadge>
</div> </CCardBody>
</CCard> </CCard>
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>"> <CCard>
<div> <CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>pills</small>
</CCardHeader>
<CCardBody>
<CBadge pill variant="primary">Primary</CBadge> <CBadge pill variant="primary">Primary</CBadge>
<CBadge pill variant="secondary">Secondary</CBadge> <CBadge pill variant="secondary">Secondary</CBadge>
<CBadge pill variant="success">Success</CBadge> <CBadge pill variant="success">Success</CBadge>
@@ -49,10 +58,14 @@
<CBadge pill variant="info">Info</CBadge> <CBadge pill variant="info">Info</CBadge>
<CBadge pill variant="light">Light</CBadge> <CBadge pill variant="light">Light</CBadge>
<CBadge pill variant="dark">Dark</CBadge> <CBadge pill variant="dark">Dark</CBadge>
</div> </CCardBody>
</CCard> </CCard>
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>"> <CCard>
<div> <CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>actionable</small>
</CCardHeader>
<CCardBody>
<CBadge href="#" variant="primary">Primary</CBadge> <CBadge href="#" variant="primary">Primary</CBadge>
<CBadge href="#" variant="secondary">Secondary</CBadge> <CBadge href="#" variant="secondary">Secondary</CBadge>
<CBadge href="#" variant="success">Success</CBadge> <CBadge href="#" variant="success">Success</CBadge>
@@ -61,7 +74,7 @@
<CBadge href="#" variant="info">Info</CBadge> <CBadge href="#" variant="info">Info</CBadge>
<CBadge href="#" variant="light">Light</CBadge> <CBadge href="#" variant="light">Light</CBadge>
<CBadge href="#" variant="dark">Dark</CBadge> <CBadge href="#" variant="dark">Dark</CBadge>
</div> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
@@ -71,10 +84,6 @@
<script> <script>
export default { export default {
name: 'badges', name: 'badges'
data () {
return {
}
}
} }
</script> </script>
src/views/notifications/Modals.vue
+34 -11
View File
@@ -3,17 +3,40 @@
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol cols="12"> <CCol cols="12">
<CCard header="<i class='fa fa-align-justify'></i> Bootstrap Modals"> <CCard>
<CButton variant="secondary" @click="myModal = true" class="mr-1">Launch demo modal</CButton> <CCardHeader>
<CButton variant="secondary" @click="largeModal = true" class="mr-1">Launch large modal</CButton> <i class="fa fa-align-justify"></i> Bootstrap Modals
<CButton variant="secondary" @click="smallModal = true" class="mr-1">Launch small modal</CButton> </CCardHeader>
<hr> <CCardBody>
<CButton variant="primary" @click="primaryModal = true" class="mr-1">Launch primary modal</CButton> <CButton variant="secondary" @click="myModal = true" class="mr-1">
<CButton variant="success" @click="successModal = true" class="mr-1">Launch success modal</CButton> Launch demo modal
<CButton variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</CButton> </CButton>
<CButton variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</CButton> <CButton variant="secondary" @click="largeModal = true" class="mr-1">
<CButton variant="info" @click="infoModal = true" class="mr-1">Launch info modal</CButton> Launch large modal
<CButton variant="dark" @click="darkModal = !darkModal" class="mr-1">Launch dark modal</CButton> </CButton>
<CButton variant="secondary" @click="smallModal = true" class="mr-1">
Launch small modal
</CButton>
<hr>
<CButton variant="primary" @click="primaryModal = true" class="mr-1">
Launch primary modal
</CButton>
<CButton variant="success" @click="successModal = true" class="mr-1">
Launch success modal
</CButton>
<CButton variant="warning" @click="warningModal = true" class="mr-1">
Launch warning modal
</CButton>
<CButton variant="danger" @click="dangerModal = true" class="mr-1">
Launch danger modal
</CButton>
<CButton variant="info" @click="infoModal = true" class="mr-1">
Launch info modal
</CButton>
<CButton variant="dark" @click="darkModal = true" class="mr-1">
Launch dark modal
</CButton>
</CCardBody>
</CCard> </CCard>
</CCol><!--/.col--> </CCol><!--/.col-->
</CRow><!--/.row--> </CRow><!--/.row-->
src/views/pages/Login.vue
+3 -2
View File
@@ -4,8 +4,8 @@
<CRow class="justify-content-center"> <CRow class="justify-content-center">
<CCol md="8"> <CCol md="8">
<CCardGroup> <CCardGroup>
<CCard noWrapper class="p-4"> <CCard class="p-4">
<CCardBody slot="body"> <CCardBody>
<CForm> <CForm>
<h1>Login</h1> <h1>Login</h1>
<p class="text-muted">Sign In to your account</p> <p class="text-muted">Sign In to your account</p>
@@ -34,6 +34,7 @@
<CCard <CCard
class="text-white text-center bg-primary py-5 d-md-down-none" class="text-white text-center bg-primary py-5 d-md-down-none"
style="width:44%" style="width:44%"
bodyWrapper
> >
<h2>Sign up</h2> <h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
src/views/pages/Register.vue
+40 -44
View File
@@ -4,50 +4,46 @@
<CRow class="justify-content-center"> <CRow class="justify-content-center">
<CCol md="6" sm="8"> <CCol md="6" sm="8">
<CCard class="mx-4"> <CCard class="mx-4">
<template #body> <CCardBody class="p-4">
<CCardBody class="p-4"> <CForm>
<CForm> <h1>Register</h1>
<h1>Register</h1> <p class="text-muted">Create your account</p>
<p class="text-muted">Create your account</p> <CFormInput
<CFormInput placeholder="Username"
placeholder="Username" prepend="<i class='icon-user'></i>"
prepend="<i class='icon-user'></i>" autocomplete="username"
autocomplete="username" />
/> <CFormInput
<CFormInput placeholder="Email"
placeholder="Email" prepend="@"
prepend="@" autocomplete="email"
autocomplete="email" />
/> <CFormInput
<CFormInput placeholder="Password"
placeholder="Password" type="password"
type="password" prepend="<i class='icon-lock'></i>"
prepend="<i class='icon-lock'></i>" autocomplete="new-password"
autocomplete="new-password" />
/> <CFormInput
<CFormInput placeholder="Repeat password"
placeholder="Repeat password" type="password"
type="password" prepend="<i class='icon-lock'></i>"
prepend="<i class='icon-lock'></i>" autocomplete="new-password"
autocomplete="new-password" class="mb-4"
class="mb-4" />
/> <CButton variant="success" block>Create Account</CButton>
<CButton variant="success" block>Create Account</CButton> </CForm>
</CForm> </CCardBody>
</CCardBody> <CCardFooter class="p-4">
</template> <CRow>
<template #footer> <CCol cols="6">
<CCardFooter class="p-4"> <CButton block class="btn btn-facebook"><span>facebook</span></CButton>
<CRow> </CCol>
<CCol cols="6"> <CCol cols="6">
<CButton block class="btn btn-facebook"><span>facebook</span></CButton> <CButton block class="btn btn-twitter" type="button"><span>twitter</span></CButton>
</CCol> </CCol>
<CCol cols="6"> </CRow>
<CButton block class="btn btn-twitter" type="button"><span>twitter</span></CButton> </CCardFooter>
</CCol>
</CRow>
</CCardFooter>
</template>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/theme/Colors.vue
+7 -7
View File
@@ -1,10 +1,10 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<CCard > <CCard >
<CCardHeader slot="header"> <CCardHeader>
<i class="icon-drop"></i> Theme colors <i class="icon-drop"></i> Theme colors
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow> <CRow>
<ColorTheme color="bg-primary"> <ColorTheme color="bg-primary">
<h6>Brand Primary Color</h6> <h6>Brand Primary Color</h6>
@@ -19,11 +19,11 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard > <CCard>
<CCardHeader slot="header"> <CCardHeader>
<i class="icon-drop"></i> Grays <i class="icon-drop"></i> Grays
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow> <CRow>
<ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme> <ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
<ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme> <ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
@@ -38,10 +38,10 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard > <CCard >
<CCardHeader slot="header"> <CCardHeader>
<i class="icon-drop"></i> Additional colors <i class="icon-drop"></i> Additional colors
</CCardHeader> </CCardHeader>
<CCardBody slot="body"> <CCardBody>
<CRow> <CRow>
<ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme> <ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
<ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme> <ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
src/views/users/User.vue
+14 -14
View File
@@ -1,21 +1,21 @@
<template> <template>
<CRow> <CRow>
<CCol cols="12" <CCol cols="12" lg="6">
lg="6" <CCard>
> <CCardHeader>
<CCard no-header>
<template slot="header">
User id: {{ $route.params.id }} User id: {{ $route.params.id }}
</template> </CCardHeader>
<CTable striped <CCardBody>
small <CTable striped
fixed small
:items="items($route.params.id)" fixed
:fields="$options.fields" :items="items($route.params.id)"
/> :fields="$options.fields"
<template slot="footer"> />
</CCardBody>
<CCardFooter>
<CButton @click="goBack">Back</CButton> <CButton @click="goBack">Back</CButton>
</template> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/users/Users.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<CRow> <CRow>
<CCol cols="12" xl="8"> <CCol cols="12" xl="8">
<transition name="slide"> <transition name="slide">
<CCard header="users"> <CCard header="users" bodyWrapper>
<CTable hover <CTable hover
striped striped
:items="items" :items="items"