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