v4 initial commit
This commit is contained in:
Łukasz Holeczek
@@ -1,240 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/button-components"
|
||||
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"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon size="sm" :name="'cib-' + 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"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon :name="'cib-' + 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"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon size="lg" :name="'cib-' + 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"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon size="sm" :name="'cib-' + brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon :name="'cib-' + 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"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon size="lg" :name="'cib-' + 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>
|
||||
{{ $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
|
||||
size="sm"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:key="key"
|
||||
:color="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
|
||||
size="lg"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BrandButtons',
|
||||
usage: '<CButton color="facebook"><CIcon name="cib-facebook"/><span>Facebook</span></CButton>',
|
||||
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
|
||||
textOnlyUsage: '<CButton color="facebook"><span>Facebook</span></CButton>',
|
||||
brands: [
|
||||
'facebook',
|
||||
'twitter',
|
||||
'linkedin',
|
||||
'flickr',
|
||||
'tumblr',
|
||||
'xing',
|
||||
'github',
|
||||
'stackoverflow',
|
||||
'youtube',
|
||||
'dribbble',
|
||||
'instagram',
|
||||
'pinterest',
|
||||
'vk',
|
||||
'yahoo',
|
||||
'behance',
|
||||
'reddit',
|
||||
'vimeo'
|
||||
]
|
||||
// labels: {
|
||||
// facebook: 'Facebook',
|
||||
// twitter: 'Twitter',
|
||||
// linkedin: 'LinkedIn',
|
||||
// flickr: 'Flickr',
|
||||
// tumblr: 'Tumblr',
|
||||
// xing: 'Xing',
|
||||
// github: 'Github',
|
||||
// stackoverflow: 'StackOverflow',
|
||||
// youtube: 'YouTube',
|
||||
// dribbble: 'Dribbble',
|
||||
// instagram: 'Instagram',
|
||||
// pinterest: 'Pinterest',
|
||||
// vk: 'VK',
|
||||
// yahoo: 'Yahoo',
|
||||
// behance: 'Behance',
|
||||
// reddit: 'Reddit',
|
||||
// vimeo: 'Vimeo'
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.btn {
|
||||
margin-bottom: 4px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
// todo
|
||||
.btn-brand:not(:only-child) {
|
||||
.c-icon {
|
||||
margin-top: 0 !important;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.c-icon-sm {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.c-icon-lg {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,198 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap button group</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/button-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">One</CButton>
|
||||
<CButton color="secondary">Two</CButton>
|
||||
<CButton color="secondary">Three</CButton>
|
||||
<CButton color="secondary">Four</CButton>
|
||||
<CButton color="secondary" class="d-sm-down-none">Five</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup>
|
||||
<CButton class="d-sm-down-none" color="success">Success</CButton>
|
||||
<CButton color="info">Info</CButton>
|
||||
<CButton color="warning">Warn</CButton>
|
||||
<CButton class="d-sm-down-none" color="primary">Primary</CButton>
|
||||
<CButton color="danger">Danger</CButton>
|
||||
<CButton color="link">Link</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Button group </strong>sizing
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup size="sm">
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup size="lg">
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> Button group </strong>dropdown support
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary" class="d-sm-down-none">Button 1</CButton>
|
||||
<CButton color="secondary" class="d-sm-down-none">Button 2</CButton>
|
||||
<CDropdown right text="Menu" color="success">
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CButton color="secondary" class="d-sm-down-none">Button 3</CButton>
|
||||
<CDropdown right split text="Split Menu" color="info">
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Button group </strong>vertical variation
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup vertical>
|
||||
<CButton color="secondary">Top</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Bottom</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Button toolbar </strong>
|
||||
<small>with button groups</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups" >
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary" class="d-sm-down-none">«</CButton>
|
||||
<CButton color="secondary">‹</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary" class="d-sm-down-none">Edit</CButton>
|
||||
<CButton color="secondary">Undo</CButton>
|
||||
<CButton color="secondary">Redo</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary">›</CButton>
|
||||
<CButton color="secondary" class="d-sm-down-none">»</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
<hr class="d-sm-down-none"/>
|
||||
<CButtonToolbar
|
||||
aria-label="Toolbar with button groups and input groups"
|
||||
class="d-sm-down-none"
|
||||
>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton color="secondary">New</CButton>
|
||||
<CButton color="secondary">Edit</CButton>
|
||||
</CButtonGroup>
|
||||
<CInput
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
append=".00"
|
||||
value="100"
|
||||
prepend="$"
|
||||
/>
|
||||
<CSelect
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
value="Medium"
|
||||
:options="['Large','Medium','Small']"
|
||||
custom
|
||||
prepend="Size"
|
||||
/>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton color="secondary">Save</CButton>
|
||||
<CButton color="secondary">Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
<hr/>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||
<CButtonGroup class="mx-1 d-sm-down-none">
|
||||
<CButton color="secondary">New</CButton>
|
||||
<CButton color="secondary">Edit</CButton>
|
||||
<CButton color="secondary">Undo</CButton>
|
||||
</CButtonGroup>
|
||||
<CDropdown
|
||||
color="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 color="secondary">Save</CButton>
|
||||
<CButton color="secondary">Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ButtonGroups',
|
||||
}
|
||||
</script>
|
||||
@@ -1,363 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Dropdown</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/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"
|
||||
color="secondary"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
<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"
|
||||
color="secondary"
|
||||
>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second item</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Separated Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown with header"
|
||||
class="m-2"
|
||||
color="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>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>positioning</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Left align"
|
||||
color="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"
|
||||
color="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"
|
||||
color="info"
|
||||
class="m-2"
|
||||
placement="top-start"
|
||||
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
:offset="[10, 5]"
|
||||
toggler-text="Offset Dropdown"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="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>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>hidden caret</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="link"
|
||||
size="lg"
|
||||
:caret="false"
|
||||
>
|
||||
<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>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="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
|
||||
color="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
|
||||
color="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
|
||||
color="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>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>headers and accessibility</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown ARIA" color="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/>
|
||||
<CDropdownItem>
|
||||
Something <strong>not</strong> associated with user
|
||||
</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small><code>color</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Primary"
|
||||
color="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"
|
||||
color="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"
|
||||
color="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"
|
||||
color="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"
|
||||
color="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"
|
||||
color="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"
|
||||
color="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"
|
||||
color="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"
|
||||
color="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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Dropdowns'
|
||||
}
|
||||
</script>
|
||||
@@ -1,704 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Standard buttons</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/button-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="align-items-center">
|
||||
<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">
|
||||
<CButton block color="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="primary" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="success" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="warning" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="danger" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="info" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="light" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="dark" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="link" aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Outline Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use <code>variant="outline"</code> prop
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<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">
|
||||
<CButton block variant="outline" color="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="primary" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="success" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="warning" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="danger" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="info" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="light" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="dark" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="primary" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="success" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="warning" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="danger" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="info" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="light" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="dark" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Ghost Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use
|
||||
<code>variant="ghost"</code> prop for ghost buttons.
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<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">
|
||||
<CButton block variant="ghost" color="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="success" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="info" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="light" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="primary" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="success" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="warning" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="danger" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="info" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="light" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="dark" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Square Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use
|
||||
<code>square</code> prop for square buttons.
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<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">
|
||||
<CButton block color="primary" square>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" square>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" square>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" square>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" square>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" square>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" square>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" square>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" square>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="primary" square aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="secondary" square aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="success" square aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="warning" square aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="danger" square aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="info" square aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="light" square aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="dark" square aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="link" square aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" square disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" square disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" square disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" square disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" square disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" square disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" square disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" square disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" square disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Pill Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use
|
||||
<code>pill</code> prop for pill buttons.
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<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">
|
||||
<CButton block color="primary" shape="pill">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" shape="pill">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" shape="pill">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" shape="pill">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" shape="pill">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" shape="pill">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" shape="pill">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" shape="pill">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" shape="pill">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="primary" shape="pill" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="secondary" shape="pill" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="success" shape="pill" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="warning" shape="pill" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="danger" shape="pill" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="info" shape="pill" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="light" shape="pill" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="dark" shape="pill" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="link" shape="pill" aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" shape="pill" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" shape="pill" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" shape="pill" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" shape="pill" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" shape="pill" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" shape="pill" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" shape="pill" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" shape="pill" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" shape="pill" disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Sizes</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="2" xl class="mb-3 mb-xl-0">
|
||||
Small
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary" size="sm">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="outline" color="secondary" size="sm">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton size="sm" variant="ghost" color="success">Ghost Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="warning" size="sm" square>Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="danger" size="sm" shape="pill">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="2" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="outline" color="secondary">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="ghost" color="success">Ghost Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="warning" square>Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="danger" shape="pill">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="2" xl class="mb-3 mb-xl-0">
|
||||
Large
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary" size="lg">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="warning" size="lg" square>Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="danger" size="lg" shape="pill">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>With Icons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="align-items-center">
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="primary">
|
||||
<CIcon name="cil-lightbulb"/> Standard Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="secondary" variant="outline">
|
||||
<CIcon name="cil-lightbulb"/> Outline Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="success">
|
||||
<CIcon name="cil-lightbulb"/> Ghost Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="warning" square>
|
||||
<CIcon name="cil-lightbulb"/> Square Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="danger" shape="pill">
|
||||
<CIcon name="cil-lightbulb"/> Pill Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Toggle pressed state</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton size="lg" color="secondary" block>Block level button</CButton>
|
||||
<CButton size="lg" color="primary" block>Block level button</CButton>
|
||||
<CButton size="lg" color="success" block>Block level button</CButton>
|
||||
<CButton size="lg" color="info" block>Block level button</CButton>
|
||||
<CButton size="lg" color="warning" block>Block level button</CButton>
|
||||
<CButton size="lg" color="danger" block>Block level button</CButton>
|
||||
<CButton size="lg" color="link" block>Block level button</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton size="lg" variant="outline" color="secondary" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="primary" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="success" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="info" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="warning" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="danger" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="ghost" color="info" block>Block level button</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'StandardButtons',
|
||||
data () {
|
||||
return { togglePress: false }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user