refactor: minor bug fixes and refactors
This commit is contained in:
woothu
+174
-174
@@ -1,183 +1,183 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>
|
||||
<CButton variant="facebook"><span>Facebook</span></CButton>
|
||||
</code>
|
||||
<hr/>
|
||||
<h6>
|
||||
Size Small
|
||||
<small>Add <code>size="sm"</code></small>
|
||||
</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<CIcon :name="brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<CIcon :name="brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<CIcon :name="brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button </strong> <small>Icons only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>
|
||||
{{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
|
||||
</code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<CIcon :name="brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<CIcon :name="brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<CIcon :name="brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>{{ $options.usage }}</code>
|
||||
<hr/>
|
||||
<h6>
|
||||
Size Small
|
||||
<small>Add <code>size="sm"</code></small>
|
||||
</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<CIcon :name="brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<CIcon :name="brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<CIcon :name="brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button </strong> <small>Icons only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>{{ $options.iconsOnlyUsage }}</code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<CIcon :name="brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<CIcon :name="brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<CIcon :name="brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button </strong> <small>Text only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small> <code><CButton variant="facebook"><span>Facebook</span></CButton></code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button </strong> <small>Text only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>
|
||||
{{ $options.textOnlyUsage }}
|
||||
</code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:key="key"
|
||||
:variant="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'brand-buttons',
|
||||
name: 'BrandButtons',
|
||||
usage: '<CButton variant="facebook"><span>Facebook</span></CButton>',
|
||||
iconsOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
|
||||
textOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
|
||||
brands: [
|
||||
'facebook',
|
||||
'twitter',
|
||||
|
||||
+203
-215
@@ -1,221 +1,209 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12" >
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap button group</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton variant="secondary">One</CButton>
|
||||
<CButton variant="secondary">Two</CButton>
|
||||
<CButton variant="secondary">Three</CButton>
|
||||
<CButton variant="secondary">Four</CButton>
|
||||
<CButton variant="secondary" class="d-sm-down-none">Five</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup>
|
||||
<CButton class="d-sm-down-none" variant="success">Success</CButton>
|
||||
<CButton variant="info">Info</CButton>
|
||||
<CButton variant="warning">Warn</CButton>
|
||||
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
|
||||
<CButton variant="danger">Danger</CButton>
|
||||
<CButton variant="link">Link</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Button group </strong>sizing
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton variant="secondary">Left</CButton>
|
||||
<CButton variant="secondary">Middle</CButton>
|
||||
<CButton variant="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup size="sm">
|
||||
<CButton variant="secondary">Left</CButton>
|
||||
<CButton variant="secondary">Middle</CButton>
|
||||
<CButton variant="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup size="lg">
|
||||
<CButton variant="secondary">Left</CButton>
|
||||
<CButton variant="secondary">Middle</CButton>
|
||||
<CButton variant="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
|
||||
<CButton variant="secondary" 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 variant="secondary" class="d-sm-down-none">Button 3</CButton>
|
||||
<CDropdown right split text="Split Menu" variant="info">
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Button group </strong>vertical variation
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup vertical>
|
||||
<CButton variant="secondary">Top</CButton>
|
||||
<CButton variant="secondary">Middle</CButton>
|
||||
<CButton variant="secondary">Bottom</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Button toolbar </strong>
|
||||
<small>with button groups</small>
|
||||
<!-- <div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div> -->
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups">
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton variant="secondary" class="d-sm-down-none">«</CButton>
|
||||
<CButton variant="secondary">‹</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
|
||||
<CButton variant="secondary">Undo</CButton>
|
||||
<CButton variant="secondary">Redo</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton variant="secondary">›</CButton>
|
||||
<CButton variant="secondary" class="d-sm-down-none">»</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</div>
|
||||
<hr class="d-sm-down-none"/>
|
||||
<div>
|
||||
<CButtonToolbar
|
||||
aria-label="Toolbar with button groups and input groups"
|
||||
class="d-sm-down-none"
|
||||
>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton variant="secondary">New</CButton>
|
||||
<CButton variant="secondary">Edit</CButton>
|
||||
</CButtonGroup>
|
||||
<CFormInput
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
prepend-html="$"
|
||||
append-html=".00"
|
||||
value="100"
|
||||
/>
|
||||
<CFormSelect
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
prepend-html="Size"
|
||||
value="Medium"
|
||||
:options="['Large','Medium','Small']"
|
||||
custom
|
||||
/>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton variant="secondary">Save</CButton>
|
||||
<CButton variant="secondary">Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</div>
|
||||
<hr/>
|
||||
<div>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||
<CButtonGroup class="mx-1 d-sm-down-none">
|
||||
<CButton variant="secondary">New</CButton>
|
||||
<CButton variant="secondary">Edit</CButton>
|
||||
<CButton variant="secondary">Undo</CButton>
|
||||
</CButtonGroup>
|
||||
<CDropdown
|
||||
variant="secondary"
|
||||
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 variant="secondary">Save</CButton>
|
||||
<CButton variant="secondary">Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap button group</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton variant="secondary">One</CButton>
|
||||
<CButton variant="secondary">Two</CButton>
|
||||
<CButton variant="secondary">Three</CButton>
|
||||
<CButton variant="secondary">Four</CButton>
|
||||
<CButton variant="secondary" class="d-sm-down-none">Five</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup>
|
||||
<CButton class="d-sm-down-none" variant="success">Success</CButton>
|
||||
<CButton variant="info">Info</CButton>
|
||||
<CButton variant="warning">Warn</CButton>
|
||||
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
|
||||
<CButton variant="danger">Danger</CButton>
|
||||
<CButton variant="link">Link</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Button group </strong>sizing
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton variant="secondary">Left</CButton>
|
||||
<CButton variant="secondary">Middle</CButton>
|
||||
<CButton variant="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup size="sm">
|
||||
<CButton variant="secondary">Left</CButton>
|
||||
<CButton variant="secondary">Middle</CButton>
|
||||
<CButton variant="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup size="lg">
|
||||
<CButton variant="secondary">Left</CButton>
|
||||
<CButton variant="secondary">Middle</CButton>
|
||||
<CButton variant="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
|
||||
<CButton variant="secondary" 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 variant="secondary" class="d-sm-down-none">Button 3</CButton>
|
||||
<CDropdown right split text="Split Menu" variant="info">
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Button group </strong>vertical variation
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup vertical>
|
||||
<CButton variant="secondary">Top</CButton>
|
||||
<CButton variant="secondary">Middle</CButton>
|
||||
<CButton variant="secondary">Bottom</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Button toolbar </strong>
|
||||
<small>with button groups</small>
|
||||
<!-- <div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div> -->
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups">
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton variant="secondary" class="d-sm-down-none">«</CButton>
|
||||
<CButton variant="secondary">‹</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
|
||||
<CButton variant="secondary">Undo</CButton>
|
||||
<CButton variant="secondary">Redo</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton variant="secondary">›</CButton>
|
||||
<CButton variant="secondary" class="d-sm-down-none">»</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</div>
|
||||
<hr class="d-sm-down-none"/>
|
||||
<div>
|
||||
<CButtonToolbar
|
||||
aria-label="Toolbar with button groups and input groups"
|
||||
class="d-sm-down-none"
|
||||
>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton variant="secondary">New</CButton>
|
||||
<CButton variant="secondary">Edit</CButton>
|
||||
</CButtonGroup>
|
||||
<CFormInput
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
prepend-html="$"
|
||||
append-html=".00"
|
||||
value="100"
|
||||
/>
|
||||
<CFormSelect
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
prepend-html="Size"
|
||||
value="Medium"
|
||||
:options="['Large','Medium','Small']"
|
||||
custom
|
||||
/>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton variant="secondary">Save</CButton>
|
||||
<CButton variant="secondary">Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</div>
|
||||
<hr/>
|
||||
<div>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||
<CButtonGroup class="mx-1 d-sm-down-none">
|
||||
<CButton variant="secondary">New</CButton>
|
||||
<CButton variant="secondary">Edit</CButton>
|
||||
<CButton variant="secondary">Undo</CButton>
|
||||
</CButtonGroup>
|
||||
<CDropdown
|
||||
variant="secondary"
|
||||
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 variant="secondary">Save</CButton>
|
||||
<CButton variant="secondary">Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'button-groups',
|
||||
data () {
|
||||
return {
|
||||
myToggle: false,
|
||||
myToggle2: false,
|
||||
itemsCount: 33
|
||||
|
||||
}
|
||||
}
|
||||
name: 'ButtonGroups',
|
||||
}
|
||||
</script>
|
||||
|
||||
+326
-328
@@ -1,360 +1,358 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap Dropdown</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/3.0/components/Dropdown"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown Button"
|
||||
class="m-2"
|
||||
variant="secondary"
|
||||
>
|
||||
<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 toggler-text="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
|
||||
toggler-text="Dropdown with divider"
|
||||
class="m-2"
|
||||
variant="secondary"
|
||||
>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second item</CDropdownItem>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
<CDropdownItem>Separated Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown with header"
|
||||
class="m-2"
|
||||
variant="secondary"
|
||||
>
|
||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Dropdown </strong>
|
||||
<small>positioning</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Left align"
|
||||
variant="primary"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
placement="bottom-end"
|
||||
toggler-text="Right align"
|
||||
variant="primary"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Drop-Up"
|
||||
variant="info"
|
||||
class="m-2"
|
||||
placement="top-start"
|
||||
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
variant="secondary"
|
||||
:offset="25"
|
||||
toggler-text="Offset Dropdown"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
variant="secondary"
|
||||
split
|
||||
toggler-text="Split Dropdown"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Dropdown </strong>
|
||||
<small>hidden caret</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
variant="link"
|
||||
size="lg"
|
||||
no-caret
|
||||
>
|
||||
<template #toggler-content>
|
||||
🔍<span class="sr-only">Search</span>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Dropdown </strong>
|
||||
<small>sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
toggler-text="Large"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
split
|
||||
toggler-text="Large Split"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
<br>
|
||||
<CDropdown
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
toggler-text="Small"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
split toggler-text="Small Split"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Dropdown </strong>
|
||||
<small>headers and accessibility</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown ARIA" variant="primary"
|
||||
class="m-2"
|
||||
>
|
||||
<div role="group">
|
||||
<CDropdownHeader>Groups</CDropdownHeader>
|
||||
<CDropdownItem>Add</CDropdownItem>
|
||||
<CDropdownItem>Delete</CDropdownItem>
|
||||
</div>
|
||||
<div role="group">
|
||||
<CDropdownHeader>Users</CDropdownHeader>
|
||||
<CDropdownItem>Add</CDropdownItem>
|
||||
<CDropdownItem>Delete</CDropdownItem>
|
||||
</div>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
<CDropdownItem>
|
||||
Something <strong>not</strong> associated with user
|
||||
</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Dropdown </strong>
|
||||
<small><code>variant</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Primary"
|
||||
variant="primary"
|
||||
class="m-0 d-inline-block"
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap Dropdown</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/3.0/components/Dropdown"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Secondary"
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown Button"
|
||||
class="m-2"
|
||||
variant="secondary"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<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>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Success"
|
||||
variant="success"
|
||||
class="m-0 d-inline-block"
|
||||
</div>
|
||||
<!-- <div>
|
||||
<CDropdown toggler-text="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
|
||||
toggler-text="Dropdown with divider"
|
||||
class="m-2"
|
||||
variant="secondary"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second item</CDropdownItem>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
<CDropdownItem>Separated Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Warning"
|
||||
variant="warning"
|
||||
class="m-0 d-inline-block"
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown with header"
|
||||
class="m-2"
|
||||
variant="secondary"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Dropdown </strong>
|
||||
<small>positioning</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Danger"
|
||||
variant="danger"
|
||||
class="m-0 d-inline-block"
|
||||
toggler-text="Left align"
|
||||
variant="primary"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Info"
|
||||
placement="bottom-end"
|
||||
toggler-text="Right align"
|
||||
variant="primary"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Drop-Up"
|
||||
variant="info"
|
||||
class="m-0 d-inline-block"
|
||||
class="m-2"
|
||||
placement="top-start"
|
||||
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Light"
|
||||
variant="light"
|
||||
class="m-0 d-inline-block"
|
||||
variant="secondary"
|
||||
:offset="25"
|
||||
toggler-text="Offset Dropdown"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Dark"
|
||||
variant="dark"
|
||||
class="m-0 d-inline-block"
|
||||
variant="secondary"
|
||||
split
|
||||
toggler-text="Split Dropdown"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Dropdown </strong>
|
||||
<small>hidden caret</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Link"
|
||||
variant="link"
|
||||
class="m-0 d-inline-block"
|
||||
size="lg"
|
||||
no-caret
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
<template #toggler-content>
|
||||
🔍<span class="sr-only">Search</span>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Dropdown </strong>
|
||||
<small>sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
toggler-text="Large"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
split
|
||||
toggler-text="Large Split"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
<br>
|
||||
<CDropdown
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
toggler-text="Small"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
split toggler-text="Small Split"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Dropdown </strong>
|
||||
<small>headers and accessibility</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown ARIA" variant="primary"
|
||||
class="m-2"
|
||||
>
|
||||
<div role="group">
|
||||
<CDropdownHeader>Groups</CDropdownHeader>
|
||||
<CDropdownItem>Add</CDropdownItem>
|
||||
<CDropdownItem>Delete</CDropdownItem>
|
||||
</div>
|
||||
<div role="group">
|
||||
<CDropdownHeader>Users</CDropdownHeader>
|
||||
<CDropdownItem>Add</CDropdownItem>
|
||||
<CDropdownItem>Delete</CDropdownItem>
|
||||
</div>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
<CDropdownItem>
|
||||
Something <strong>not</strong> associated with user
|
||||
</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Dropdown </strong>
|
||||
<small><code>variant</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Primary"
|
||||
variant="primary"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Secondary"
|
||||
variant="secondary"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Success"
|
||||
variant="success"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Warning"
|
||||
variant="warning"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Danger"
|
||||
variant="danger"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Info"
|
||||
variant="info"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Light"
|
||||
variant="light"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Dark"
|
||||
variant="dark"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Link"
|
||||
variant="link"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard >
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Standard buttons</strong>
|
||||
<div class="card-header-actions">
|
||||
@@ -113,7 +113,7 @@
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard >
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Outline Buttons</strong>
|
||||
</CCardHeader>
|
||||
@@ -213,7 +213,7 @@
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard >
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Ghost Buttons</strong>
|
||||
</CCardHeader>
|
||||
@@ -226,7 +226,7 @@
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0" >
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block ghost variant="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
@@ -314,7 +314,7 @@
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard >
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Square Buttons</strong>
|
||||
</CCardHeader>
|
||||
@@ -421,7 +421,7 @@
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard >
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Pill Buttons</strong>
|
||||
</CCardHeader>
|
||||
@@ -528,7 +528,7 @@
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard >
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Sizes</strong>
|
||||
</CCardHeader>
|
||||
@@ -562,7 +562,7 @@
|
||||
<CButton variant="primary">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton outline variant="secondary" >Outline Button</CButton>
|
||||
<CButton outline variant="secondary">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton ghost variant="success">Ghost Button</CButton>
|
||||
@@ -596,7 +596,7 @@
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard >
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>With Icons</strong>
|
||||
</CCardHeader>
|
||||
@@ -696,15 +696,9 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'standard-buttons',
|
||||
name: 'StandardButtons',
|
||||
data () {
|
||||
return { togglePress: false }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn.disabled {
|
||||
cursor: auto;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
Reference in New Issue
Block a user