feat: Bootstrap Vue components changed to Coreui-Vue components
This commit is contained in:
woothu
+29
-29
@@ -1,38 +1,38 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-card-group columns class="card-columns">
|
||||
<b-card header="Line Chart">
|
||||
<line-example/>
|
||||
</b-card>
|
||||
<b-card header="Bar Chart">
|
||||
<bar-example/>
|
||||
</b-card>
|
||||
<b-card header="Doughnut Chart">
|
||||
<doughnut-example/>
|
||||
</b-card>
|
||||
<b-card header="Radar Chart">
|
||||
<radar-example/>
|
||||
</b-card>
|
||||
<b-card header="Pie Chart">
|
||||
<pie-example/>
|
||||
</b-card>
|
||||
<b-card header="Polar Area Chart">
|
||||
<polar-area-example/>
|
||||
</b-card>
|
||||
<b-card header="Simple line chart">
|
||||
<c-simple-line-chart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
<CCardGroup columns class="card-columns">
|
||||
<CCard header="Line Chart">
|
||||
<LineExample/>
|
||||
</CCard>
|
||||
<CCard header="Bar Chart">
|
||||
<BarExample/>
|
||||
</CCard>
|
||||
<CCard header="Doughnut Chart">
|
||||
<DoughnutExample/>
|
||||
</CCard>
|
||||
<CCard header="Radar Chart">
|
||||
<RadarExample/>
|
||||
</CCard>
|
||||
<CCard header="Pie Chart">
|
||||
<PieExample/>
|
||||
</CCard>
|
||||
<CCard header="Polar Area Chart">
|
||||
<PolarAreaExample/>
|
||||
</CCard>
|
||||
<CCard header="Simple line chart">
|
||||
<CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' borderColor='success'/>
|
||||
</b-card>
|
||||
<b-card header="Simple pointed chart">
|
||||
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||
</CCard>
|
||||
<CCard header="Simple pointed chart">
|
||||
<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'/>
|
||||
</b-card>
|
||||
<b-card header="Simple bar chart">
|
||||
<c-simple-bar-chart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
</CCard>
|
||||
<CCard header="Simple bar chart">
|
||||
<CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' color='danger'/>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
+253
-212
@@ -1,187 +1,210 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget06 header="9.823" text="Members online">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget06 header="9.823" text="Members online">
|
||||
<template slot="dropdown">
|
||||
<CDropdown class="float-right"
|
||||
variant="transparent p-0"
|
||||
right
|
||||
button-content="<i class='icon-settings'></i>"
|
||||
tag="div"
|
||||
>
|
||||
<!-- <template slot="button-content">
|
||||
|
||||
</template> -->
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||
<CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:70px' label='Members' pointHoverColor='primary'/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget06 variant="info" header="9.823" text="Members online">
|
||||
<b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
|
||||
<i slot="button-content"
|
||||
</CWidget06>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget06 variant="info" header="9.823" text="Members online">
|
||||
<CDropdown slot="dropdown"
|
||||
class="float-right"
|
||||
variant="transparent p-0"
|
||||
right
|
||||
no-caret
|
||||
button-content="<i class='icon-location-pin'></i>"
|
||||
tag="div"
|
||||
>
|
||||
<!-- <i slot="button-content"
|
||||
class="icon-location-pin"
|
||||
></i>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
></i> -->
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CSimplePointedChart class="px-3"
|
||||
:data="[1, 18, 9, 17, 34, 22, 11]"
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style="height:70px"
|
||||
label="Members"
|
||||
:options="{elements: {line: {tension: 0.00001}}}"
|
||||
:options="{ elements: { line: { tension: 0.00001 }}}"
|
||||
pointHoverColor="info"
|
||||
/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget06 variant="warning" header="9.823" text="Members online">
|
||||
</CWidget06>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget06 variant="warning" header="9.823" text="Members online">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<CDropdown class="float-right"
|
||||
variant="transparent p-0"
|
||||
right
|
||||
button-content="<i class='icon-settings'></i>"
|
||||
tag="div"
|
||||
>
|
||||
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<c-simple-line-chart chartId="c-widget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
|
||||
<CSimpleLineChart chartId="CWidget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
|
||||
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget06 variant="danger" header="9.823" text="Members online">
|
||||
</CWidget06>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget06 variant="danger" header="9.823" text="Members online">
|
||||
<template slot="dropdown">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<CDropdown class="float-right"
|
||||
variant="transparent p-0"
|
||||
right
|
||||
button-content="<i class='icon-settings'></i>"
|
||||
>
|
||||
<!-- <template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</template> -->
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<c-simple-bar-chart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
<CSimpleBarChart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Members' color='rgb(250, 152, 152)' style='height:70px' />
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CWidget06>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<b-card>
|
||||
<b-row>
|
||||
<b-col sm="5">
|
||||
<CCard>
|
||||
<CRow>
|
||||
<CCol sm="5">
|
||||
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-muted">November 2017</div>
|
||||
</b-col>
|
||||
<b-col sm="7" class="d-none d-md-block">
|
||||
<b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button>
|
||||
<b-button-toolbar class="float-right" aria-label="Toolbar with buttons group">
|
||||
<b-form-radio-group class="mr-3" id="radiosBtn" buttons button-variant="outline-secondary" v-model="selected" name="radiosBtn">
|
||||
<b-form-radio class="mx-0" value="Day">Day</b-form-radio>
|
||||
<b-form-radio class="mx-0" value="Month">Month</b-form-radio>
|
||||
<b-form-radio class="mx-0" value="Year">Year</b-form-radio>
|
||||
</b-form-radio-group>
|
||||
</b-button-toolbar>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<main-chart-example style="height:300px;margin-top:40px;" height="300"></main-chart-example>
|
||||
<div slot="footer">
|
||||
<b-row class="text-center">
|
||||
<b-col class="mb-sm-2 mb-0">
|
||||
</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">
|
||||
<CRow class="text-center">
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="success" :value="40"></b-progress>
|
||||
</b-col>
|
||||
<b-col class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<CProgress class="progress-xs mt-2" :precision="1" variant="success" :value="40"></CProgress>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div class="text-muted">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="info" :value="20"></b-progress>
|
||||
</b-col>
|
||||
<b-col class="mb-sm-2 mb-0">
|
||||
<CProgress class="progress-xs mt-2" :precision="1" variant="info" :value="20"></CProgress>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></b-progress>
|
||||
</b-col>
|
||||
<b-col class="mb-sm-2 mb-0">
|
||||
<CProgress class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></CProgress>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></b-progress>
|
||||
</b-col>
|
||||
<b-col class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<CProgress class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></CProgress>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div class="text-muted">Bounce Rate</div>
|
||||
<strong>Average Rate (40.15%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" :value="40"></b-progress>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-row>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
|
||||
<c-simple-line-chart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
|
||||
<CProgress class="progress-xs mt-2" :precision="1" :value="40"></CProgress>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CRow>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
|
||||
<CSimpleLineChart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
|
||||
<c-simple-line-chart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
|
||||
<CSimpleLineChart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
|
||||
<c-simple-line-chart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
|
||||
<CSimpleLineChart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
|
||||
<c-simple-line-chart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
|
||||
<CSimpleLineChart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col md="12">
|
||||
<b-card header="Traffic & Sales">
|
||||
<b-row>
|
||||
<b-col sm="12" lg="6">
|
||||
<b-row>
|
||||
<b-col sm="6">
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol md="12">
|
||||
<CCard header="Traffic & Sales">
|
||||
<CRow>
|
||||
<CCol sm="12" lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<Callout variant="info">
|
||||
<small class="text-muted">New Clients</small><br>
|
||||
<strong class="h4">9,123</strong>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
|
||||
<!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
|
||||
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
<b-col sm="6">
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<Callout variant="danger">
|
||||
<small class="text-muted">Recurring Clients</small><br>
|
||||
<strong class="h4">22,643</strong>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
|
||||
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0">
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
@@ -190,8 +213,8 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress class="progress-xs" variant="info" :value="34" height={} />
|
||||
<b-progress class="progress-xs" variant="danger" :value="78" height={} />
|
||||
<CProgress class="progress-xs" variant="info" :value="34" />
|
||||
<CProgress class="progress-xs" variant="danger" :value="78" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
@@ -201,8 +224,8 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="56" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="94" variant="danger"></b-progress>
|
||||
<CProgress class="progress-xs" :value="56" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="94" variant="danger"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
@@ -212,8 +235,8 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="12" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="67" variant="danger"></b-progress>
|
||||
<CProgress class="progress-xs" :value="12" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="67" variant="danger"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
@@ -223,8 +246,8 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="43" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="91" variant="danger"></b-progress>
|
||||
<CProgress class="progress-xs" :value="43" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="91" variant="danger"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
@@ -234,8 +257,8 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="22" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="73" variant="danger"></b-progress>
|
||||
<CProgress class="progress-xs" :value="22" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="73" variant="danger"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
@@ -245,8 +268,8 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="53" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="82" variant="danger"></b-progress>
|
||||
<CProgress class="progress-xs" :value="53" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="82" variant="danger"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
@@ -256,41 +279,41 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="9" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="69" variant="danger"></b-progress>
|
||||
<CProgress class="progress-xs" :value="9" variant="info"></CProgress>
|
||||
<CProgress class="progress-xs" :value="69" variant="danger"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend text-center">
|
||||
<small>
|
||||
<sup><b-badge pill variant="info"> </b-badge></sup>
|
||||
<sup><CBadge pill variant="info"> </CBadge></sup>
|
||||
New clients
|
||||
|
||||
<sup><b-badge pill variant="danger"> </b-badge></sup>
|
||||
<sup><CBadge pill variant="danger"> </CBadge></sup>
|
||||
Recurring clients
|
||||
</small>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col sm="12" lg="6">
|
||||
<b-row>
|
||||
<b-col sm="6">
|
||||
</CCol>
|
||||
<CCol sm="12" lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<Callout variant="warning">
|
||||
<small class="text-muted">Pageviews</small><br>
|
||||
<strong class="h4">78,623</strong>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
|
||||
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
<b-col sm="6">
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<Callout variant="success">
|
||||
<small class="text-muted">Organic</small><br>
|
||||
<strong class="h4">49,123</strong>
|
||||
<div :style="{ top: '-10px'}">
|
||||
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
|
||||
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars type-2">
|
||||
<div class="progress-group">
|
||||
@@ -300,7 +323,7 @@
|
||||
<span class="ml-auto font-weight-bold">43%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="43" variant="warning"></b-progress>
|
||||
<CProgress class="progress-xs" :value="43" variant="warning"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-5">
|
||||
@@ -310,7 +333,7 @@
|
||||
<span class="ml-auto font-weight-bold">37%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="37" variant="warning"></b-progress>
|
||||
<CProgress class="progress-xs" :value="37" variant="warning"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
@@ -320,7 +343,7 @@
|
||||
<span class="ml-auto font-weight-bold">191,235 <span class="text-muted small">(56%)</span></span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="56" variant="success"></b-progress>
|
||||
<CProgress class="progress-xs" :value="56" variant="success"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
@@ -330,7 +353,7 @@
|
||||
<span class="ml-auto font-weight-bold">51,223 <span class="text-muted small">(15%)</span></span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="15" variant="success"></b-progress>
|
||||
<CProgress class="progress-xs" :value="15" variant="success"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
@@ -340,7 +363,7 @@
|
||||
<span class="ml-auto font-weight-bold">37,564 <span class="text-muted small">(11%)</span></span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="11" variant="success"></b-progress>
|
||||
<CProgress class="progress-xs" :value="11" variant="success"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
@@ -350,52 +373,85 @@
|
||||
<span class="ml-auto font-weight-bold">27,319 <span class="text-muted small"> (8%)</span></span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<b-progress height={} class="progress-xs" :value="8" variant="success"></b-progress>
|
||||
<CProgress class="progress-xs" :value="8" variant="success"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider text-center">
|
||||
<b-button variant="link" size="sm" class="text-muted"><i class="icon-options"></i></b-button>
|
||||
<CButton variant="link" size="sm" class="text-muted"><i class="icon-options"></i></CButton>
|
||||
</div>
|
||||
</ul>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<br/>
|
||||
<b-table class="mb-0 table-outline" responsive="sm" hover :items="tableItems" :fields="tableFields" head-variant="light">
|
||||
<div slot="avatar" class="avatar" slot-scope="item">
|
||||
<img :src="item.value.url" class="img-avatar" alt="">
|
||||
<span class="avatar-status" v-bind:class="{ 'bg-success': item.value.status == 'success', 'bg-warning': item.value.status == 'warning', 'bg-danger': item.value.status == 'danger', 'bg-secondary': item.value.status == '' }"></span>
|
||||
</div>
|
||||
<div slot="user" slot-scope="item">
|
||||
<div>{{item.value.name}}</div>
|
||||
<CTable class="mb-0 table-outline"
|
||||
hover
|
||||
:items="tableItems"
|
||||
:fields="tableFields"
|
||||
head-variant="light"
|
||||
noSorting
|
||||
>
|
||||
<!-- <div slot="activity-header">
|
||||
A tu nic
|
||||
</div> -->
|
||||
<td slot="avatar" class="text-center" slot-scope="{item}">
|
||||
<div class="avatar">
|
||||
<img :src="item.avatar.url" class="img-avatar" alt="">
|
||||
<span class="avatar-status"
|
||||
:class="item.avatar.status ?
|
||||
`bg-${item.avatar.status}` :
|
||||
'bg-secondary'"
|
||||
></span>
|
||||
</div>
|
||||
</td>
|
||||
<td slot="user" slot-scope="{item}">
|
||||
<div>{{item.user.name}}</div>
|
||||
<div class="small text-muted">
|
||||
<span>
|
||||
<template v-if="item.value.new">New</template>
|
||||
<template v-if="item.user.new">New</template>
|
||||
<template v-else>Recurring</template>
|
||||
</span> | Registered: {{item.value.registered}}
|
||||
</span> | Registered: {{item.user.registered}}
|
||||
</div>
|
||||
</div>
|
||||
<i slot="country" class="h4 mb-0" :class="flag(item.value.flag)" slot-scope="item" :title="item.value.flag" :id="item.value.flag"></i>
|
||||
<i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i>
|
||||
<div slot="usage" slot-scope="item">
|
||||
</td>
|
||||
<td slot="country"
|
||||
slot-scope="{item}"
|
||||
class="text-center"
|
||||
>
|
||||
<i class="h4 mb-0"
|
||||
:class="flag(item.country.flag)"
|
||||
:title="item.country.flag"
|
||||
:id="item.country.flag"
|
||||
></i>
|
||||
</td>
|
||||
<!-- <i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i> -->
|
||||
<td slot="usage" slot-scope="{item}">
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>{{item.value.value}}%</strong>
|
||||
<strong>{{item.usage.value}}%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">{{item.value.period}}</small>
|
||||
<small class="text-muted">{{item.usage.period}}</small>
|
||||
</div>
|
||||
</div>
|
||||
<b-progress height={} class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress>
|
||||
</div>
|
||||
<i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i>
|
||||
<div slot="activity" slot-scope="item">
|
||||
<CProgress class="progress-xs" v-model="item.usage.value"
|
||||
|
||||
:variant="variant(item.usage.value)"></CProgress>
|
||||
</td>
|
||||
<td slot="payment"
|
||||
slot-scope="{item}"
|
||||
class="text-center"
|
||||
>
|
||||
<i :class="item.payment.icon"
|
||||
style="font-size:24px"
|
||||
></i>
|
||||
</td>
|
||||
<td slot="activity" slot-scope="{item}">
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>{{item.value}}</strong>
|
||||
</div>
|
||||
</b-table>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<strong>{{item.activity}}</strong>
|
||||
</td>
|
||||
</CTable>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -464,29 +520,14 @@ export default {
|
||||
activity: 'Last week'
|
||||
}
|
||||
],
|
||||
tableFields: {
|
||||
avatar: {
|
||||
label: '<i class="icon-people"></i>',
|
||||
class: 'text-center'
|
||||
},
|
||||
user: {
|
||||
label: 'User'
|
||||
},
|
||||
country: {
|
||||
label: 'Country',
|
||||
class: 'text-center'
|
||||
},
|
||||
usage: {
|
||||
label: 'Usage'
|
||||
},
|
||||
payment: {
|
||||
label: 'Payment method',
|
||||
class: 'text-center'
|
||||
},
|
||||
activity: {
|
||||
label: 'Activity'
|
||||
}
|
||||
}
|
||||
tableFields: [
|
||||
{ key: 'avatar', label: '<i class="icon-people"></i>',},
|
||||
{ key: 'user' },
|
||||
{ key: 'country' },
|
||||
{ key: 'usage' },
|
||||
{ key: 'payment', label: 'Payment method' },
|
||||
{ key: 'activity' },
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
+276
-280
@@ -1,234 +1,234 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
|
||||
<CProgress color="success" :value="25" class="progress-xs my-3 mb-0"/>
|
||||
</c-widget01>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
|
||||
<CProgress variant="success" :value="25" class="progress-xs my-3 mb-0"/>
|
||||
</CWidget01>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="info" :value="25"/>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="warning" :value="25"/>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="danger" :value="25"/>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="success" inverse :value="25"/>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="info" inverse :value="25"/>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="warning" inverse :value="25"/>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
|
||||
variant="danger" inverse :value="25"/>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col cols="12" sm="6" lg="4">
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="4">
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="6" lg="4">
|
||||
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
|
||||
</b-col>
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol cols="12" sm="6" lg="3">
|
||||
<CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
|
||||
</CCol>
|
||||
<CCol cols="12" sm="6" lg="3">
|
||||
<CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
|
||||
</CCol>
|
||||
<CCol cols="12" sm="6" lg="3">
|
||||
<CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
|
||||
</CCol>
|
||||
<CCol cols="12" sm="6" lg="3">
|
||||
<CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol cols="12" sm="6" lg="3">
|
||||
<CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/>
|
||||
</CCol>
|
||||
<CCol cols="12" sm="6" lg="3">
|
||||
<CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/>
|
||||
</CCol>
|
||||
<CCol cols="12" sm="6" lg="3">
|
||||
<CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/>
|
||||
</CCol>
|
||||
<CCol cols="12" sm="6" lg="3">
|
||||
<CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/>
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol cols="12" sm="6" lg="3">
|
||||
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
|
||||
</CCol>
|
||||
<CCol cols="12" sm="6" lg="3">
|
||||
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
|
||||
</CCol>
|
||||
<CCol cols="12" sm="6" lg="3">
|
||||
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
|
||||
</CCol>
|
||||
<CCol cols="12" sm="6" lg="3">
|
||||
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol cols="12" sm="6" lg="4">
|
||||
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
|
||||
</CCol>
|
||||
<CCol cols="12" sm="6" lg="4">
|
||||
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
|
||||
</CCol>
|
||||
<CCol cols="12" sm="6" lg="4">
|
||||
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
|
||||
</CCol>
|
||||
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6" class="codeContainer">
|
||||
<c-widget04 variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6" class="codeContainer">
|
||||
<CWidget04 variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
|
||||
<i slot="icon" class="fa fa-battery-1"></i>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
|
||||
<c-simple-line-chart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
|
||||
<CSimpleLineChart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
|
||||
<c-simple-line-chart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
|
||||
<CSimpleLineChart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
|
||||
<c-simple-line-chart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
|
||||
<CSimpleLineChart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px' color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<c-widget04 variant='google-plus'
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidget04 variant='google-plus'
|
||||
rightHeader='894'
|
||||
rightFooter='followers'
|
||||
leftHeader='92' leftFooter='circles'>
|
||||
<c-simple-line-chart chartId="google-plus"
|
||||
<CSimpleLineChart chartId="google-plus"
|
||||
:data='[35, 23, 56, 22, 97, 23, 64]'
|
||||
label='Followers'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:100px'
|
||||
color='rgba(255,255,255,.1)'/>
|
||||
</c-widget04>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-card-group class="mb-4">
|
||||
<c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
|
||||
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
|
||||
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
|
||||
<c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
|
||||
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
|
||||
</b-card-group>
|
||||
<b-card-group class="mb-4">
|
||||
<c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
|
||||
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
|
||||
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
|
||||
<c-widget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
|
||||
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
|
||||
</b-card-group>
|
||||
<b-row>
|
||||
<b-col sm="6" md="2">
|
||||
<c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
|
||||
</CWidget04>
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CCardGroup class="mb-4">
|
||||
<CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
|
||||
<CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
|
||||
<CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
|
||||
<CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
|
||||
<CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
|
||||
</CCardGroup>
|
||||
<CCardGroup class="mb-4">
|
||||
<CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
|
||||
<CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
|
||||
<CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
|
||||
<CWidget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
|
||||
<CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
|
||||
</CCardGroup>
|
||||
<CRow>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
|
||||
<CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
|
||||
</c-widget05>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col sm="6" md="2">
|
||||
<c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="2">
|
||||
<c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget06 header="9.823" text="Members online">
|
||||
</CWidget05>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget06 header="9.823" text="Members online">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<CDropdownclass="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||
<CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:70px' label='Members' pointHoverColor='primary'/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget06 variant="info" header="9.823" text="Members online">
|
||||
<b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
|
||||
</CWidget06>
|
||||
</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"
|
||||
class="icon-location-pin"
|
||||
></i>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CSimplePointedChart class="px-3"
|
||||
:data="[1, 18, 9, 17, 34, 22, 11]"
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
@@ -237,124 +237,120 @@
|
||||
:options="{elements: {line: {tension: 0.00001}}}"
|
||||
pointHoverColor="info"
|
||||
/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget06 variant="warning" header="9.823" text="Members online">
|
||||
</CWidget06>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget06 variant="warning" header="9.823" text="Members online">
|
||||
<template slot='dropdown'>
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<CDropdownclass="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<c-simple-line-chart chartId="c-widget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
|
||||
<CSimpleLineChart chartId="CWidget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
|
||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||
style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
|
||||
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget06 variant="danger" header="9.823" text="Members online">
|
||||
</CWidget06>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget06 variant="danger" header="9.823" text="Members online">
|
||||
<template slot="dropdown">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<CDropdownclass="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<c-simple-bar-chart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
<CSimpleBarChart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Members' color='rgb(250, 152, 152)' style='height:70px' />
|
||||
</c-widget06>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<c-simple-line-chart style="height:40px" chartId="c-widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</CWidget06>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<CSimpleLineChart style="height:40px" chartId="CWidget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<CSimpleBarChart style="height:40px"
|
||||
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
|
||||
label="Sales"
|
||||
/>
|
||||
</c-widget07>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget07 variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<c-simple-line-chart style="height:40px" chartId="c-widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</c-widget07>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget07 variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<c-simple-line-chart style="height:40px" chartId="c-widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</c-widget07>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<c-widget07 variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<c-simple-line-chart style="height:40px" chartId="c-widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</c-widget07>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col sm="4" lg="2">
|
||||
<c-widget08 header='title' text='1,123'>
|
||||
<c-simple-line-chart style="height:40px" chartId="c-widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
</CWidget07>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget07 variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<CSimpleLineChart style="height:40px" chartId="CWidget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<CSimpleBarChart style="height:40px" chartId="CWidget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</CWidget07>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget07 variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<CSimpleLineChart style="height:40px" chartId="CWidget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<CSimpleBarChart style="height:40px" chartId="CWidget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</CWidget07>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidget07 variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
||||
<CSimpleLineChart style="height:40px" chartId="CWidget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
<CSimpleBarChart style="height:40px" chartId="CWidget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
|
||||
</CWidget07>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidget08 header='title' text='1,123'>
|
||||
<CSimpleLineChart style="height:40px" chartId="CWidget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' borderColor='danger'/>
|
||||
</c-widget08>
|
||||
</b-col>
|
||||
<b-col sm="4" lg="2">
|
||||
<c-widget08 header='title' text='1,123'>
|
||||
<c-simple-line-chart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
</CWidget08>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidget08 header='title' text='1,123'>
|
||||
<CSimpleLineChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' borderColor='primary'/>
|
||||
</c-widget08>
|
||||
</b-col>
|
||||
<b-col sm="4" lg="2">
|
||||
<c-widget08 header='title' text='1,123'>
|
||||
</CWidget08>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidget08 header='title' text='1,123'>
|
||||
<CSimpleLineChart style="height:40px"
|
||||
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
|
||||
label="Sales"
|
||||
borderColor="success"
|
||||
/>
|
||||
</c-widget08>
|
||||
</b-col>
|
||||
<b-col sm="4" lg="2">
|
||||
<c-widget08 header='title' text='1,123'>
|
||||
<c-simple-bar-chart style="height:40px" chartId="c-widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
</CWidget08>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidget08 header='title' text='1,123'>
|
||||
<CSimpleBarChart style="height:40px" chartId="CWidget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' color='danger'/>
|
||||
</c-widget08>
|
||||
</b-col>
|
||||
<b-col sm="4" lg="2">
|
||||
<c-widget08 header='title' text='1,123'>
|
||||
<c-simple-bar-chart style="height:40px" chartId="c-widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
</CWidget08>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidget08 header='title' text='1,123'>
|
||||
<CSimpleBarChart style="height:40px" chartId="CWidget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' color='primary'/>
|
||||
</c-widget08>
|
||||
</b-col>
|
||||
<b-col sm="4" lg="2">
|
||||
<c-widget08 header='title' text='1,123'>
|
||||
<c-simple-bar-chart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
</CWidget08>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidget08 header='title' text='1,123'>
|
||||
<CSimpleBarChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
||||
label='Sales' color='success'/>
|
||||
</c-widget08>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CWidget08>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CWidget06 from './CWidget06'
|
||||
export default {
|
||||
name: 'Widgets',
|
||||
// components: {
|
||||
// CWidget06
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,42 +1,34 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol cols>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<CBreadcrumb :items="items"/>
|
||||
</CCardHeader>
|
||||
<CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
|
||||
<CBreadcrumb :items="items2"/>
|
||||
<CBreadcrumb :items="items3"/>
|
||||
<!-- <Breadcrumb :list="items3"/> -->
|
||||
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CBreadcrumb from './CBreadcrumb'
|
||||
export default {
|
||||
name: 'breadcrumbs',
|
||||
// components: {
|
||||
// CBreadcrumb
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
items: [{
|
||||
text: 'Admin',
|
||||
text: '<b>Admin</b>',
|
||||
href: '#'
|
||||
}, {
|
||||
text: 'Manage',
|
||||
@@ -44,6 +36,8 @@ export default {
|
||||
}, {
|
||||
text: 'Library'
|
||||
}],
|
||||
|
||||
|
||||
items2: [{
|
||||
text: 'Go to dashboard',
|
||||
to: '/dashboard'
|
||||
@@ -56,19 +50,21 @@ export default {
|
||||
},{
|
||||
text: 'Current page'
|
||||
}],
|
||||
items3: ['sd', {
|
||||
|
||||
|
||||
items3: [{
|
||||
text: 'Link',
|
||||
to: '#2',
|
||||
activeClass: 'bg-info p-1'
|
||||
}, {
|
||||
text: 'Active',
|
||||
to: '#3',
|
||||
activeClass: 'bg-warning p-1'
|
||||
activeClass: 'bg-warning p-1',
|
||||
addLinkClasses: 'bg-info p-1'
|
||||
},{
|
||||
text: 'Classes',
|
||||
to: '#4',
|
||||
activeClass: 'bg-danger p-1',
|
||||
current: false
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
+226
-267
@@ -1,69 +1,238 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<!-- <CContainer fluid>
|
||||
<CRow>
|
||||
<CColumn lg md="7" :sm="{'order': 2, offset:'0', size:'4'}" class="hehe">
|
||||
hehe
|
||||
</CColumn>
|
||||
</CRow>
|
||||
</CContainer> -->
|
||||
<CNavbar toggleable="md" light variant="light">
|
||||
<CNavbarToggle class="hehe" @click="test2 = !test2"/>
|
||||
<CLink class="navbar-brand">NavBar</CLink>
|
||||
<CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
|
||||
<CNavbarNav pills class="navbar-nav">
|
||||
<CNavItem>
|
||||
hehehe1
|
||||
</CNavItem>
|
||||
<CNavItem class="nav-item">
|
||||
hehehe1
|
||||
</CNavItem>
|
||||
<CNavItem class="nav-item">
|
||||
hehehe2
|
||||
</CNavItem>
|
||||
<DefaultHeaderDropdownAccnt/>
|
||||
</CNavbarNav>
|
||||
<CNavbarNav class="ml-auto">
|
||||
<CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
|
||||
<c-dropdown-item><i class="fa fa-file" /> Projects
|
||||
<c-badge variant="primary">32</c-badge>
|
||||
</c-dropdown-item>
|
||||
<c-dropdown-item><i class="fa fa-shield" /> Lock Account</c-dropdown-item>
|
||||
<c-dropdown-item><i class="fa fa-lock" /> Logout</c-dropdown-item>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
<br>
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
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>
|
||||
</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.
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
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.
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
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.
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard header="Card outline primary" border-variant="primary">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
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="card-accent-primary" header="Card with primary accent">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
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-warning" header="Card with warning accent">
|
||||
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-danger" header="Card with danger accent">
|
||||
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">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard class="bg-success text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard class="bg-info text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard class="bg-warning text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard class="bg-danger text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard class="bg-secondary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard header="Card title" class="bg-primary">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
<c-card class="bg-secondary" no-body v-if="show" >
|
||||
<CCard class="bg-secondary" no-body v-if="show" >
|
||||
<CCardHeader slot="header">
|
||||
Card with header actions
|
||||
<div class="card-header-actions">
|
||||
<c-link href="#" class="card-header-action btn-setting" >
|
||||
<CLink href="#" class="card-header-action btn-setting" >
|
||||
<i class="icon-settings"></i>
|
||||
</c-link>
|
||||
<c-link class="card-header-action btn-minimize" v-c-collapse:collapse1="test" @click="test = !test" data-duration="600">
|
||||
<i :class="`icon-arrow-${ !test ? 'up' : 'down'}`"></i>
|
||||
</c-link>
|
||||
<c-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
||||
</CLink>
|
||||
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
|
||||
<i :class="`icon-arrow-${ !isCollapsed ? 'up' : 'down'}`"></i>
|
||||
</CLink>
|
||||
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
|
||||
<i class="icon-close"></i>
|
||||
</c-link>
|
||||
</CLink>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<c-card-body id="collapse1">
|
||||
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.
|
||||
</c-card-body>
|
||||
</c-card>
|
||||
<CCollapse slot="body" :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>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</transition>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<c-card>
|
||||
<CCardImg imgSrc="https://picsum.photos/600/300/?image=25" class="mb-2"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<!-- <CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard noWrapper>
|
||||
<CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/>
|
||||
<CCardHeader header="Card title"/>
|
||||
<CCardBody style="max-height:200px;overflow-y:auto">
|
||||
<CCardBody style="max-height:200px;overflow-y:auto">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
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.
|
||||
@@ -71,230 +240,20 @@
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</CCardBody>
|
||||
</c-card>
|
||||
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<c-card footer="Card footer"
|
||||
body="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat."
|
||||
header="<i class='fa fa-check'></i> Card with icon"/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<CCard footer="Card footer">
|
||||
<CCardHeader slot="header">
|
||||
<i class='fa fa-check'></i> Card with icon
|
||||
</CCardHeader>
|
||||
<CCardBody slot="body"
|
||||
title="title"
|
||||
subtitle="subtitle"
|
||||
body="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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
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>
|
||||
</div>
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Card with label
|
||||
<b-badge variant="success" class="float-right">Success</b-badge>
|
||||
</div>
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Card with label
|
||||
<b-badge pill variant="danger" class="float-right">42</b-badge>
|
||||
</div>
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline primary" border-variant="primary">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline secondary" border-variant="secondary">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline success" border-variant="success">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card 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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card 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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline danger" border-variant="danger">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-primary" header="Card with primary accent">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-secondary" header="Card with secondary accent">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-success" header="Card with success accent">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-info" header="Card with info accent">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-warning" header="Card with warning accent">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-danger" header="Card with danger accent">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-primary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-success text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-info text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-warning text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-danger text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-secondary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-primary">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-success">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-danger">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
</CCol>
|
||||
</CRow> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DefaultHeaderDropdownAccnt from'../../containers/DefaultHeaderDropdownAccnt'
|
||||
|
||||
export default {
|
||||
name: 'cards',
|
||||
components: {
|
||||
DefaultHeaderDropdownAccnt
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
show: true,
|
||||
showCollapse: true,
|
||||
test: true,
|
||||
test2: false,
|
||||
form: 1,
|
||||
smh: 'sdfsdf'
|
||||
isCollapsed: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col md="12" lg="9" >
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol md="12" lg="9" >
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Carousel</strong>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/carousel" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CCarousel/>
|
||||
<br>
|
||||
<b-carousel id="carousel1"
|
||||
style="text-shadow: 1px 1px 2px #333;"
|
||||
controls
|
||||
indicators
|
||||
background="#ababab"
|
||||
:interval="4000"
|
||||
:interval="400000"
|
||||
img-width="1024"
|
||||
img-height="480"
|
||||
v-model="slide"
|
||||
@@ -67,9 +67,9 @@
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+106
-119
@@ -1,176 +1,163 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Collapse </strong>
|
||||
<div class="card-header-actions">
|
||||
<div class="Fcard-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/collapse" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
|
||||
<b-collapse id="collapse1" class="mt-2">
|
||||
<b-card>
|
||||
<CButton v-b-toggle.collapse1 variant="primary">Toggle Collapse</CButton>
|
||||
<CCollapse id="collapse1" class="mt-2">
|
||||
<CCard>
|
||||
<p class="card-text">Collapse contents Here</p>
|
||||
<b-btn v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</b-btn>
|
||||
<b-collapse id=collapse1_inner class="mt-2">
|
||||
<b-card>Hello!</b-card>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
<CButton v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</CButton>
|
||||
<CCollapse id=collapse1_inner class="mt-2">
|
||||
<CCard>Hello!</CCard>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<!-- Using modifiers -->
|
||||
<b-btn v-b-toggle.collapse2 class="m-1">Toggle Collapse</b-btn>
|
||||
<CButton v-b-toggle.collapse2 class="m-1">Toggle Collapse</CButton>
|
||||
|
||||
<!-- Using value -->
|
||||
<b-btn v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</b-btn>
|
||||
<CButton v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</CButton>
|
||||
|
||||
<!-- element to collapse -->
|
||||
<b-collapse id="collapse2">
|
||||
<b-card>
|
||||
<CCollapse id="collapse2">
|
||||
<CCard>
|
||||
I am collapsible content!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
|
||||
<b-collapse visible id="collapse3">
|
||||
<b-card>
|
||||
<CButton v-b-toggle.collapse3 class="m-1">Toggle Collapse</CButton>
|
||||
<CCollapse visible id="collapse3">
|
||||
<CCard>
|
||||
I should start open!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-btn @click="showCollapse = !showCollapse"
|
||||
<CButton @click="showCollapse = !showCollapse"
|
||||
:class="showCollapse ? 'collapsed' : null"
|
||||
aria-controls="collapse4"
|
||||
:aria-expanded="showCollapse ? 'true' : 'false'">
|
||||
Toggle Collapse
|
||||
</b-btn>
|
||||
<b-collapse class="mt-2" v-model="showCollapse" id="collapse4">
|
||||
<b-card>
|
||||
</CButton>
|
||||
<CCollapse class="mt-2" v-model="showCollapse" id="collapse4">
|
||||
<CCard>
|
||||
I should start open!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<!-- Single button triggers two b-collapse components -->
|
||||
<b-btn v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</b-btn>
|
||||
<!-- Single button triggers two CCollapse components -->
|
||||
<CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
|
||||
|
||||
<!-- elements to collapse -->
|
||||
<b-collapse id="collapseA" class="mt-2">
|
||||
<b-card>
|
||||
<CCollapse id="collapseA" class="mt-2">
|
||||
<CCard>
|
||||
I am collapsable content A!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
<b-collapse id="collapseB" class="mt-2">
|
||||
<b-card>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
<CCollapse id="collapseB" class="mt-2">
|
||||
<CCard>
|
||||
I am collapsable content B!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div role="tablist">
|
||||
<b-card no-body class="mb-1">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
<CCard noWrapper class="mb-1">
|
||||
<CCardHeader slot="header" 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">
|
||||
<p class="card-text">
|
||||
I start opened because <code>visible</code> is <code>true</code>
|
||||
</p>
|
||||
<p class="card-text">
|
||||
{{ text }}
|
||||
</p>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
<b-card no-body class="mb-1">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="accordion2" accordion="my-accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
<CCard noWrapper class="mb-1">
|
||||
<CCardHeader slot="header" 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">
|
||||
<p class="card-text">
|
||||
{{ text }}
|
||||
</p>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
<b-card no-body class="mb-1">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="accordion3" accordion="my-accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
<CCard noWrapper class="mb-1">
|
||||
<CCardHeader slot="header" 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">
|
||||
<p class="card-text">
|
||||
{{ text }}
|
||||
</p>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+735
-1010
File diff suppressed because it is too large
Load Diff
@@ -1,38 +1,33 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
||||
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
||||
<p>For more information visit website</p>
|
||||
<b-btn variant="primary" href="#">More Info</b-btn>
|
||||
</c-jumbotron>
|
||||
<CButton variant="primary" href="#">More Info</CButton>
|
||||
</CJumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
||||
<small>with slots</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-jumbotron header="Bootstrap 4" lead="">
|
||||
|
||||
<CJumbotron header="Bootstrap 4" lead="">
|
||||
<p slot="lead" class="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
@@ -42,24 +37,22 @@
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
<b-btn variant="primary" href="#">Do Something</b-btn>
|
||||
<b-btn variant="success" href="#">Do Something Else</b-btn>
|
||||
</c-jumbotron>
|
||||
<CButton variant="primary" href="#">Do Something</CButton>
|
||||
<CButton variant="success" href="#">Do Something Else</CButton>
|
||||
</CJumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
||||
<small>variants</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-jumbotron variant="info"
|
||||
<CJumbotron variant="info"
|
||||
text-variant="white"
|
||||
border-variant="dark"
|
||||
header="Bootstrap 4">
|
||||
@@ -73,11 +66,11 @@
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
</c-jumbotron>
|
||||
</CJumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+95
-111
@@ -1,31 +1,29 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<!-- <b-row>
|
||||
<b-col>
|
||||
<b-card>
|
||||
<!-- <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>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row> -->
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow> -->
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
@@ -33,15 +31,13 @@
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
|
||||
@@ -49,17 +45,15 @@
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</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>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
@@ -67,72 +61,66 @@
|
||||
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
|
||||
</div>
|
||||
</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>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</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>
|
||||
</div>
|
||||
</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>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">
|
||||
Cras justo odio
|
||||
<b-badge variant="primary" pill>14</b-badge>
|
||||
<CBadge variant="primary" pill>14</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">
|
||||
Dapibus ac facilisis in
|
||||
<b-badge variant="primary" pill>2</b-badge>
|
||||
<CBadge variant="primary" pill>2</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">
|
||||
Morbi leo risus
|
||||
<b-badge variant="primary" pill>1</b-badge>
|
||||
<CBadge variant="primary" pill>1</CBadge>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants</small>
|
||||
</div>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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>
|
||||
@@ -144,15 +132,15 @@
|
||||
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants active</small>
|
||||
</div>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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>
|
||||
@@ -164,19 +152,17 @@
|
||||
<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>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</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>
|
||||
</div>
|
||||
<b-card-group deck>
|
||||
<b-card header="<b>Card with list group</b>">
|
||||
</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>
|
||||
@@ -188,32 +174,30 @@
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</p>
|
||||
</b-card>
|
||||
<b-card no-body header="<b>Card with flush list group</b>">
|
||||
</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>
|
||||
<b-card-body>
|
||||
<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.
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#" active class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
@@ -249,9 +233,9 @@
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+152
-131
@@ -1,176 +1,197 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<!-- <CCard>
|
||||
<CNavbar toggleable="md" light variant="light">
|
||||
<CNavbarToggle class="hehe" @click="test2 = !test2"/>
|
||||
<CLink class="navbar-brand">NavBar</CLink>
|
||||
<CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
|
||||
<CNavbarNav pills class="navbar-nav">
|
||||
<CNavItem>
|
||||
hehehe1
|
||||
</CNavItem>
|
||||
<CNavItem class="nav-item">
|
||||
hehehe1
|
||||
</CNavItem>
|
||||
<CNavItem class="nav-item">
|
||||
hehehe2
|
||||
</CNavItem>
|
||||
<DefaultHeaderDropdownAccnt/>
|
||||
</CNavbarNav>
|
||||
<CNavbarNav class="ml-auto">
|
||||
<CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
|
||||
<CDropdownItem><i class="fa fa-file" /> Projects
|
||||
<CBadge variant="primary">32</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
|
||||
<CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCard> -->
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-navbar toggleable="md" type="dark" variant="info">
|
||||
|
||||
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
|
||||
|
||||
<b-navbar-brand href="#">NavBar</b-navbar-brand>
|
||||
|
||||
<b-collapse is-nav id="nav_collapse">
|
||||
|
||||
<b-navbar-nav>
|
||||
<b-nav-item href="#">Link</b-nav-item>
|
||||
<b-nav-item href="#" disabled>Disabled</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
</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>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
<b-navbar-nav class="ml-auto">
|
||||
<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>
|
||||
|
||||
<b-nav-form>
|
||||
<b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
|
||||
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
|
||||
</b-nav-form>
|
||||
<CDropdown button-content="Lang"
|
||||
nav
|
||||
placement="bottom-end"
|
||||
>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
|
||||
<!-- <c-nav-item-dropdown text="Lang">
|
||||
<template slot="button-content">
|
||||
<img
|
||||
src="img/avatars/6.jpg"
|
||||
class="img-avatar"
|
||||
alt="admin@bootstrapmaster.com" />
|
||||
</template>
|
||||
<template slot="dropdown">
|
||||
<a href="#" class='dropdown-item'>EN</a>
|
||||
<a href="#" class='dropdown-item'>ES</a>
|
||||
<a href="#" class='dropdown-item'>RU</a>
|
||||
<a href="#" class='dropdown-item'>FA</a>
|
||||
</template>
|
||||
</c-nav-item-dropdown> -->
|
||||
|
||||
<b-nav-item-dropdown right>
|
||||
<!-- Using button-content slot -->
|
||||
<template slot="button-content">
|
||||
<em>User</em>
|
||||
</template>
|
||||
<b-dropdown-item href="#">Profile</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Signout</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-navbar-nav>
|
||||
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CDropdown nav
|
||||
button-content="<em>User</em>"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<CDropdownItem>Profile</CDropdownItem>
|
||||
<CDropdownItem>Signout</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||
<small>brand</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<!-- Image and text -->
|
||||
<b-navbar variant="faded" type="light">
|
||||
<b-navbar-brand tag="h1" href="#">
|
||||
<CNavbar variant="faded" light>
|
||||
<CNavbarBrand href="#">
|
||||
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
|
||||
BootstrapVue
|
||||
</b-navbar-brand>
|
||||
</b-navbar>
|
||||
</CNavbarBrand>
|
||||
</CNavbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||
<small>text</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-navbar toggleable type="light" variant="light">
|
||||
<b-navbar-toggle target="nav_text_collapse"></b-navbar-toggle>
|
||||
<b-navbar-brand>BootstrapVue</b-navbar-brand>
|
||||
<b-collapse is-nav id="nav_text_collapse">
|
||||
<b-navbar-nav>
|
||||
<b-nav-text>Navbar text</b-nav-text>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
<CNavbar toggleable="sm" light variant="light">
|
||||
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
|
||||
<CNavbarBrand>BootstrapVue</CNavbarBrand>
|
||||
<CCollapse :show="navbarText" navbar>
|
||||
<CNavbarNav>
|
||||
<span class="navbar-text">Navbar text</span>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||
<small>dropdown</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-navbar type="dark" variant="primary" toggleable>
|
||||
<b-navbar-toggle target="nav_dropdown_collapse"></b-navbar-toggle>
|
||||
<b-collapse is-nav id="nav_dropdown_collapse">
|
||||
<b-navbar-nav>
|
||||
<b-nav-item href="#">Home</b-nav-item>
|
||||
<b-nav-item href="#">Link</b-nav-item>
|
||||
<CNavbar type="dark" variant="primary">
|
||||
<!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
|
||||
<CCollapse :show="navbarDropdown" navbar> -->
|
||||
<CNavbarNav>
|
||||
<CNavItem href="#">Home</CNavItem>
|
||||
<CNavItem href="#">Link</CNavItem>
|
||||
<!-- Navbar dropdowns -->
|
||||
<b-nav-item-dropdown text="Lang" right>
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
<b-nav-item-dropdown text="User" right>
|
||||
<b-dropdown-item href="#">Account</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Settings</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
<CDropdown button-content="Lang" right nav>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown button-content="User" right nav>
|
||||
<CDropdownItem>Account</CDropdownItem>
|
||||
<CDropdownItem>Settings</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
<!-- </CCollapse> -->
|
||||
</CNavbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||
<small>form</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-navbar type="light" variant="light">
|
||||
<b-nav-form>
|
||||
<b-form-input class="mr-sm-2" type="text" placeholder="Search"></b-form-input>
|
||||
<b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
|
||||
</b-nav-form>
|
||||
</b-navbar>
|
||||
<CNavbar type="light" variant="light">
|
||||
<CForm inline>
|
||||
<CFormInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
<CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||
<small>input group</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-navbar type="light" variant="light">
|
||||
<b-nav-form>
|
||||
<b-input-group left="@">
|
||||
<b-form-input class="mr-sm-2" type="text" placeholder="Username"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-nav-form>
|
||||
</b-navbar>
|
||||
<CNavbar type="light" variant="light">
|
||||
<CForm inline>
|
||||
<CFormInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</div>
|
||||
</b-card>
|
||||
</CCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CNavItemDropdown from './CNavItemDropdown'
|
||||
|
||||
import DefaultHeaderDropdownAccnt from '../../containers/DefaultHeaderDropdownAccnt'
|
||||
export default {
|
||||
name: 'navbars',
|
||||
// components:{
|
||||
// CNavItemDropdown
|
||||
// }
|
||||
components: {
|
||||
DefaultHeaderDropdownAccnt
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
navbarText: false,
|
||||
navbarDropdown: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+116
-127
@@ -1,164 +1,153 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-nav>
|
||||
<c-nav-item active>Active</c-nav-item>
|
||||
<c-nav-item>Link</c-nav-item>
|
||||
<c-nav-item>Another Link</c-nav-item>
|
||||
<c-nav-item disabled>Disabled</c-nav-item>
|
||||
</c-nav>
|
||||
<CNav>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem title="Link"/>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>icons</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CNav>
|
||||
<CNavItem active>
|
||||
<i class="icon-basket-loaded"></i>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Link
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Another Link
|
||||
</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</div>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-nav tabs v-model="item" tab-content>
|
||||
<!-- <c-nav-item index="hehe2">Active</c-nav-item> -->
|
||||
<c-nav-item id="hehe">
|
||||
<i class="icon-basket-loaded"></i> Active
|
||||
<div slot="tab">hehe</div>
|
||||
</c-nav-item>
|
||||
<c-nav-item>
|
||||
Link
|
||||
|
||||
</c-nav-item>
|
||||
<c-nav-item>
|
||||
Another Link
|
||||
<div slot="tab">hehe3</div>
|
||||
</c-nav-item>
|
||||
<c-nav-item disabled>Disabled</c-nav-item>
|
||||
|
||||
</c-nav>
|
||||
<!-- <CTab fade :activeItem="item">
|
||||
<CTabItem id="hehe2">text1</CTabItem>
|
||||
<CTabItem>text1</CTabItem>
|
||||
<CTabItem>text2</CTabItem>
|
||||
<CTabItem @click="smh = 1">text3</CTabItem>
|
||||
<CTabItem>text4</CTabItem>
|
||||
</CTab> -->
|
||||
<CNav tabs>
|
||||
<CNavItem active>
|
||||
Active
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Link
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Another Link
|
||||
</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</div>
|
||||
|
||||
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header" @click="item++">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header" @click="item++">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CNav pills>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</div>
|
||||
<div @click="item--">
|
||||
<c-nav pills>
|
||||
<c-nav-item active>Active</c-nav-item>
|
||||
<c-nav-item>Link</c-nav-item>
|
||||
<c-nav-item>Another Link</c-nav-item>
|
||||
<c-nav-item disabled>Disabled</c-nav-item>
|
||||
</c-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-nav fill tabs>
|
||||
<c-nav-item active>Active</c-nav-item>
|
||||
<c-nav-item>Link</c-nav-item>
|
||||
<c-nav-item>Link with a long name </c-nav-item>
|
||||
<c-nav-item disabled>Disabled</c-nav-item>
|
||||
</c-nav>
|
||||
<CNav fill tabs>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Link with a long name </CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-nav justified tabs>
|
||||
<c-nav-item active>Active</c-nav-item>
|
||||
<c-nav-item>Link</c-nav-item>
|
||||
<c-nav-item>Link with a long name </c-nav-item>
|
||||
<c-nav-item disabled>Disabled</c-nav-item>
|
||||
</c-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>dropdown support</small>
|
||||
<CNav justified tabs>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Link with a long name </CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</div>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>dropdown support</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-nav pills>
|
||||
<c-nav-item active>Active</c-nav-item>
|
||||
<c-nav-item>Link</c-nav-item>
|
||||
<c-dropdown id="nav7_ddown" text="Dropdown" right>
|
||||
<a class="nav-link dropdown-toggle" slot="button">Dropdown</a>
|
||||
<c-dropdown-item>one</c-dropdown-item>
|
||||
<c-dropdown-item>two</c-dropdown-item>
|
||||
<c-dropdown-divider></c-dropdown-divider>
|
||||
<c-dropdown-item>three</c-dropdown-item>
|
||||
</c-dropdown>
|
||||
</c-nav>
|
||||
<CNav pills>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CDropdown id="nav7_ddown"
|
||||
nav
|
||||
placement="bottom-end"
|
||||
button-content="Dropdown"
|
||||
>
|
||||
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
|
||||
<CDropdownItem>one</CDropdownItem>
|
||||
<CDropdownItem>two</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>three</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>vertical variation</small>
|
||||
</div>
|
||||
<div>
|
||||
<c-nav vertical class="w-25">
|
||||
<c-nav-item active>Active</c-nav-item>
|
||||
<c-nav-item>Link</c-nav-item>
|
||||
<c-nav-item>Another Link</c-nav-item>
|
||||
<c-nav-item disabled>Disabled</c-nav-item>
|
||||
</c-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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>
|
||||
</CCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CNav from './CNav'
|
||||
// import CNavItem from './CNavItem'
|
||||
// import CTab from './CTab'
|
||||
// import CTabItem from './CTabItem'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'navs',
|
||||
data () {
|
||||
return {
|
||||
item: 2
|
||||
}
|
||||
},
|
||||
// components: {
|
||||
// CNav,
|
||||
// CNavItem,
|
||||
// CTab,
|
||||
// CTabItem
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,121 +1,70 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<h6>CPagination</h6>
|
||||
<CPagination v-model="currentPage2"
|
||||
:itemsNumber="1111"
|
||||
@change="hehe"
|
||||
size="lg"
|
||||
align="center"
|
||||
:limit="6"
|
||||
:noDots="false"
|
||||
:noDoubleArrows="false"
|
||||
:noArrows="false"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Default</h6>
|
||||
<b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<CPagination v-model="currentPage" :pages="10"/>
|
||||
<br>
|
||||
|
||||
<h6>Small</h6>
|
||||
<b-pagination size="sm" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<CPagination size="sm" v-model="currentPage" :pages="10"/>
|
||||
<br>
|
||||
|
||||
<div class="d-sm-down-none">
|
||||
<h6>Large</h6>
|
||||
<b-pagination size="lg" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<CPagination size="lg" v-model="currentPage" :pages="10"/>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Pagination </strong>
|
||||
<small>alignment</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<h6>Left alignment (default)</h6>
|
||||
<b-pagination :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<CPagination v-model="currentPage" :pages="10"/>
|
||||
<br>
|
||||
|
||||
<h6>Center alignment</h6>
|
||||
<b-pagination align="center" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<CPagination align="center" :pages="10" v-model="currentPage"/>
|
||||
<br>
|
||||
|
||||
<h6>Right (end) alignment</h6>
|
||||
<b-pagination align="right" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<CPagination align="end" v-model="currentPage" :pages="10"/>
|
||||
<br>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Pagination </strong>
|
||||
<small>navigation</small>
|
||||
</div>
|
||||
<div>
|
||||
<h6>Default</h6>
|
||||
<b-pagination-nav base-url="#" :number-of-pages="10" v-model="currentPage"/>
|
||||
|
||||
<h6 class="mt-4">With link generator function</h6>
|
||||
<b-pagination-nav :link-gen="linkGen" :number-of-pages="10" v-model="currentPage"/>
|
||||
<br>
|
||||
|
||||
<div class="mt-4">currentPage: {{currentPage}}</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</CCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CPagination from './CPagination'
|
||||
|
||||
export default {
|
||||
name: 'paginations',
|
||||
// components: {
|
||||
// CPagination
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
currentPage: 3,
|
||||
currentPage2: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
linkGen (pageNum) {
|
||||
return '#page/' + pageNum + '/foobar'
|
||||
},
|
||||
hehe (val) {
|
||||
// console.log(this.currentPage)
|
||||
}
|
||||
|
||||
}
|
||||
// methods: {
|
||||
// linkGen (pageNum) {
|
||||
// return '#page/' + pageNum + '/foobar'
|
||||
// },
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
+108
-107
@@ -1,178 +1,178 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol cols="6">
|
||||
<div class="my-3 text-center">
|
||||
<b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">
|
||||
<CButton
|
||||
v-c-popover.hover="{
|
||||
header: 'Popover header',
|
||||
content: 'I am popover content!'
|
||||
}"
|
||||
>
|
||||
Hover Me
|
||||
</b-btn>
|
||||
</CButton>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
</CCol>
|
||||
<CCol cols="6">
|
||||
<div class="my-3 text-center">
|
||||
<b-btn id="popoverButton-open" variant="primary">Button</b-btn>
|
||||
|
||||
<b-popover show target="popoverButton-open" title="Popover">
|
||||
I start <strong>open</strong>
|
||||
</b-popover>
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover.hover.active="{
|
||||
header: 'Popover!',
|
||||
content: 'I start <strong>open</strong>'
|
||||
}"
|
||||
>
|
||||
Button
|
||||
</CButton>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
|
||||
<small>placement</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="my-3">
|
||||
<b-row>
|
||||
<b-col md="4" class="py-4 text-center"
|
||||
v-for="placement in placements" :key="placement">
|
||||
<b-btn :id="'exPopover1-'+placement" variant="primary">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
class="py-4 text-center"
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
>
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover.hover.focus="{
|
||||
header: 'Popover!',
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</b-btn>
|
||||
<b-popover :target="'exPopover1-'+placement"
|
||||
:placement="placement"
|
||||
title="Popover!"
|
||||
triggers="hover focus"
|
||||
:content="`Placement ${placement}`">
|
||||
</b-popover>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card class="d-sm-down-none"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</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>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exPopover2" variant="primary">Using properties</b-btn>
|
||||
</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>
|
||||
</b-col>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exPopover3" variant="primary">Using slots</b-btn>
|
||||
</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>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
|
||||
<small>show</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-sync" variant="primary">I have a popover</b-btn>
|
||||
<CButton id="popoverButton-sync" variant="primary">I have a popover</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="show = !show">Toggle Popover</b-btn>
|
||||
<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>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popover </strong>
|
||||
<small>open/close events</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-event" variant="primary">I have a popover</b-btn>
|
||||
<CButton id="popoverButton-event" variant="primary">I have a popover</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="onOpen">Open</b-btn>
|
||||
<b-btn class="px-1" @click="onClose">Close</b-btn>
|
||||
<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>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popover </strong>
|
||||
<small>enable/disable events</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-disableevent" variant="primary">I have a popover</b-btn>
|
||||
<CButton id="popoverButton-disableevent" variant="primary">I have a popover</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="onEnable">Enable</b-btn>
|
||||
<b-btn class="px-1" @click="onDisable">Disable</b-btn>
|
||||
<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>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard> -->
|
||||
<!-- <CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.top="'I am Top'"
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol md="3" class="py-3 text-center">
|
||||
<CButton v-b-popover.hover.top="'I am Top'"
|
||||
title="Popover!"
|
||||
variant="primary">Top</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.left="'I am Left'"
|
||||
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</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.right="'I am Right'"
|
||||
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</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.bottom="'I am Bottom'"
|
||||
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</b-btn>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
variant="primary">Bottom</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCard> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -183,12 +183,13 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'topright', 'top', 'topleft',
|
||||
'bottomright', 'bottom', 'bottomleft',
|
||||
'righttop', 'right', 'lefttop',
|
||||
'rightbottom', 'left', 'leftbottom'
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'left-start', 'left', 'left-end'
|
||||
],
|
||||
show: false
|
||||
show: false,
|
||||
counter: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
+84
-100
@@ -1,155 +1,139 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-progress :value="counter" :max="max" show-progress animated></c-progress>
|
||||
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
|
||||
<CProgress class="mt-1" :max="max" show-value>
|
||||
<CProgressBar :value="counter*(6/10)" color="success"/>
|
||||
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
|
||||
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
|
||||
<CProgressBar :value="counter*(6/10)" variant="success"/>
|
||||
<CProgressBar :value="counter*(2.5/10)" variant="warning"/>
|
||||
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
|
||||
</CProgress>
|
||||
<b-btn class="mt-4" @click="clicked">Click me</b-btn>
|
||||
<CButton class="mt-4" @click="clicked">Click me</CButton>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<h6>No label</h6>
|
||||
<b-progress :value="value" :max="max2" class="mb-3"></b-progress>
|
||||
<CProgress :value="value" :max="max2" class="mb-3"></CProgress>
|
||||
<h6>Value label</h6>
|
||||
<b-progress :value="value" :max="max2" show-value class="mb-3"></b-progress>
|
||||
<CProgress :value="value" :max="max2" show-value class="mb-3"></CProgress>
|
||||
<h6>Progress label</h6>
|
||||
<b-progress :value="value" :max="max2" show-progress class="mb-3"></b-progress>
|
||||
<CProgress :value="value" :max="max2" show-progress class="mb-3"></CProgress>
|
||||
<h6>Value label with precision</h6>
|
||||
<b-progress :value="value" :max="max2" :precision="2" show-value class="mb-3"></b-progress>
|
||||
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"></CProgress>
|
||||
<h6>Progress label with precision</h6>
|
||||
<b-progress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></b-progress>
|
||||
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></CProgress>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<h6>Default width</h6>
|
||||
<b-progress :value="value3" class="mb-3"></b-progress>
|
||||
<CProgress :value="value3" class="mb-3"></CProgress>
|
||||
<h6>Custom widths</h6>
|
||||
<b-progress :value="value3" class="w-75 mb-2"></b-progress>
|
||||
<b-progress :value="value3" class="w-50 mb-2"></b-progress>
|
||||
<b-progress :value="value3" class="w-25"></b-progress>
|
||||
<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>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<h6>Default height</h6>
|
||||
<b-progress :value="value3" show-progress class="mb-3"></b-progress>
|
||||
<CProgress :value="value3" show-progress class="mb-3"></CProgress>
|
||||
<h6>Custom heights</h6>
|
||||
<b-progress height="2rem" :value="value3" show-progress class="mb-2"></b-progress>
|
||||
<b-progress height="20px" :value="value3" show-progress class="mb-2"></b-progress>
|
||||
<b-progress height="2px" :value="value3"></b-progress>
|
||||
<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>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<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">
|
||||
<b-progress :value="bar.value"
|
||||
<CProgress :value="bar.value"
|
||||
:variant="bar.variant"
|
||||
:key="bar.variant"
|
||||
></b-progress>
|
||||
></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-progress :value="25" variant="success" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-progress :value="50" variant="info" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-progress :value="75" variant="warning" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-progress :value="100" variant="danger" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-button variant="secondary" @click="striped = !striped">
|
||||
<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>
|
||||
<CProgress :value="100" variant="danger" :striped="striped" class="mb-2"></CProgress>
|
||||
<CButton variant="secondary" @click="striped = !striped">
|
||||
{{ striped ? 'Remove' : 'Add'}} Striped
|
||||
</b-button>
|
||||
</CButton>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-progress :value="25" variant="success" striped :animated="animate" class="mb-2"></b-progress>
|
||||
<b-progress :value="50" variant="info" striped :animated="animate" class="mb-2"></b-progress>
|
||||
<b-progress :value="75" variant="warning" striped :animated="animate" class="mb-2"></b-progress>
|
||||
<b-progress :value="100" variant="danger" :animated="animate" class="mb-3"></b-progress>
|
||||
<b-button variant="secondary" @click="animate = !animate">
|
||||
<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>
|
||||
<CProgress :value="100" variant="danger" :animated="animate" class="mb-3"></CProgress>
|
||||
<CButton variant="secondary" @click="animate = !animate">
|
||||
{{ animate ? 'Stop' : 'Start'}} Animation
|
||||
</b-button>
|
||||
</CButton>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-progress :max="max3" class="mb-3">
|
||||
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-progress show-progress :max="max3" class="mb-3">
|
||||
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-progress show-value striped :max="max3" class="mb-3">
|
||||
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-progress :max="max3" class="mb-3">
|
||||
<b-progress-bar variant="primary" :value="values[0]" show-progress></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]" animated show-progress></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]" striped show-progress></b-progress-bar>
|
||||
</b-progress>
|
||||
<CProgress :max="max3" class="mb-3">
|
||||
<CProgressBar variant="primary" :value="values[0]"></CProgressBar>
|
||||
<CProgressBar variant="success" :value="values[1]"></CProgressBar>
|
||||
<CProgressBar variant="info" :value="values[2]"></CProgressBar>
|
||||
</CProgress>
|
||||
<CProgress show-progress :max="max3" class="mb-3">
|
||||
<CProgressBar variant="primary" :value="values[0]"></CProgressBar>
|
||||
<CProgressBar variant="success" :value="values[1]"></CProgressBar>
|
||||
<CProgressBar variant="info" :value="values[2]"></CProgressBar>
|
||||
</CProgress>
|
||||
<CProgress show-value striped :max="max3" class="mb-3">
|
||||
<CProgressBar variant="primary" :value="values[0]"></CProgressBar>
|
||||
<CProgressBar variant="success" :value="values[1]"></CProgressBar>
|
||||
<CProgressBar variant="info" :value="values[2]"></CProgressBar>
|
||||
</CProgress>
|
||||
<CProgress :max="max3" class="mb-3">
|
||||
<CProgressBar variant="primary" :value="values[0]" show-progress></CProgressBar>
|
||||
<CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar>
|
||||
<CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar>
|
||||
</CProgress>
|
||||
</div>
|
||||
</b-card>
|
||||
</CCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+397
-381
@@ -5,16 +5,16 @@
|
||||
<p>myFlag2: {{myFlag2}}</p>
|
||||
<CSwitch v-model="myFlag1"/>
|
||||
<CSwitch v-model="myFlag2" checked @change="test" /> -->
|
||||
<b-row>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card v-if="true">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard v-if="true">
|
||||
<CCardHeader slot="header">
|
||||
<h5>
|
||||
Radio switches
|
||||
<b-badge :variant="radio" class="mr-auto">{{radio}}</b-badge>
|
||||
<b-badge variant="danger" class="float-right">NEW</b-badge>
|
||||
<CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
|
||||
<CBadge variant="danger" class="float-right">NEW</CBadge>
|
||||
</h5>
|
||||
</div>
|
||||
</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"
|
||||
@@ -28,16 +28,16 @@
|
||||
:value="variant"
|
||||
v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
|
||||
/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch default
|
||||
<b-badge variant="primary">{{checker}}</b-badge>
|
||||
</div>
|
||||
<CBadge variant="primary">{{checker}}</CBadge>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1"
|
||||
variant="primary"
|
||||
checked
|
||||
@@ -62,396 +62,412 @@
|
||||
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
|
||||
/>
|
||||
<CSwitch class="mx-1" variant="primary" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch pills
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="pill"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="pill" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
3d Switch
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
3d Switch <small><code>disabled</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
3d Switch <small><code>label</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline />
|
||||
<c-switch class="mx-1" variant="success" checked outline />
|
||||
<c-switch class="mx-1" variant="warning" checked outline />
|
||||
<c-switch class="mx-1" variant="info" checked outline />
|
||||
<c-switch class="mx-1" variant="danger" checked outline />
|
||||
<c-switch class="mx-1" variant="light" checked outline />
|
||||
<c-switch class="mx-1" variant="dark" checked outline />
|
||||
<c-switch class="mx-1" variant="primary" outline disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>outline shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline shape="pill"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>outline="alt" shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked />
|
||||
<c-switch class="mx-1" variant="secondary" checked />
|
||||
<c-switch class="mx-1" variant="success" checked />
|
||||
<c-switch class="mx-1" variant="warning" checked />
|
||||
<c-switch class="mx-1" variant="info" checked />
|
||||
<c-switch class="mx-1" variant="danger" checked />
|
||||
<c-switch class="mx-1" variant="light" checked />
|
||||
<c-switch class="mx-1" variant="dark" checked />
|
||||
<c-switch class="mx-1" variant="primary" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline />
|
||||
<c-switch class="mx-1" variant="success" checked outline />
|
||||
<c-switch class="mx-1" variant="warning" checked outline />
|
||||
<c-switch class="mx-1" variant="info" checked outline />
|
||||
<c-switch class="mx-1" variant="danger" checked outline />
|
||||
<c-switch class="mx-1" variant="light" checked outline />
|
||||
<c-switch class="mx-1" variant="dark" checked outline />
|
||||
<c-switch class="mx-1" variant="primary" outline disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
|
||||
<c-switch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
|
||||
</b-card>shape
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>shape
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<b-col md="12">
|
||||
<b-card no-body>
|
||||
<div slot="header">
|
||||
<CCol md="12">
|
||||
<CCard noWrapper>
|
||||
<CCardHeader slot="header">
|
||||
Sizes
|
||||
</div>
|
||||
<b-card-body class="p-0">
|
||||
<b-table hover striped responsive="sm" class="table-align-middle mb-0" :items="items" :fields="fields">
|
||||
<template slot="example" slot-scope="data">
|
||||
<c-switch :variant="data.value.variant" :color="data.value.color" :size="data.value.size" :checked="data.value.checked"/>
|
||||
</CCardHeader>
|
||||
<CCardBody slot="body" class="p-0">
|
||||
<CTable
|
||||
hover
|
||||
striped
|
||||
class="table-align-middle mb-0"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
noSorting
|
||||
>
|
||||
<template #example="{item}">
|
||||
<td>
|
||||
<CSwitch
|
||||
:shape="item.example.shape"
|
||||
:variant="item.example.variant"
|
||||
:size="item.example.size"
|
||||
:checked="item.example.checked"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
<template slot="size_prop" slot-scope="data">
|
||||
<span v-html="data.item.size_prop"></span>
|
||||
<template #size_prop="{item}">
|
||||
<td>
|
||||
<span v-html="item.size_prop"></span>
|
||||
</td>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -476,9 +492,9 @@ export default {
|
||||
{key: 'size_prop', label: 'Size prop'}
|
||||
],
|
||||
items: [
|
||||
{size: 'Large', example: {variant: '3d', color: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'},
|
||||
{size: 'Normal', example: {variant: '3d', color: 'primary', size: '', checked: true}, size_prop: '-'},
|
||||
{size: 'Small', example: {variant: '3d', color: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
|
||||
{size: 'Large', example: {shape: '3d', variant: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'},
|
||||
{size: 'Normal', example: {shape: '3d', variant: 'primary', size: '', checked: true}, size_prop: '-'},
|
||||
{size: 'Small', example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
|
||||
],
|
||||
checker: 'yes',
|
||||
radio: 'primary',
|
||||
|
||||
+34
-87
@@ -1,98 +1,48 @@
|
||||
<template>
|
||||
<b-card :header="caption">
|
||||
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
|
||||
<template slot="status" slot-scope="data">
|
||||
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
|
||||
<CCard :header="caption">
|
||||
<CTable
|
||||
:hover="hover"
|
||||
:striped="striped"
|
||||
:bordered="bordered"
|
||||
:small="small"
|
||||
:fixed="fixed"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
:per-page="small ? 10 : 5"
|
||||
:dark="dark"
|
||||
noSorting
|
||||
>
|
||||
<template v-slot:status="{item}">
|
||||
<td>
|
||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
</template>
|
||||
</b-table>
|
||||
<nav>
|
||||
<b-pagination :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
|
||||
</nav>
|
||||
</b-card>
|
||||
</CTable>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Randomize array element order in-place.
|
||||
* Using Durstenfeld shuffle algorithm.
|
||||
*/
|
||||
const shuffleArray = (array) => {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
let j = Math.floor(Math.random() * (i + 1))
|
||||
let temp = array[i]
|
||||
array[i] = array[j]
|
||||
array[j] = temp
|
||||
}
|
||||
return array
|
||||
}
|
||||
|
||||
import items from '../users/UsersData'
|
||||
export default {
|
||||
name: 'c-table',
|
||||
name: 'TableWrapper',
|
||||
props: {
|
||||
items: Array,
|
||||
fields: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['username', 'registered', 'role', 'status']
|
||||
}
|
||||
},
|
||||
caption: {
|
||||
type: String,
|
||||
default: 'Table'
|
||||
},
|
||||
hover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
striped: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
items: shuffleArray([
|
||||
{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
||||
]),
|
||||
fields: [
|
||||
{key: 'username'},
|
||||
{key: 'registered'},
|
||||
{key: 'role'},
|
||||
{key: 'status'}
|
||||
],
|
||||
currentPage: 1,
|
||||
perPage: 5,
|
||||
totalRows: 0
|
||||
}
|
||||
hover: Boolean,
|
||||
striped: Boolean,
|
||||
bordered: Boolean,
|
||||
small: Boolean,
|
||||
fixed: Boolean,
|
||||
dark: Boolean
|
||||
},
|
||||
methods: {
|
||||
getBadge (status) {
|
||||
@@ -101,9 +51,6 @@ export default {
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
},
|
||||
getRowCount (items) {
|
||||
return items.length
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+114
-61
@@ -1,8 +1,14 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="12">
|
||||
<b-card header="test1 ">
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CCard header="test1 ">
|
||||
|
||||
<!-- <CTable :items="items.slice(0)"
|
||||
noSorting
|
||||
striped
|
||||
/> -->
|
||||
|
||||
<CTable :items="items.slice(0)"
|
||||
:fields="fields"
|
||||
:activePage="page"
|
||||
@@ -14,7 +20,7 @@
|
||||
smalls
|
||||
noPagination
|
||||
@row-clicked2="(item, index) => toggleDetails(index)"
|
||||
loading
|
||||
loadings
|
||||
hover
|
||||
striped
|
||||
optionsRow="onlyFilter2"
|
||||
@@ -39,20 +45,21 @@
|
||||
<td slot="status" slot-scope="{item}">
|
||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
<!-- <td slot="show_details" slot-scope="{item, index}">
|
||||
<td slot="show_details" slot-scope="{item, index}">
|
||||
<button class="btn btn-primary" @click="toggleDetails(index)">
|
||||
{{details.includes(index) ? 'Hide' : 'Show'}}
|
||||
</button>
|
||||
</td> -->
|
||||
<!-- <td slot="index-col"
|
||||
</td>
|
||||
<td slot="index-col"
|
||||
slot-scope="{index}"
|
||||
@click="toggleDetails(index)"
|
||||
style="cursor:pointer"
|
||||
class="text-center"
|
||||
>
|
||||
<i class="icons font-lg d-block cui-chevron-right"
|
||||
style="transition: transform 0.4s"
|
||||
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"></i>
|
||||
</td> -->
|
||||
</td>
|
||||
<CCollapse :show="details.includes(index)"
|
||||
slot="details"
|
||||
slot-scope="{item, index}">
|
||||
@@ -67,55 +74,94 @@
|
||||
align="center"
|
||||
size="lg"
|
||||
/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col sm="12">
|
||||
<b-card header="test2">
|
||||
<CTable :items="items.slice(0)"
|
||||
:fields="fields"
|
||||
:perPage="5"
|
||||
indexCol="onlyIndexes2"
|
||||
filterRow
|
||||
optionsRow="onlyFilter2"
|
||||
:paginationProps="{align:'center', size:'lg'}"
|
||||
noPagination
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CCard header="test2">
|
||||
<CTable
|
||||
:items="items.slice(0)"
|
||||
:fields="fields"
|
||||
:perPage="5"
|
||||
indexCol="onlyCleaner"
|
||||
filterRow
|
||||
optionsRow="onlyFilter"
|
||||
:paginationProps="{align:'center', size:'lg'}"
|
||||
>
|
||||
<td slot="status" slot-scope="{item}">
|
||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
</CTable>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<b-row @click="test">
|
||||
<b-col lg="6">
|
||||
<old-table caption="<i class='fa fa-align-justify' items='{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}' ></i> Simple Table"></old-table>
|
||||
</b-col><!--/.col-->
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
caption="<i class='fa fa-align-justify'></i> Simple Table"
|
||||
/>
|
||||
</CCol><!--/.col-->
|
||||
|
||||
<b-col lg="6">
|
||||
<old-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></old-table>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
striped
|
||||
caption="<i class='fa fa-align-justify'></i> Striped Table"
|
||||
/>
|
||||
</CCol><!--/.col-->
|
||||
</CRow><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col lg="6">
|
||||
<old-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></old-table>
|
||||
</b-col><!--/.col-->
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
small
|
||||
caption="<i class='fa fa-align-justify'></i> Condensed Table"
|
||||
/>
|
||||
</CCol><!--/.col-->
|
||||
|
||||
<b-col lg="6">
|
||||
<old-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></old-table>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
fixed
|
||||
bordered
|
||||
caption="<i class='fa fa-align-justify'></i> Bordered Table"
|
||||
/>
|
||||
</CCol><!--/.col-->
|
||||
</CRow><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col sm="12">
|
||||
<old-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></old-table>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
hover
|
||||
striped
|
||||
bordered
|
||||
small
|
||||
fixed
|
||||
caption="<i class='fa fa-align-justify'></i> Combined All Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
hover
|
||||
striped
|
||||
bordered
|
||||
small
|
||||
fixed
|
||||
dark
|
||||
caption="<i class='fa fa-align-justify'></i> Combined All Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -123,7 +169,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import oldTable from './Table.vue'
|
||||
import CTableWrapper from './Table.vue'
|
||||
|
||||
// const fields = ['username', 'registered', 'role']
|
||||
const fields = [
|
||||
@@ -134,17 +180,17 @@ const fields = [
|
||||
// { key: 'show_details' , label:'',_style:'width:1%', noSorting: true, noFilter: true },
|
||||
]
|
||||
const items = [
|
||||
{number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', _classes: 'table-success2',_cellClasses: {role: 'table-success'}, role: 'Member', status: 'Active'},
|
||||
{number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
|
||||
{number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
|
||||
{number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
@@ -156,14 +202,14 @@ const items = [
|
||||
{number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
|
||||
{number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
||||
{number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'tables',
|
||||
components: { oldTable },
|
||||
components: { CTableWrapper },
|
||||
data () {
|
||||
return {
|
||||
items: items,
|
||||
@@ -182,22 +228,29 @@ export default {
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
},
|
||||
test () {
|
||||
this.$refs.table.changeSort('username')
|
||||
this.$refs.table.filter = 't'
|
||||
// console.log(this.items)
|
||||
},
|
||||
test3 (item, index) {
|
||||
alert(index + ' - ' + item.username)
|
||||
// console.log()
|
||||
// test () {
|
||||
// this.$refs.table.changeSort('username')
|
||||
// this.$refs.table.filter = 't'
|
||||
// // console.log(this.items)
|
||||
// },
|
||||
shuffleArray (array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
let j = Math.floor(Math.random() * (i + 1))
|
||||
let temp = array[i]
|
||||
array[i] = array[j]
|
||||
array[j] = temp
|
||||
}
|
||||
return array
|
||||
},
|
||||
log(val) {
|
||||
console.log(val)
|
||||
},
|
||||
toggleDetails (index) {
|
||||
// console.log('hehe')
|
||||
const position = this.details.indexOf(index)
|
||||
position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
|
||||
},
|
||||
getItems () {
|
||||
return this.shuffleArray(this.items.slice(0))
|
||||
}
|
||||
}
|
||||
// computed: {
|
||||
|
||||
+130
-91
@@ -1,122 +1,118 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col xs="12" lg="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Tabs
|
||||
</div>
|
||||
<b-tabs>
|
||||
<b-tab title="Home" active>
|
||||
<br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
</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.
|
||||
</b-tab>
|
||||
<b-tab title="Profile" >
|
||||
<br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
</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.
|
||||
</b-tab>
|
||||
<b-tab title="Disabled" disabled>
|
||||
<br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
</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.
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" lg="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Tabs with icons
|
||||
</div>
|
||||
<b-tabs>
|
||||
<b-tab active>
|
||||
</CCardHeader>
|
||||
<CTabs addTabClasses="mt-1">
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<i class="icon-calculator"></i>
|
||||
</template>
|
||||
<br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
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.
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-basket-loaded"></i>
|
||||
</template>
|
||||
<br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
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.
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-pie-chart"></i>
|
||||
</template>
|
||||
<br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
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.
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" lg="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Tabs with icons
|
||||
</div>
|
||||
<b-tabs v-model="tabIndex[0]">
|
||||
<b-tab active>
|
||||
<template slot="title">
|
||||
<i class="icon-calculator"></i> {{tabs[0]}}
|
||||
</template>
|
||||
<br> 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.
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template slot="title">
|
||||
<i class="icon-basket-loaded"></i> {{tabs[1]}}
|
||||
</template>
|
||||
<br>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.
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template slot="title">
|
||||
<i class="icon-pie-chart"></i> {{tabs[2]}}
|
||||
</template>
|
||||
<br>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.
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" lg="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Tabs vertical
|
||||
</div>
|
||||
<b-card no-body>
|
||||
<b-tabs card pills vertical nav-wrapper-class="w-40" v-model="tabIndex[1]">
|
||||
<b-tab active>
|
||||
</CCardHeader>
|
||||
<CTabs
|
||||
addTabClasses="mt-1"
|
||||
card
|
||||
>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<i class="icon-calculator"></i> {{tabs[0]}}
|
||||
</template>
|
||||
@@ -125,8 +121,8 @@
|
||||
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.
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-basket-loaded"></i> {{tabs[1]}}
|
||||
</template>
|
||||
@@ -135,8 +131,8 @@
|
||||
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.
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-pie-chart"></i> {{tabs[2]}}
|
||||
</template>
|
||||
@@ -145,12 +141,55 @@
|
||||
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.
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</b-card>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
+104
-122
@@ -1,189 +1,171 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Tooltips </strong><small><code>v-b-tooltip</code> directive</small>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap Tooltips </strong>
|
||||
<small><code>v-c-tooltip</code> directive</small>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol cols="6">
|
||||
<div class="text-center my-3">
|
||||
<b-btn v-b-tooltip.hover title="I am a tooltip!">Hover Me</b-btn>
|
||||
<CButton v-c-tooltip.hover="'I am a tooltip!'">
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
</CCol>
|
||||
<CCol cols="6">
|
||||
<div class="text-center my-3">
|
||||
<b-btn id="tooltipButton-2" variant="primary">Button</b-btn>
|
||||
<b-tooltip show target="tooltipButton-2">
|
||||
I start open
|
||||
</b-tooltip>
|
||||
<CButton v-c-tooltip.hover.active="'I start open!'">
|
||||
Button
|
||||
</CButton>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>b-tooltip</code> component</small>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exButton1" variant="outline-success">Live chat</b-btn>
|
||||
</b-col>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exButton2" variant="outline-success">Html chat</b-btn>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</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>
|
||||
|
||||
<!-- Tooltip title specified via prop title -->
|
||||
<b-tooltip target="exButton1" title="Online!"></b-tooltip>
|
||||
|
||||
<!-- HTML title specified via default slot -->
|
||||
<b-tooltip target="exButton2" placement="bottom">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>show</code> prop</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="text-center">
|
||||
<b-btn id="tooltipButton-1" variant="primary">I have a tooltip</b-btn>
|
||||
<CButton id="tooltipButton-1" variant="primary">I have a tooltip</CButton>
|
||||
<br><br>
|
||||
<b-btn @click="show = !show">Toggle Tooltip</b-btn>
|
||||
<CButton @click="show = !show">Toggle Tooltip</CButton>
|
||||
|
||||
<b-tooltip :show.sync="show" target="tooltipButton-1" placement="top">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>open close</code> events</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="tooltipButton-showEvent" variant="primary">I have a tooltip</b-btn>
|
||||
<CButton id="tooltipButton-showEvent" variant="primary">I have a tooltip</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1 mr-1" @click="onOpen">Open</b-btn>
|
||||
<b-btn class="px-1" @click="onClose">Close</b-btn>
|
||||
<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>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer"
|
||||
id="boundary">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard id="boundary">
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>enable disable</code> events</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="tooltipButton-disable" variant="primary">I have a tooltip</b-btn>
|
||||
<CButton id="tooltipButton-disable" variant="primary">I have a tooltip</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn @click="disabled = !disabled" class="mr-1">
|
||||
<CButton @click="disabled = !disabled" class="mr-1">
|
||||
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
|
||||
</b-btn>
|
||||
</CButton>
|
||||
|
||||
<b-btn @click="disableByRef">
|
||||
<CButton @click="disableByRef">
|
||||
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by $ref event
|
||||
</b-btn>
|
||||
</CButton>
|
||||
|
||||
<b-tooltip :disabled.sync="disabled" ref="tooltip2" target="tooltipButton-disable">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<b-btn @click="test" id="refButton2">
|
||||
test
|
||||
</b-btn><br><br>
|
||||
<b-btn id="refButton" data-toggle="tooltip" class="px-1" >button</b-btn>
|
||||
<CTooltip targetId="refButton"
|
||||
:placement="placement"
|
||||
content="sas"
|
||||
ref="tooltip"
|
||||
:active="true"
|
||||
:popover="show"
|
||||
popoverHeader="smh"
|
||||
:delay="smh"
|
||||
:offset="smh"
|
||||
boundaries="boundary1"
|
||||
:appendToBody="false"
|
||||
/><br><br><br>
|
||||
<!-- :content="this is HTML <b>content!</b>" -->
|
||||
|
||||
<!-- :popover="true"
|
||||
popoverHeader="Something" -->
|
||||
<!-- title="<div class='card'><img src='https://picsum.photos/600/300/?image=25' class='card-img mb-2'><div class='card-header'><div>Card title</div></div><div class='card-body' style='max-height: 200px; overflow-y: auto;'>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div></div>" -->
|
||||
<!-- <div class="tooltip" id="hehe33">
|
||||
<div class="inner-tooltip">
|
||||
hfhsdasad
|
||||
</div>
|
||||
</div> -->
|
||||
</b-card>
|
||||
</CCard> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CTooltip from './CTooltip'
|
||||
export default {
|
||||
name: 'tooltips',
|
||||
// components: {
|
||||
// CTooltip
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
show: true,
|
||||
disabled: false,
|
||||
smh: 0,
|
||||
placement: 'bottom-end'
|
||||
// show: true,
|
||||
// disabled: false,
|
||||
// smh: 0,
|
||||
// placement: 'bottom-end',
|
||||
placements: [
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'left-start', 'left', 'left-end'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen () {
|
||||
this.$refs.tooltip.$emit('open')
|
||||
},
|
||||
onClose () {
|
||||
this.$refs.tooltip.$emit('close')
|
||||
},
|
||||
disableByRef () {
|
||||
if (this.disabled) {
|
||||
this.$refs.tooltip2.$emit('enable')
|
||||
} else {
|
||||
this.$refs.tooltip2.$emit('disable')
|
||||
}
|
||||
},
|
||||
test () {
|
||||
this.show = !this.show
|
||||
this.placement = 'right'
|
||||
this.smh = 200
|
||||
}
|
||||
// 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>
|
||||
|
||||
+248
-248
@@ -1,287 +1,287 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<strong>Brand Button</strong>
|
||||
</div>
|
||||
<small>Usage </small><code style="text-transform:lowercase"><b-button variant="facebook"><span>Facebook</span></b-button></code>
|
||||
</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>
|
||||
<b-button size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
|
||||
<b-button size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
|
||||
<b-button size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></b-button>
|
||||
<b-button size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></b-button>
|
||||
<b-button size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></b-button>
|
||||
<b-button size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></b-button>
|
||||
<b-button size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></b-button>
|
||||
<b-button size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></b-button>
|
||||
<b-button size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></b-button>
|
||||
<b-button size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></b-button>
|
||||
<b-button size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></b-button>
|
||||
<b-button size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></b-button>
|
||||
<b-button size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></b-button>
|
||||
<b-button size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></b-button>
|
||||
<b-button size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></b-button>
|
||||
<b-button size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></b-button>
|
||||
<b-button size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></b-button>
|
||||
<b-button size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></b-button>
|
||||
<b-button size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></b-button>
|
||||
<b-button size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></b-button>
|
||||
<b-button size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></b-button>
|
||||
<b-button size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></b-button>
|
||||
<b-button size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></b-button>
|
||||
<b-button size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button>
|
||||
<b-button size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button>
|
||||
<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>
|
||||
<b-button variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
|
||||
<b-button variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
|
||||
<b-button variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></b-button>
|
||||
<b-button variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></b-button>
|
||||
<b-button variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></b-button>
|
||||
<b-button variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></b-button>
|
||||
<b-button variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></b-button>
|
||||
<b-button variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></b-button>
|
||||
<b-button variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></b-button>
|
||||
<b-button variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></b-button>
|
||||
<b-button variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></b-button>
|
||||
<b-button variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></b-button>
|
||||
<b-button variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></b-button>
|
||||
<b-button variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></b-button>
|
||||
<b-button variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></b-button>
|
||||
<b-button variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></b-button>
|
||||
<b-button variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></b-button>
|
||||
<b-button variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></b-button>
|
||||
<b-button variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></b-button>
|
||||
<b-button variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></b-button>
|
||||
<b-button variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></b-button>
|
||||
<b-button variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></b-button>
|
||||
<b-button variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></b-button>
|
||||
<b-button variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button>
|
||||
<b-button variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button>
|
||||
<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>
|
||||
<b-button size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
|
||||
<b-button size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
|
||||
<b-button size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></b-button>
|
||||
<b-button size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></b-button>
|
||||
<b-button size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></b-button>
|
||||
<b-button size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></b-button>
|
||||
<b-button size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></b-button>
|
||||
<b-button size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></b-button>
|
||||
<b-button size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></b-button>
|
||||
<b-button size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></b-button>
|
||||
<b-button size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></b-button>
|
||||
<b-button size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></b-button>
|
||||
<b-button size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></b-button>
|
||||
<b-button size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></b-button>
|
||||
<b-button size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></b-button>
|
||||
<b-button size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></b-button>
|
||||
<b-button size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></b-button>
|
||||
<b-button size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></b-button>
|
||||
<b-button size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></b-button>
|
||||
<b-button size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></b-button>
|
||||
<b-button size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></b-button>
|
||||
<b-button size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></b-button>
|
||||
<b-button size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></b-button>
|
||||
<b-button size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button>
|
||||
<b-button size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button>
|
||||
<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>
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
<b-col cols="12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol><!--/.col-->
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<strong>Brand Button </strong> <small>Icons only</small>
|
||||
</div>
|
||||
<small>Usage </small> <code style="text-transform:lowercase"><b-button variant="facebook icon"><span>Facebook</span></b-button></code>
|
||||
</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>
|
||||
<b-button size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></b-button>
|
||||
<b-button size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></b-button>
|
||||
<b-button size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></b-button>
|
||||
<b-button size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></b-button>
|
||||
<b-button size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></b-button>
|
||||
<b-button size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></b-button>
|
||||
<b-button size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></b-button>
|
||||
<b-button size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></b-button>
|
||||
<b-button size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></b-button>
|
||||
<b-button size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></b-button>
|
||||
<b-button size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></b-button>
|
||||
<b-button size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></b-button>
|
||||
<b-button size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></b-button>
|
||||
<b-button size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></b-button>
|
||||
<b-button size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></b-button>
|
||||
<b-button size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></b-button>
|
||||
<b-button size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></b-button>
|
||||
<b-button size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></b-button>
|
||||
<b-button size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></b-button>
|
||||
<b-button size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></b-button>
|
||||
<b-button size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></b-button>
|
||||
<b-button size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></b-button>
|
||||
<b-button size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></b-button>
|
||||
<b-button size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></b-button>
|
||||
<b-button size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></b-button>
|
||||
<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>
|
||||
<b-button variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></b-button>
|
||||
<b-button variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></b-button>
|
||||
<b-button variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></b-button>
|
||||
<b-button variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></b-button>
|
||||
<b-button variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></b-button>
|
||||
<b-button variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></b-button>
|
||||
<b-button variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></b-button>
|
||||
<b-button variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></b-button>
|
||||
<b-button variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></b-button>
|
||||
<b-button variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></b-button>
|
||||
<b-button variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></b-button>
|
||||
<b-button variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></b-button>
|
||||
<b-button variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></b-button>
|
||||
<b-button variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></b-button>
|
||||
<b-button variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></b-button>
|
||||
<b-button variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></b-button>
|
||||
<b-button variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></b-button>
|
||||
<b-button variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></b-button>
|
||||
<b-button variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></b-button>
|
||||
<b-button variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></b-button>
|
||||
<b-button variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></b-button>
|
||||
<b-button variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></b-button>
|
||||
<b-button variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></b-button>
|
||||
<b-button variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></b-button>
|
||||
<b-button variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></b-button>
|
||||
<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>
|
||||
<b-button size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></b-button>
|
||||
<b-button size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></b-button>
|
||||
<b-button size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></b-button>
|
||||
<b-button size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></b-button>
|
||||
<b-button size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></b-button>
|
||||
<b-button size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></b-button>
|
||||
<b-button size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></b-button>
|
||||
<b-button size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></b-button>
|
||||
<b-button size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></b-button>
|
||||
<b-button size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></b-button>
|
||||
<b-button size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></b-button>
|
||||
<b-button size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></b-button>
|
||||
<b-button size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></b-button>
|
||||
<b-button size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></b-button>
|
||||
<b-button size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></b-button>
|
||||
<b-button size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></b-button>
|
||||
<b-button size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></b-button>
|
||||
<b-button size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></b-button>
|
||||
<b-button size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></b-button>
|
||||
<b-button size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></b-button>
|
||||
<b-button size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></b-button>
|
||||
<b-button size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></b-button>
|
||||
<b-button size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></b-button>
|
||||
<b-button size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></b-button>
|
||||
<b-button size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></b-button>
|
||||
<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>
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
</CCard>
|
||||
</CCol><!--/.col-->
|
||||
|
||||
<b-col cols="12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<strong>Brand Button </strong> <small>Text only</small>
|
||||
</div>
|
||||
<small>Usage </small> <code style="text-transform:lowercase"><b-button variant="facebook text"><span>Facebook</span></b-button></code>
|
||||
</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>
|
||||
<b-button size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></b-button>
|
||||
<b-button size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></b-button>
|
||||
<b-button size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></b-button>
|
||||
<b-button size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></b-button>
|
||||
<b-button size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></b-button>
|
||||
<b-button size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></b-button>
|
||||
<b-button size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></b-button>
|
||||
<b-button size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></b-button>
|
||||
<b-button size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></b-button>
|
||||
<b-button size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></b-button>
|
||||
<b-button size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></b-button>
|
||||
<b-button size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></b-button>
|
||||
<b-button size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></b-button>
|
||||
<b-button size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></b-button>
|
||||
<b-button size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></b-button>
|
||||
<b-button size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></b-button>
|
||||
<b-button size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></b-button>
|
||||
<b-button size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></b-button>
|
||||
<b-button size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></b-button>
|
||||
<b-button size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></b-button>
|
||||
<b-button size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></b-button>
|
||||
<b-button size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></b-button>
|
||||
<b-button size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></b-button>
|
||||
<b-button size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></b-button>
|
||||
<b-button size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></b-button>
|
||||
<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>
|
||||
<b-button variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></b-button>
|
||||
<b-button variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></b-button>
|
||||
<b-button variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></b-button>
|
||||
<b-button variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></b-button>
|
||||
<b-button variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></b-button>
|
||||
<b-button variant="xing text" class="mr-1 btn-brand"><span>Xing</span></b-button>
|
||||
<b-button variant="github text" class="mr-1 btn-brand"><span>Github</span></b-button>
|
||||
<b-button variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></b-button>
|
||||
<b-button variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></b-button>
|
||||
<b-button variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></b-button>
|
||||
<b-button variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></b-button>
|
||||
<b-button variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></b-button>
|
||||
<b-button variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></b-button>
|
||||
<b-button variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></b-button>
|
||||
<b-button variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></b-button>
|
||||
<b-button variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></b-button>
|
||||
<b-button variant="vk text" class="mr-1 btn-brand"><span>VK</span></b-button>
|
||||
<b-button variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></b-button>
|
||||
<b-button variant="behance text" class="mr-1 btn-brand"><span>Behance</span></b-button>
|
||||
<b-button variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></b-button>
|
||||
<b-button variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></b-button>
|
||||
<b-button variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></b-button>
|
||||
<b-button variant="vine text" class="mr-1 btn-brand"><span>Vine</span></b-button>
|
||||
<b-button variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></b-button>
|
||||
<b-button variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></b-button>
|
||||
<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>
|
||||
<b-button size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></b-button>
|
||||
<b-button size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></b-button>
|
||||
<b-button size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></b-button>
|
||||
<b-button size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></b-button>
|
||||
<b-button size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></b-button>
|
||||
<b-button size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></b-button>
|
||||
<b-button size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></b-button>
|
||||
<b-button size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></b-button>
|
||||
<b-button size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></b-button>
|
||||
<b-button size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></b-button>
|
||||
<b-button size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></b-button>
|
||||
<b-button size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></b-button>
|
||||
<b-button size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></b-button>
|
||||
<b-button size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></b-button>
|
||||
<b-button size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></b-button>
|
||||
<b-button size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></b-button>
|
||||
<b-button size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></b-button>
|
||||
<b-button size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></b-button>
|
||||
<b-button size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></b-button>
|
||||
<b-button size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></b-button>
|
||||
<b-button size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></b-button>
|
||||
<b-button size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></b-button>
|
||||
<b-button size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></b-button>
|
||||
<b-button size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></b-button>
|
||||
<b-button size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></b-button>
|
||||
<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>
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
</CCard>
|
||||
</CCol><!--/.col-->
|
||||
</CRow><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
+144
-260
@@ -1,306 +1,190 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" >
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol cols="12" >
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CButton variant="success" to="/dashboard" disabled>sdjk</CButton>
|
||||
<CButton variant="success" to="/dashboard" role="smh">sdjk</CButton>
|
||||
|
||||
<CButton variant="success" :pressed.sync="myToggle">sdjk</CButton>
|
||||
<CButton variant="success" :pressed.sync="myToggle2">sdjk</CButton>
|
||||
|
||||
<CButton variant="outline-success" pressed>sdjk</CButton>
|
||||
|
||||
<CButton square block ghost>sdjk</CButton>
|
||||
</br></br>
|
||||
<CButton pill ghost>sdjk</CButton>
|
||||
<CButton block size="sm" variant="success" pill square :pressed="false" disabled>sdjk</CButton>
|
||||
<CButton block size="sm" variant="success" pill square to="/dashboard" disabled>sdjk</CButton>
|
||||
|
||||
<CButton block size="lg" variant="info" square >sdjk</CButton>
|
||||
|
||||
</br></br>
|
||||
<CEmbed
|
||||
tag="p"
|
||||
aspect="16by9"
|
||||
src="https://www.youtube.com/embed/axTSc3e6wu8"
|
||||
frameborder="0"
|
||||
allow="accelerometer;autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
>
|
||||
|
||||
</CEmbed>
|
||||
<b-nav pills>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item-dropdown id="nav7_ddown" text="Dropdown" extra-toggle-classes="nav-link-custom" right>
|
||||
<b-dropdown-item>one</b-dropdown-item>
|
||||
<b-dropdown-item>two</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>three</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-nav>
|
||||
<b-nav pills>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<!-- <c-nav-item-dropdown id="nav7_ddown" text="Dropdown" extra-toggle-classes="nav-link-custom" right>
|
||||
<b-dropdown-item>one</b-dropdown-item>
|
||||
<b-dropdown-item>two</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>three</b-dropdown-item>
|
||||
</c-nav-item-dropdown> -->
|
||||
</b-nav>
|
||||
<CButtonToolbar role="smh">
|
||||
<c-button-group>
|
||||
|
||||
<b-button>One</b-button>
|
||||
<b-button>Two</b-button>
|
||||
<b-button>Three</b-button>
|
||||
<b-button>Four</b-button>
|
||||
<b-button class="d-sm-down-none">Five</b-button>
|
||||
</c-button-group>
|
||||
<c-button-group>
|
||||
<b-button>One</b-button>
|
||||
<b-button>Two</b-button>
|
||||
<b-button>Three</b-button>
|
||||
<b-button>Four</b-button>
|
||||
<b-button class="d-sm-down-none">Five</b-button>
|
||||
</c-button-group>
|
||||
</CButtonToolbar>
|
||||
<CButtonGroup>
|
||||
<CButton>One</CButton>
|
||||
<CButton>Two</CButton>
|
||||
<CButton>Three</CButton>
|
||||
<CButton>Four</CButton>
|
||||
<CButton class="d-sm-down-none">Five</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<b-button-group>
|
||||
<b-button class="d-sm-down-none" variant="success">Success</b-button>
|
||||
<b-button variant="info">Info</b-button>
|
||||
<b-button variant="warning">Warn</b-button>
|
||||
<b-button class="d-sm-down-none" variant="primary">Primary</b-button>
|
||||
<b-button variant="danger">Danger</b-button>
|
||||
<b-button variant="link">Link</b-button>
|
||||
</b-button-group>
|
||||
<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>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<CDropdown no-caret show>
|
||||
<img slot="button-content"
|
||||
src="img/avatars/6.jpg"
|
||||
class="img-avatar"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
|
||||
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
|
||||
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
|
||||
<c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
|
||||
<c-badge variant="success">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
|
||||
<c-badge variant="danger">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-comments" /> Comments
|
||||
<c-badge variant="warning">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-header
|
||||
tag="div"
|
||||
class="text-center">
|
||||
<strong>Settings</strong>
|
||||
</b-dropdown-header>
|
||||
<b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-usd" /> Payments
|
||||
<c-badge variant="secondary">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-file" /> Projects
|
||||
<c-badge variant="primary">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-divider ></b-dropdown-divider >
|
||||
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
|
||||
</CDropdown>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-button-group>
|
||||
<b-button>Left</b-button>
|
||||
<b-button>Middle</b-button>
|
||||
<b-button>Right</b-button>
|
||||
</b-button-group>
|
||||
<CButtonGroup>
|
||||
<CButton>Left</CButton>
|
||||
<CButton>Middle</CButton>
|
||||
<CButton>Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<b-button-group size="sm">
|
||||
<b-button>Left</b-button>
|
||||
<b-button>Middle</b-button>
|
||||
<b-button>Right</b-button>
|
||||
</b-button-group>
|
||||
<CButtonGroup size="sm">
|
||||
<CButton>Left</CButton>
|
||||
<CButton>Middle</CButton>
|
||||
<CButton>Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<b-button-group size="lg">
|
||||
<b-button>Left</b-button>
|
||||
<b-button>Middle</b-button>
|
||||
<b-button>Right</b-button>
|
||||
</b-button-group>
|
||||
<CButtonGroup size="lg">
|
||||
<CButton>Left</CButton>
|
||||
<CButton>Middle</CButton>
|
||||
<CButton>Right</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-button-group>
|
||||
<b-button class="d-sm-down-none">Button 1</b-button>
|
||||
<b-button class="d-sm-down-none">Button 2</b-button>
|
||||
<b-dropdown right text="Menu" variant="success">
|
||||
<b-dropdown-item>Item 1</b-dropdown-item>
|
||||
<b-dropdown-item>Item 2</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>Item 3</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-button class="d-sm-down-none">Button 3</b-button>
|
||||
<b-dropdown right split text="Split Menu" variant="info">
|
||||
<b-dropdown-item>Item 1</b-dropdown-item>
|
||||
<b-dropdown-item>Item 2</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>Item 3</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-button-group>
|
||||
<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>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-button-group vertical>
|
||||
<b-button>Top</b-button>
|
||||
<b-button>Middle</b-button>
|
||||
<b-button>Bottom</b-button>
|
||||
</b-button-group>
|
||||
<CButtonGroup vertical>
|
||||
<CButton>Top</CButton>
|
||||
<CButton>Middle</CButton>
|
||||
<CButton>Bottom</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
|
||||
<b-button-group class="mx-1">
|
||||
<b-btn class="d-sm-down-none">«</b-btn>
|
||||
<b-btn>‹</b-btn>
|
||||
</b-button-group>
|
||||
<b-button-group class="mx-1">
|
||||
<b-btn class="d-sm-down-none">Edit</b-btn>
|
||||
<b-btn>Undo</b-btn>
|
||||
<b-btn>Redo</b-btn>
|
||||
</b-button-group>
|
||||
<b-button-group class="mx-1">
|
||||
<b-btn>›</b-btn>
|
||||
<b-btn class="d-sm-down-none">»</b-btn>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
<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>
|
||||
<b-button-toolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
|
||||
<b-button-group size="sm" class="mx-1">
|
||||
<b-btn>New</b-btn>
|
||||
<b-btn>Edit</b-btn>
|
||||
</b-button-group>
|
||||
<b-input-group size="sm" class="w-25 mx-1">
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text>$</b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input value="100" class="text-right"></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-input-group-text>.00</b-input-group-text>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<b-input-group size="sm" class="w-25 mx-1">
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text>Size</b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<b-form-select value="Medium" :options="['Large','Medium','Small']"></b-form-select>
|
||||
</b-input-group>
|
||||
<b-button-group size="sm" class="mx-1">
|
||||
<b-btn>Save</b-btn>
|
||||
<b-btn>Cancel</b-btn>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
<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>
|
||||
<b-button-toolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||
<b-button-group class="mx-1 d-sm-down-none">
|
||||
<b-btn>New</b-btn>
|
||||
<b-btn>Edit</b-btn>
|
||||
<b-btn>Undo</b-btn>
|
||||
</b-button-group>
|
||||
<b-dropdown class="mx-1" right text="menu">
|
||||
<b-dropdown-item>Item 1</b-dropdown-item>
|
||||
<b-dropdown-item>Item 2</b-dropdown-item>
|
||||
<b-dropdown-item>Item 3</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-button-group class="mx-1">
|
||||
<b-btn>Save</b-btn>
|
||||
<b-btn>Cancel</b-btn>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
<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>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CButton from './CButton'
|
||||
// import CButtonGroup from './CButtonGroup'
|
||||
// import CButtonToolbar from './CButtonToolbar'
|
||||
|
||||
// import CEmbed from './CEmbed'
|
||||
// import CDropdown from '../../containers/CDropdown'
|
||||
|
||||
export default {
|
||||
name: 'button-groups',
|
||||
// components: {
|
||||
// CButtonGroup,
|
||||
// CButtonToolbar,
|
||||
// CButton
|
||||
// },
|
||||
// components: {
|
||||
// CEmbed,
|
||||
// CDropdown
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
myToggle: false,
|
||||
|
||||
+215
-203
@@ -1,232 +1,244 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CDropdown id="ddown1" button-content="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" 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>
|
||||
</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>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown1" text="Dropdown Button" class="m-2">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-buttons" text="Dropdown using buttons as menu items" class="m-2">
|
||||
<b-dropdown-item-button>I'm a button</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>I'm also a button</b-dropdown-item-button>
|
||||
<b-dropdown-item-button disabled>I'm a button, but disabled!</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>I don't look like a button, but I am!</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-divider" text="Dropdown with divider" class="m-2">
|
||||
<b-dropdown-item-button>First item</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Second item</b-dropdown-item-button>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item-button>Separated Item</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-header" text="Dropdown with header" class="m-2">
|
||||
<b-dropdown-header>Dropdown header</b-dropdown-header>
|
||||
<b-dropdown-item-button>First item</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Second Item</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-left" text="Left align" variant="primary" class="m-2">
|
||||
<b-dropdown-item href="#">Action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Something else here</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown id="ddown-right" right text="Right align" variant="primary" class="m-2">
|
||||
<b-dropdown-item href="#">Action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Something else here</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-dropup" dropup text="Drop-Up" variant="info" class="m-2">
|
||||
<b-dropdown-item href="#">Action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Something else here</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-offset" offset="25" text="Offset Dropdown" class="m-2">
|
||||
<b-dropdown-item href="#">Action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Something else here</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-split" split text="Split Dropdown" class="m-2">
|
||||
<b-dropdown-item href="#">Action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown variant="link" size="lg" no-caret>
|
||||
<template slot="button-content">
|
||||
🔍<span class="sr-only">Search</span>
|
||||
</template>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard
|
||||
|
||||
<b-dropdown-item href="#">Action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CDropdown id="ddown-left" button-content="Left align" variant="primary" class="m-2">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown 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>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-dropdown id="ddown-lg" size="lg" text="Large" class="m-2">
|
||||
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Something else here</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
<b-dropdown id="ddown-lg-split" size="lg" split text="Large Split" class="m-2">
|
||||
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Something else here...</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
<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>
|
||||
<b-dropdown id="ddown-sm" size="sm" text="Small" class="m-2">
|
||||
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Something else here...</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
<b-dropdown id="ddown-sm-split" size="sm" split text="Small Split" class="m-2">
|
||||
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Something else here...</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
<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>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</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>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-dropdown id="ddown-aria" text="Dropdown ARIA" variant="primary" class="m-2">
|
||||
<CDropdown id="ddown-aria" button-content="Dropdown ARIA" variant="primary" class="m-2">
|
||||
<div role="group" aria-lableledby="header1">
|
||||
<b-dropdown-header id="header1">Groups</b-dropdown-header>
|
||||
<b-dropdown-item-button aria-describedby="header1">Add</b-dropdown-item-button>
|
||||
<b-dropdown-item-button aria-describedby="header1">Delete</b-dropdown-item-button>
|
||||
<CDropdownHeader id="header1">Groups</CDropdownHeader>
|
||||
<CDropdownItem aria-describedby="header1">Add</CDropdownItem>
|
||||
<CDropdownItem aria-describedby="header1">Delete</CDropdownItem>
|
||||
</div>
|
||||
<div role="group" aria-lableledby="header2">
|
||||
<b-dropdown-header id="header2">Users</b-dropdown-header>
|
||||
<b-dropdown-item-button aria-describedby="header2">Add</b-dropdown-item-button>
|
||||
<b-dropdown-item-button aria-describedby="header2">Delete</b-dropdown-item-button>
|
||||
<CDropdownHeader id="header2">Users</CDropdownHeader>
|
||||
<CDropdownItem aria-describedby="header2">Add</CDropdownItem>
|
||||
<CDropdownItem aria-describedby="header2">Delete</CDropdownItem>
|
||||
</div>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item-button>Something <strong>not</strong> associated with user</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
<CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</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>
|
||||
</div>
|
||||
<b-dropdown size="sm" id="ddown_primary" text="Primary" variant="primary" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_secondary" text="Secondary" variant="secondary" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_success" text="Success" variant="success" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_warning" text="Warning" variant="warning" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_danger" text="Danger" variant="danger" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_info" text="Info" variant="info" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_light" text="Light" variant="light" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_dark" text="Dark" variant="dark" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_link" text="Link" variant="link" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCardHeader>
|
||||
<CDropdown size="sm" id="ddown_primary" button-content="Primary" variant="primary" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_secondary" button-content="Secondary" variant="secondary" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_success" button-content="Success" variant="success" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_warning" button-content="Warning" variant="warning" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_danger" button-content="Danger" variant="danger" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_info" button-content="Info" variant="info" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_light" button-content="Light" variant="light" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_dark" button-content="Dark" variant="dark" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_link" button-content="Link" variant="link" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -3,7 +3,7 @@ import { Bar } from '@coreui/vue/src/extends/BaseCharts'
|
||||
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
||||
|
||||
export default {
|
||||
// name: 'BarExample',
|
||||
name: 'BarExample',
|
||||
extends: Bar,
|
||||
mounted () {
|
||||
// Overwriting base render method with actual data.
|
||||
|
||||
+209
-209
@@ -1,419 +1,419 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-card no-body>
|
||||
<b-card-header>
|
||||
<i class="fa fa-picture-o"></i>CoreUI Icons <b-badge variant="info">New</b-badge>
|
||||
<CCard noWrapper>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">Github</small>
|
||||
</a>
|
||||
</div>
|
||||
</b-card-header>
|
||||
<b-card-body>
|
||||
<b-row class="text-center">
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCardHeader>
|
||||
<CCardBody slot="body">
|
||||
<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>
|
||||
<div>account-logout</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-action-redo icons font-2xl d-block mt-4"></i>
|
||||
<div>action-redo</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-action-undo icons font-2xl d-block mt-4"></i>
|
||||
<div>action-undo</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-align-center icons font-2xl d-block mt-4"></i>
|
||||
<div>align-center</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-align-left icons font-2xl d-block mt-4"></i>
|
||||
<div>align-left</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-align-right icons font-2xl d-block mt-4"></i>
|
||||
<div>align-right</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
|
||||
<div>arrow-bottom</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
|
||||
<div>arrow-left</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
|
||||
<div>arrow-right</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
|
||||
<div>arrow-top</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-ban icons font-2xl d-block mt-4"></i>
|
||||
<div>ban</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
|
||||
<div>basket-loaded</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-bell icons font-2xl d-block mt-4"></i>
|
||||
<div>bell</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-bold icons font-2xl d-block mt-4"></i>
|
||||
<div>bold</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-bookmark icons font-2xl d-block mt-4"></i>
|
||||
<div>bookmark</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-briefcase icons font-2xl d-block mt-4"></i>
|
||||
<div>briefcase</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-british-pound icons font-2xl d-block mt-4"></i>
|
||||
<div>british-pound</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-brush icons font-2xl d-block mt-4"></i>
|
||||
<div>brush</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-calculator icons font-2xl d-block mt-4"></i>
|
||||
<div>calculator</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-calendar icons font-2xl d-block mt-4"></i>
|
||||
<div>calendar</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-cart icons font-2xl d-block mt-4"></i>
|
||||
<div>cart</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-chart icons font-2xl d-block mt-4"></i>
|
||||
<div>chart</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-check icons font-2xl d-block mt-4"></i>
|
||||
<div>check</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
|
||||
<div>chevron-bottom</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
|
||||
<div>chevron-left</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
|
||||
<div>chevron-right</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
|
||||
<div>chevron-top</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-circle-check icons font-2xl d-block mt-4"></i>
|
||||
<div>circle-check</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-circle-x icons font-2xl d-block mt-4"></i>
|
||||
<div>circle-x</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-cloud icons font-2xl d-block mt-4"></i>
|
||||
<div>cloud</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
|
||||
<div>cloud-download</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
|
||||
<div>cloud-upload</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-code icons font-2xl d-block mt-4"></i>
|
||||
<div>code</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-cog icons font-2xl d-block mt-4"></i>
|
||||
<div>cog</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-comment-square icons font-2xl d-block mt-4"></i>
|
||||
<div>comment-square</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-credit-card icons font-2xl d-block mt-4"></i>
|
||||
<div>credit-card</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-cursor icons font-2xl d-block mt-4"></i>
|
||||
<div>cursor</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-dashboard icons font-2xl d-block mt-4"></i>
|
||||
<div>dashboard</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-delete icons font-2xl d-block mt-4"></i>
|
||||
<div>delete</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-dollar icons font-2xl d-block mt-4"></i>
|
||||
<div>dollar</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-drop icons font-2xl d-block mt-4"></i>
|
||||
<div>drop</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
|
||||
<div>envelope-closed</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
|
||||
<div>envelope-letter</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
|
||||
<div>envelope-open</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-euro icons font-2xl d-block mt-4"></i>
|
||||
<div>euro</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-file icons font-2xl d-block mt-4"></i>
|
||||
<div>file</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-globe icons font-2xl d-block mt-4"></i>
|
||||
<div>globe</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-graph icons font-2xl d-block mt-4"></i>
|
||||
<div>graph</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-home icons font-2xl d-block mt-4"></i>
|
||||
<div>home</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-inbox icons font-2xl d-block mt-4"></i>
|
||||
<div>inbox</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-info icons font-2xl d-block mt-4"></i>
|
||||
<div>info</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-italic icons font-2xl d-block mt-4"></i>
|
||||
<div>italic</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-justify-center icons font-2xl d-block mt-4"></i>
|
||||
<div>justify-center</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-justify-left icons font-2xl d-block mt-4"></i>
|
||||
<div>justify-left</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-justify-right icons font-2xl d-block mt-4"></i>
|
||||
<div>justify-right</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-laptop icons font-2xl d-block mt-4"></i>
|
||||
<div>laptop</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-layers icons font-2xl d-block mt-4"></i>
|
||||
<div>layers</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
|
||||
<div>lightbulb</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-list icons font-2xl d-block mt-4"></i>
|
||||
<div>list</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-location-pin icons font-2xl d-block mt-4"></i>
|
||||
<div>location-pin</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
|
||||
<div>lock-locked</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
|
||||
<div>lock-unlocked</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
|
||||
<div>magnifying-glass</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-map icons font-2xl d-block mt-4"></i>
|
||||
<div>map</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-monitor icons font-2xl d-block mt-4"></i>
|
||||
<div>monitor</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-moon icons font-2xl d-block mt-4"></i>
|
||||
<div>moon</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-note icons font-2xl d-block mt-4"></i>
|
||||
<div>note</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-options icons font-2xl d-block mt-4"></i>
|
||||
<div>options</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-paperclip icons font-2xl d-block mt-4"></i>
|
||||
<div>paperclip</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-pencil icons font-2xl d-block mt-4"></i>
|
||||
<div>pencil</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-people icons font-2xl d-block mt-4"></i>
|
||||
<div>people</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-phone icons font-2xl d-block mt-4"></i>
|
||||
<div>phone</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
|
||||
<div>pie-chart</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-print icons font-2xl d-block mt-4"></i>
|
||||
<div>print</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-puzzle icons font-2xl d-block mt-4"></i>
|
||||
<div>puzzle</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-rss icons font-2xl d-block mt-4"></i>
|
||||
<div>rss</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
|
||||
<div>screen-desktop</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
|
||||
<div>screen-smartphone</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-settings icons font-2xl d-block mt-4"></i>
|
||||
<div>settings</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-share icons font-2xl d-block mt-4"></i>
|
||||
<div>share</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-shield icons font-2xl d-block mt-4"></i>
|
||||
<div>shield</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
|
||||
<div>sort-ascending</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
|
||||
<div>sort-descending</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-speech icons font-2xl d-block mt-4"></i>
|
||||
<div>speech</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-speedometer icons font-2xl d-block mt-4"></i>
|
||||
<div>speedometer</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-star icons font-2xl d-block mt-4"></i>
|
||||
<div>star</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-sun icons font-2xl d-block mt-4"></i>
|
||||
<div>sun</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-tablet icons font-2xl d-block mt-4"></i>
|
||||
<div>tablet</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-tags icons font-2xl d-block mt-4"></i>
|
||||
<div>tags</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-task icons font-2xl d-block mt-4"></i>
|
||||
<div>task</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
|
||||
<div>thumb-down</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
|
||||
<div>thumb-up</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-trash icons font-2xl d-block mt-4"></i>
|
||||
<div>trash</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-underline icons font-2xl d-block mt-4"></i>
|
||||
<div>underline</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-user icons font-2xl d-block mt-4"></i>
|
||||
<div>user</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-user-female icons font-2xl d-block mt-4"></i>
|
||||
<div>user-female</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-user-follow icons font-2xl d-block mt-4"></i>
|
||||
<div>user-follow</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
|
||||
<div>user-unfollow</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-wrench icons font-2xl d-block mt-4"></i>
|
||||
<div>wrench</div>
|
||||
</b-col>
|
||||
<b-col cols="6" sm="4" md="3" xl="2">
|
||||
</CCol>
|
||||
<CCol cols="6" sm="4" md="3" xl="2">
|
||||
<i class="cui-yen icons font-2xl d-block mt-4"></i>
|
||||
<div>yen</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
+508
-508
File diff suppressed because it is too large
Load Diff
+1884
-1884
File diff suppressed because it is too large
Load Diff
+374
-374
File diff suppressed because it is too large
Load Diff
@@ -1,19 +1,17 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<p></p>
|
||||
<CAlert show variant="primary">Primary Alert</CAlert>
|
||||
@@ -25,16 +23,14 @@
|
||||
<CAlert show variant="light">Light Alert</CAlert>
|
||||
<CAlert show variant="dark">Dark Alert</CAlert>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> Alert
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CAlert show variant="primary">
|
||||
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
@@ -59,19 +55,17 @@
|
||||
</CAlert>
|
||||
<CAlert show variant="dark">
|
||||
Dark Alert with
|
||||
<b-link href="#" class="alert-link">an example link</b-link>
|
||||
<CLink href="#" class="alert-link">an example link</CLink>
|
||||
.
|
||||
</CAlert>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CAlert show variant="success">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>
|
||||
@@ -84,15 +78,13 @@
|
||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
</p>
|
||||
</CAlert>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CAlert :show="true" dismissible disabled>
|
||||
Dismissible Alert!
|
||||
@@ -119,17 +111,15 @@
|
||||
>
|
||||
Dismissible Alert!
|
||||
</CAlert>
|
||||
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
|
||||
<CButton @click="showDismissibleAlert=true" variant="info" class="m-1">
|
||||
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
|
||||
</b-btn>
|
||||
</CButton>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CAlert :show="dismissCountDown"
|
||||
dismissible
|
||||
@@ -145,32 +135,26 @@
|
||||
@dismissed="dismissCountdown=0"
|
||||
@dismiss-count-down="countDownChanged">
|
||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||
<b-progress variant="info"
|
||||
<CProgress variant="info"
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px">
|
||||
</b-progress>
|
||||
</CProgress>
|
||||
</CAlert>
|
||||
<b-btn @click="showAlert" variant="info" class="m-1">
|
||||
<CButton @click="showAlert" variant="info" class="m-1">
|
||||
Show alert with timer
|
||||
</b-btn>
|
||||
</CButton>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CAlert from './CAlert'
|
||||
// import CButtonClose from './CButtonClose'
|
||||
export default {
|
||||
name: 'alerts',
|
||||
// components: {
|
||||
// CAlert,
|
||||
// CButtonClose
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
dismissSecs: 10,
|
||||
|
||||
@@ -1,82 +1,72 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<h2>Example heading <b-badge>New</b-badge></h2>
|
||||
<h3>Example heading <b-badge>New</b-badge></h3>
|
||||
<h4>Example heading <b-badge>New</b-badge></h4>
|
||||
<h5>Example heading <b-badge>New</b-badge></h5>
|
||||
<h6>Example heading <b-badge>New</b-badge></h6>
|
||||
<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>
|
||||
<div slot="footer">
|
||||
<b-button variant="primary">
|
||||
Notifications <b-badge variant="light" :style="{position: 'static'}">4</b-badge>
|
||||
</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<CCardFooter slot="footer">
|
||||
<CButton variant="primary">
|
||||
Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>">
|
||||
<div>
|
||||
<b-badge variant="primary">Primary</b-badge>
|
||||
<b-badge variant="secondary">Secondary</b-badge>
|
||||
<b-badge variant="success">Success</b-badge>
|
||||
<b-badge variant="danger">Danger</b-badge>
|
||||
<b-badge variant="warning">Warning</b-badge>
|
||||
<b-badge variant="info">Info</b-badge>
|
||||
<b-badge variant="light">Light</b-badge>
|
||||
<b-badge variant="dark">Dark</b-badge>
|
||||
<CBadge variant="primary">Primary</CBadge>
|
||||
<CBadge variant="secondary">Secondary</CBadge>
|
||||
<CBadge variant="success">Success</CBadge>
|
||||
<CBadge variant="danger">Danger</CBadge>
|
||||
<CBadge variant="warning">Warning</CBadge>
|
||||
<CBadge variant="info">Info</CBadge>
|
||||
<CBadge variant="light">Light</CBadge>
|
||||
<CBadge variant="dark">Dark</CBadge>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
</CCard>
|
||||
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>">
|
||||
<div>
|
||||
<b-badge pill variant="primary">Primary</b-badge>
|
||||
<b-badge pill variant="secondary">Secondary</b-badge>
|
||||
<b-badge pill variant="success">Success</b-badge>
|
||||
<b-badge pill variant="danger">Danger</b-badge>
|
||||
<b-badge pill variant="warning">Warning</b-badge>
|
||||
<b-badge pill variant="info">Info</b-badge>
|
||||
<b-badge pill variant="light">Light</b-badge>
|
||||
<b-badge pill variant="dark">Dark</b-badge>
|
||||
<CBadge pill variant="primary">Primary</CBadge>
|
||||
<CBadge pill variant="secondary">Secondary</CBadge>
|
||||
<CBadge pill variant="success">Success</CBadge>
|
||||
<CBadge pill variant="danger">Danger</CBadge>
|
||||
<CBadge pill variant="warning">Warning</CBadge>
|
||||
<CBadge pill variant="info">Info</CBadge>
|
||||
<CBadge pill variant="light">Light</CBadge>
|
||||
<CBadge pill variant="dark">Dark</CBadge>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
</CCard>
|
||||
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>">
|
||||
<div>
|
||||
<b-badge href="#" variant="primary">Primary</b-badge>
|
||||
<b-badge href="#" variant="secondary">Secondary</b-badge>
|
||||
<b-badge href="#" variant="success">Success</b-badge>
|
||||
<b-badge href="#" variant="danger">Danger</b-badge>
|
||||
<b-badge href="#" variant="warning">Warning</b-badge>
|
||||
<b-badge href="#" variant="info">Info</b-badge>
|
||||
<b-badge href="#" variant="light">Light</b-badge>
|
||||
<b-badge href="#" variant="dark">Dark</b-badge>
|
||||
<CBadge href="#" variant="primary">Primary</CBadge>
|
||||
<CBadge href="#" variant="secondary">Secondary</CBadge>
|
||||
<CBadge href="#" variant="success">Success</CBadge>
|
||||
<CBadge href="#" variant="danger">Danger</CBadge>
|
||||
<CBadge href="#" variant="warning">Warning</CBadge>
|
||||
<CBadge href="#" variant="info">Info</CBadge>
|
||||
<CBadge href="#" variant="light">Light</CBadge>
|
||||
<CBadge href="#" variant="dark">Dark</CBadge>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
import CButtonClose from './CButtonClose'
|
||||
|
||||
export default {
|
||||
name: 'CAlert',
|
||||
components: {CButtonClose},
|
||||
render (h) {
|
||||
if (!this.localShow) {
|
||||
// If not showing, render placeholder
|
||||
return h(false)
|
||||
}
|
||||
let dismissBtn = h(false)
|
||||
if (this.dismissible) {
|
||||
dismissBtn = this.$scopedSlots.default ?
|
||||
this.$scopedSlots.default({dismiss: this.dismiss}) :
|
||||
h(
|
||||
'CButtonClose',
|
||||
{ on: { click: this.dismiss }},
|
||||
[ this.$slots.dismiss ]
|
||||
)
|
||||
}
|
||||
const alert = h(
|
||||
'div',
|
||||
{class: this.classObject, attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true}},
|
||||
[dismissBtn, this.$slots.default]
|
||||
)
|
||||
return !this.fade ? alert : h(
|
||||
'transition',
|
||||
{ props: { name: 'fade', appear: true } },
|
||||
[ alert ]
|
||||
)
|
||||
},
|
||||
model: {
|
||||
prop: 'show',
|
||||
event: 'input'
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
countDownTimerId: null,
|
||||
dismissed: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classObject () {
|
||||
return ['alert', `alert-${this.variant}`, this.dismissible ? 'alert-dismissible' : '']
|
||||
},
|
||||
localShow () {
|
||||
return !this.dismissed && (this.countDownTimerId || this.show)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'info'
|
||||
},
|
||||
dismissible: {
|
||||
type: [Boolean, Object],
|
||||
default: false
|
||||
},
|
||||
show: {
|
||||
type: [Boolean, Number],
|
||||
default: false
|
||||
},
|
||||
fade: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show () {
|
||||
this.showChanged()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.showChanged()
|
||||
},
|
||||
destroyed /* istanbul ignore next */ () {
|
||||
this.clearCounter()
|
||||
},
|
||||
methods: {
|
||||
dismiss () {
|
||||
this.clearCounter()
|
||||
this.dismissed = true
|
||||
this.$emit('dismissed')
|
||||
this.$emit('input', false)
|
||||
if (typeof this.show === 'number') {
|
||||
this.$emit('dismiss-count-down', 0)
|
||||
this.$emit('input', 0)
|
||||
} else {
|
||||
this.$emit('input', false)
|
||||
}
|
||||
},
|
||||
clearCounter () {
|
||||
if (this.countDownTimerId) {
|
||||
clearInterval(this.countDownTimerId)
|
||||
this.countDownTimerId = null
|
||||
}
|
||||
},
|
||||
showChanged () {
|
||||
// Reset counter status
|
||||
this.clearCounter()
|
||||
// Reset dismiss status
|
||||
this.dismissed = false
|
||||
// No timer for boolean values
|
||||
if (this.show === true || this.show === false || this.show === null || this.show === 0) {
|
||||
return
|
||||
}
|
||||
// Start counter (ensure we have an integer value)
|
||||
let dismissCountDown = parseInt(this.show, 10) || 1
|
||||
this.countDownTimerId = setInterval(() => {
|
||||
if (dismissCountDown < 1) {
|
||||
this.dismiss()
|
||||
return
|
||||
}
|
||||
dismissCountDown--
|
||||
this.$emit('dismiss-count-down', dismissCountDown)
|
||||
this.$emit('input', dismissCountDown)
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { mergeData } from 'vue-functional-data-merge'
|
||||
export default {
|
||||
name: 'CButtonClose',
|
||||
functional: true,
|
||||
render (h, { data, props, slots }) {
|
||||
const componentData = {
|
||||
staticClass: 'close',
|
||||
attrs: {
|
||||
type: props.type || 'button',
|
||||
'aria-label': props.ariaLabel || 'Close'
|
||||
}
|
||||
}
|
||||
if (!slots().default)
|
||||
componentData.domProps = { innerHTML: '×' }
|
||||
return h('button', mergeData(data, componentData), slots().default)
|
||||
}
|
||||
}
|
||||
@@ -1,138 +1,151 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Bootstrap Modals">
|
||||
<b-button type="button" variant="secondary" @click="myModal = true" class="mr-1">Launch demo modal</b-button>
|
||||
<b-button type="button" variant="secondary" @click="largeModal = true" class="mr-1">Launch large modal</b-button>
|
||||
<b-button type="button" variant="secondary" @click="smallModal = true" class="mr-1">Launch small modal</b-button>
|
||||
<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>
|
||||
<b-button type="button" variant="primary" @click="primaryModal = true" class="mr-1">Launch primary modal</b-button>
|
||||
<b-button type="button" variant="success" @click="successModal = true" class="mr-1">Launch success modal</b-button>
|
||||
<b-button type="button" variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</b-button>
|
||||
<b-button type="button" variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</b-button>
|
||||
<b-button type="button" variant="info" @click="infoModal = true" class="mr-1">Launch info modal</b-button>
|
||||
<b-button type="button" variant="info" @click="cmodal = !cmodal" class="mr-1">CModal</b-button>
|
||||
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
<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>
|
||||
</CCol><!--/.col-->
|
||||
</CRow><!--/.row-->
|
||||
</div>
|
||||
|
||||
<!-- Modal Component -->
|
||||
<b-modal title="Modal title" v-model="myModal" @ok="myModal = false">
|
||||
<CModal title="Modal title"
|
||||
:visible="myModal"
|
||||
@hide="myModal = false"
|
||||
>
|
||||
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.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" size="lg" v-model="largeModal" @ok="largeModal = false">
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
size="lg"
|
||||
v-model="largeModal"
|
||||
>
|
||||
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.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" size="sm" v-model="smallModal" @ok="smallModal = false">
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
size="sm"
|
||||
v-model="smallModal"
|
||||
>
|
||||
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.
|
||||
</b-modal>
|
||||
</CModal>
|
||||
|
||||
<b-modal title="Modal title" class="modal-primary" v-model="primaryModal" @ok="primaryModal = false">
|
||||
<CModal title="Modal title"
|
||||
class="modal-primary"
|
||||
v-model="primaryModal"
|
||||
>
|
||||
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.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" class="modal-success" v-model="successModal" @ok="successModal = false" ok-variant="success">
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
class="modal-success"
|
||||
v-model="successModal"
|
||||
>
|
||||
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.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" class="modal-warning" v-model="warningModal" @ok="warningModal = false" ok-variant="warning">
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
class="modal-warning"
|
||||
v-model="warningModal"
|
||||
>
|
||||
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.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" class="modal-danger" v-model="dangerModal" @ok="dangerModal = false" ok-variant="danger">
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
class="modal-danger"
|
||||
v-model="dangerModal"
|
||||
>
|
||||
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.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" class="modal-info" v-model="infoModal" @ok="infoModal = false" ok-variant="info">
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
class="modal-info"
|
||||
v-model="infoModal"
|
||||
>
|
||||
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.
|
||||
</b-modal>
|
||||
<CModal v-model="cmodal"
|
||||
</CModal>
|
||||
<CModal v-model="darkModal"
|
||||
:noBackdrop="false"
|
||||
:noCloseOnBackdrop="false"
|
||||
:noFade="false"
|
||||
:centered="true"
|
||||
title="Modal title 2"
|
||||
size="lg"
|
||||
variant="success"
|
||||
variant="dark"
|
||||
borderVariant="danger2"
|
||||
addModalClasses="hehe1"
|
||||
addDialogClasses="hehe2"
|
||||
addContentClasses="hehe3"
|
||||
:noHeader="true"
|
||||
:noHeader="false"
|
||||
:noBody="false"
|
||||
:noFooter="true"
|
||||
:noFooter="false"
|
||||
>
|
||||
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.
|
||||
<!-- <div slot="header" class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">new header</h5>
|
||||
<button type="button" class="close closeModal" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div> -->
|
||||
<div slot="body" class="modal-body">
|
||||
n
|
||||
</div>
|
||||
<div class="modal-footer" slot="footer">
|
||||
<button type="button" class="btn btn-secondary closeModal">Close2</button>
|
||||
<button type="button" class="btn btn-primary closeModal">OK2</button>
|
||||
</div>
|
||||
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.
|
||||
<template v-slot:header="{hide}">
|
||||
<h5 class="modal-title">Custom modal title</h5>
|
||||
<CButtonClose @click="hide()" class="text-white"/>
|
||||
</template>
|
||||
<template v-slot:footer="{hide}">
|
||||
<CButton @click="hide()" variant="danger">Discard</CButton>
|
||||
<CButton @click="hide()" variant="success">Accept</CButton>
|
||||
</template>
|
||||
</CModal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CModal from './CModal'
|
||||
export default {
|
||||
name: 'modals',
|
||||
// components: {
|
||||
// CModal
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
myModal: false,
|
||||
@@ -143,7 +156,7 @@ export default {
|
||||
warningModal: false,
|
||||
dangerModal: false,
|
||||
infoModal: false,
|
||||
cmodal: false
|
||||
darkModal: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+44
-37
@@ -1,45 +1,52 @@
|
||||
<template>
|
||||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<b-row class="justify-content-center">
|
||||
<b-col md="8">
|
||||
<b-card-group>
|
||||
<b-card no-body class="p-4">
|
||||
<b-card-body>
|
||||
<b-form>
|
||||
<CRow class="justify-content-center">
|
||||
<CCol md="8">
|
||||
<CCardGroup>
|
||||
<CCard noWrapper class="p-4">
|
||||
<CCardBody slot="body">
|
||||
<CForm>
|
||||
<h1>Login</h1>
|
||||
<p class="text-muted">Sign In to your account</p>
|
||||
<b-input-group class="mb-3">
|
||||
<b-input-group-prepend><b-input-group-text><i class="icon-user"></i></b-input-group-text></b-input-group-prepend>
|
||||
<b-form-input type="text" class="form-control" placeholder="Username" autocomplete="username email" />
|
||||
</b-input-group>
|
||||
<b-input-group class="mb-4">
|
||||
<b-input-group-prepend><b-input-group-text><i class="icon-lock"></i></b-input-group-text></b-input-group-prepend>
|
||||
<b-form-input type="password" class="form-control" placeholder="Password" autocomplete="current-password" />
|
||||
</b-input-group>
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<b-button variant="primary" class="px-4">Login</b-button>
|
||||
</b-col>
|
||||
<b-col cols="6" class="text-right">
|
||||
<b-button variant="link" class="px-0">Forgot password?</b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-form>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
<b-card no-body class="text-white bg-primary py-5 d-md-down-none" style="width:44%">
|
||||
<b-card-body class="text-center">
|
||||
<div>
|
||||
<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>
|
||||
<b-button variant="primary" class="active mt-3">Register Now!</b-button>
|
||||
</div>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<CFormInput
|
||||
prepend="<i class='icon-user'></i>"
|
||||
placeholder="Username"
|
||||
autocomplete="username email"
|
||||
/>
|
||||
<CFormInput
|
||||
prepend="<i class='icon-lock'></i>"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="curent-password"
|
||||
/>
|
||||
<CRow>
|
||||
<CCol cols="6">
|
||||
<CButton variant="primary" class="px-4">Login</CButton>
|
||||
</CCol>
|
||||
<CCol cols="6" class="text-right">
|
||||
<CButton variant="link" class="px-0">Forgot password?</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard
|
||||
class="text-white text-center bg-primary py-5 d-md-down-none"
|
||||
style="width:44%"
|
||||
>
|
||||
<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>
|
||||
<CButton
|
||||
variant="primary"
|
||||
class="active mt-3"
|
||||
>
|
||||
Register Now!
|
||||
</CButton>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+13
-15
@@ -1,26 +1,24 @@
|
||||
<template>
|
||||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<b-row class="justify-content-center">
|
||||
<b-col md="6">
|
||||
<CRow class="justify-content-center">
|
||||
<CCol md="6">
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left display-3 mr-4">404</h1>
|
||||
<h4 class="pt-3">Oops! You're lost.</h4>
|
||||
<p class="text-muted">The page you are looking for was not found.</p>
|
||||
</div>
|
||||
<b-input-group>
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text>
|
||||
<i class="fa fa-search"></i>
|
||||
</b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
|
||||
<b-input-group-append>
|
||||
<b-button variant="info">Search</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<CFormInput
|
||||
class="mb-0"
|
||||
prepend="<i class='fa fa-search'></i>"
|
||||
placeholder="What are you looking for?"
|
||||
>
|
||||
<template #append>
|
||||
<CButton variant="info">Search</CButton>
|
||||
</template>
|
||||
</CFormInput>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+13
-15
@@ -1,26 +1,24 @@
|
||||
<template>
|
||||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<b-row class="justify-content-center">
|
||||
<b-col md="6">
|
||||
<CRow class="justify-content-center">
|
||||
<CCol md="6">
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left display-3 mr-4">500</h1>
|
||||
<h4 class="pt-3">Houston, we have a problem!</h4>
|
||||
<p class="text-muted">The page you are looking for is temporarily unavailable.</p>
|
||||
</div>
|
||||
<b-input-group>
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text>
|
||||
<i class="fa fa-search"></i>
|
||||
</b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
|
||||
<b-input-group-append>
|
||||
<b-button variant="info">Search</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<CFormInput
|
||||
class="mb-0"
|
||||
prepend="<i class='fa fa-search'></i>"
|
||||
placeholder="What are you looking for?"
|
||||
>
|
||||
<template #append>
|
||||
<CButton variant="info">Search</CButton>
|
||||
</template>
|
||||
</CFormInput>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,57 +1,56 @@
|
||||
<template>
|
||||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<b-row class="justify-content-center">
|
||||
<b-col md="6" sm="8">
|
||||
<b-card no-body class="mx-4">
|
||||
<b-card-body class="p-4">
|
||||
<b-form>
|
||||
<h1>Register</h1>
|
||||
<p class="text-muted">Create your account</p>
|
||||
<b-input-group class="mb-3">
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text><i class="icon-user"></i></b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input type="text" class="form-control" placeholder="Username" autocomplete="username" />
|
||||
</b-input-group>
|
||||
|
||||
<b-input-group class="mb-3">
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text>@</b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input type="text" class="form-control" placeholder="Email" autocomplete="email" />
|
||||
</b-input-group>
|
||||
|
||||
<b-input-group class="mb-3">
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text><i class="icon-lock"></i></b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input type="password" class="form-control" placeholder="Password" autocomplete="new-password" />
|
||||
</b-input-group>
|
||||
|
||||
<b-input-group class="mb-4">
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text><i class="icon-lock"></i></b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input type="password" class="form-control" placeholder="Repeat password" autocomplete="new-password" />
|
||||
</b-input-group>
|
||||
|
||||
<b-button variant="success" block>Create Account</b-button>
|
||||
</b-form>
|
||||
</b-card-body>
|
||||
<b-card-footer class="p-4">
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<b-button block class="btn btn-facebook"><span>facebook</span></b-button>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<b-button block class="btn btn-twitter" type="button"><span>twitter</span></b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card-footer>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<b-col xl="2" md="4" sm="6" xs="12" class="mb-4">
|
||||
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
|
||||
<div :class="[classObj, color]" :style="{ paddingTop: '75%' }"></div>
|
||||
<slot></slot>
|
||||
<color-view/>
|
||||
</b-col>
|
||||
<ColorView/>
|
||||
</CCol>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -23,4 +23,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+52
-53
@@ -1,67 +1,66 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-card header-tag="header">
|
||||
<div slot="header">
|
||||
<CCard >
|
||||
<CCardHeader slot="header">
|
||||
<i class="icon-drop"></i> Theme colors
|
||||
</div>
|
||||
<b-card-body>
|
||||
<b-row>
|
||||
<color-theme color="bg-primary">
|
||||
</CCardHeader>
|
||||
<CCardBody slot="body">
|
||||
<CRow>
|
||||
<ColorTheme color="bg-primary">
|
||||
<h6>Brand Primary Color</h6>
|
||||
</color-theme>
|
||||
<color-theme color="bg-secondary"><h6>Brand Secondary Color</h6></color-theme>
|
||||
<color-theme color="bg-success"><h6>Brand Success Color</h6></color-theme>
|
||||
<color-theme color="bg-danger"><h6>Brand Danger Color</h6></color-theme>
|
||||
<color-theme color="bg-warning"><h6>Brand Warning Color</h6></color-theme>
|
||||
<color-theme color="bg-info"><h6>Brand Info Color</h6></color-theme>
|
||||
<color-theme color="bg-light"><h6>Brand Light Color</h6></color-theme>
|
||||
<color-theme color="bg-dark"><h6>Brand Dark Color</h6></color-theme>
|
||||
</b-row>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
<b-card header-tag="header">
|
||||
<div slot="header">
|
||||
</ColorTheme>
|
||||
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard >
|
||||
<CCardHeader slot="header">
|
||||
<i class="icon-drop"></i> Grays
|
||||
</div>
|
||||
<b-card-body>
|
||||
<b-row>
|
||||
<color-theme color="bg-gray-100"><h6>Brand 100 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-200"><h6>Brand 200 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-300"><h6>Brand 300 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-400"><h6>Brand 400 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-500"><h6>Brand 500 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-600"><h6>Brand 600 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-700"><h6>Brand 700 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-800"><h6>Brand 800 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-900"><h6>Brand 900 Color</h6></color-theme>
|
||||
</b-row>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
<b-card header-tag="header">
|
||||
<div slot="header">
|
||||
</CCardHeader>
|
||||
<CCardBody slot="body">
|
||||
<CRow>
|
||||
<ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard >
|
||||
<CCardHeader slot="header">
|
||||
<i class="icon-drop"></i> Additional colors
|
||||
</div>
|
||||
<b-card-body>
|
||||
<b-row>
|
||||
<color-theme color="bg-blue"><h6>Brand Blue Color</h6></color-theme>
|
||||
<color-theme color="bg-indigo"><h6>Brand Indigo Color</h6></color-theme>
|
||||
<color-theme color="bg-purple"><h6>Brand Purple Color</h6></color-theme>
|
||||
<color-theme color="bg-pink"><h6>Brand Pink Color</h6></color-theme>
|
||||
<color-theme color="bg-red"><h6>Brand Red Color</h6></color-theme>
|
||||
<color-theme color="bg-orange"><h6>Brand Orange Color</h6></color-theme>
|
||||
<color-theme color="bg-yellow"><h6>Brand Yellow Color</h6></color-theme>
|
||||
<color-theme color="bg-green"><h6>Brand Green Color</h6></color-theme>
|
||||
<color-theme color="bg-teal"><h6>Brand Teal Color</h6></color-theme>
|
||||
<color-theme color="bg-cyan"><h6>Brand Cyan Color</h6></color-theme>
|
||||
</b-row>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</CCardHeader>
|
||||
<CCardBody slot="body">
|
||||
<CRow>
|
||||
<ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorTheme from './ColorTheme'
|
||||
|
||||
export default {
|
||||
name: 'colors',
|
||||
components: { ColorTheme }
|
||||
|
||||
+24
-25
@@ -1,21 +1,24 @@
|
||||
<template>
|
||||
<b-row>
|
||||
<b-col cols="12" lg="6">
|
||||
<b-card no-header>
|
||||
<CRow>
|
||||
<CCol cols="12"
|
||||
lg="6"
|
||||
>
|
||||
<CCard no-header>
|
||||
<template slot="header">
|
||||
User id: {{ $route.params.id }}
|
||||
</template>
|
||||
<b-table striped small fixed responsive="sm" :items="items($route.params.id)" :fields="fields">
|
||||
<template slot="value" slot-scope="data">
|
||||
<strong>{{data.item.value}}</strong>
|
||||
</template>
|
||||
</b-table>
|
||||
<CTable striped
|
||||
small
|
||||
fixed
|
||||
:items="items($route.params.id)"
|
||||
:fields="$options.fields"
|
||||
/>
|
||||
<template slot="footer">
|
||||
<b-button @click="goBack">Back</b-button>
|
||||
<CButton @click="goBack">Back</CButton>
|
||||
</template>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -28,20 +31,16 @@ export default {
|
||||
default: 'User id'
|
||||
},
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
items: (id) => {
|
||||
const user = usersData.find( user => user.id.toString() === id)
|
||||
const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
|
||||
return userDetails.map(([key, value]) => {return {key: key, value: value}})
|
||||
},
|
||||
fields: [
|
||||
{key: 'key'},
|
||||
{key: 'value'},
|
||||
],
|
||||
}
|
||||
},
|
||||
fields: [
|
||||
{ key: 'key', _style:'width:150px'},
|
||||
{ key: 'value' , _style:'width:150px;', _classes:'font-weight-bold'}
|
||||
],
|
||||
methods: {
|
||||
items (id) {
|
||||
const user = usersData.find( user => user.id.toString() === id)
|
||||
const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
|
||||
return userDetails.map(([key, value]) => {return {key: key, value: value}})
|
||||
},
|
||||
goBack() {
|
||||
this.$router.go(-1)
|
||||
// this.$router.replace({path: '/users'})
|
||||
|
||||
+31
-50
@@ -1,58 +1,37 @@
|
||||
<template>
|
||||
<b-row>
|
||||
<b-col cols="12" xl="6">
|
||||
<CRow>
|
||||
<CCol cols="12" xl="6">
|
||||
<transition name="slide">
|
||||
<b-card :header="caption">
|
||||
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" @row-clicked="rowClicked">
|
||||
<template slot="id" slot-scope="data">
|
||||
<strong>{{data.item.id}}</strong>
|
||||
</template>
|
||||
<template slot="name" slot-scope="data">
|
||||
<strong>{{data.item.name}}</strong>
|
||||
</template>
|
||||
<template slot="status" slot-scope="data">
|
||||
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
|
||||
</template>
|
||||
</b-table>
|
||||
<nav>
|
||||
<b-pagination size="sm" :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
|
||||
</nav>
|
||||
</b-card>
|
||||
<CCard header="users">
|
||||
<CTable hover
|
||||
striped
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
:current-page="currentPage"
|
||||
:per-page="perPage"
|
||||
@row-clicked="rowClicked"
|
||||
:paginationProps="$options.paginationProps"
|
||||
>
|
||||
<td slot="id" slot-scope="data">
|
||||
<strong>{{data.item.id}}</strong>
|
||||
</td>
|
||||
<td slot="name" slot-scope="data">
|
||||
<strong>{{data.item.name}}</strong>
|
||||
</td>
|
||||
<td slot="status" slot-scope="data">
|
||||
<CBadge :variant="getBadge(data.item.status)">{{data.item.status}}</CBadge>
|
||||
</td>
|
||||
</CTable>
|
||||
</CCard>
|
||||
</transition>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import usersData from './UsersData'
|
||||
export default {
|
||||
name: 'Users',
|
||||
props: {
|
||||
caption: {
|
||||
type: String,
|
||||
default: 'Users'
|
||||
},
|
||||
hover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
striped: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
items: usersData.filter((user) => user.id < 42),
|
||||
@@ -68,7 +47,12 @@ export default {
|
||||
totalRows: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
paginationProps: {
|
||||
// size: 'sm',
|
||||
align: 'center',
|
||||
hideDoubleArrows: true,
|
||||
previousButtonText: 'prev',
|
||||
nextButtonText: 'next'
|
||||
},
|
||||
methods: {
|
||||
getBadge (status) {
|
||||
@@ -77,9 +61,6 @@ export default {
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
},
|
||||
getRowCount (items) {
|
||||
return items.length
|
||||
},
|
||||
userLink (id) {
|
||||
return `users/${id.toString()}`
|
||||
},
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
const usersData = [
|
||||
{id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
|
||||
// {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
|
||||
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
||||
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
||||
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
||||
|
||||
Reference in New Issue
Block a user