sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

refactor: template changes to implement new CCard syntax

Browse Source
This commit is contained in:
woothu
2019-03-05 11:19:23 +01:00
parent 7e3646e438
commit 403122ddfb
36 changed files with 2725 additions and 2895 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/buttons/ButtonGroups.vue
+146 -136
View File
@@ -4,7 +4,7 @@
<CRow>
<CCol cols="12" >
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -12,95 +12,103 @@
</a>
</div>
</CCardHeader>
<div>
<CButtonGroup>
<CButton>One</CButton>
<CButton>Two</CButton>
<CButton>Three</CButton>
<CButton>Four</CButton>
<CButton class="d-sm-down-none">Five</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup>
<CButton class="d-sm-down-none" variant="success">Success</CButton>
<CButton variant="info">Info</CButton>
<CButton variant="warning">Warn</CButton>
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
<CButton variant="danger">Danger</CButton>
<CButton variant="link">Link</CButton>
</CButtonGroup>
</div>
<CCardBody>
<div>
<CButtonGroup>
<CButton>One</CButton>
<CButton>Two</CButton>
<CButton>Three</CButton>
<CButton>Four</CButton>
<CButton class="d-sm-down-none">Five</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup>
<CButton class="d-sm-down-none" variant="success">Success</CButton>
<CButton variant="info">Info</CButton>
<CButton variant="warning">Warn</CButton>
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
<CButton variant="danger">Danger</CButton>
<CButton variant="link">Link</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
</CCardHeader>
<div>
<CButtonGroup>
<CButton>Left</CButton>
<CButton>Middle</CButton>
<CButton>Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="sm">
<CButton>Left</CButton>
<CButton>Middle</CButton>
<CButton>Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="lg">
<CButton>Left</CButton>
<CButton>Middle</CButton>
<CButton>Right</CButton>
</CButtonGroup>
</div>
<CCardBody>
<div>
<CButtonGroup>
<CButton>Left</CButton>
<CButton>Middle</CButton>
<CButton>Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="sm">
<CButton>Left</CButton>
<CButton>Middle</CButton>
<CButton>Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="lg">
<CButton>Left</CButton>
<CButton>Middle</CButton>
<CButton>Right</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
</CCardHeader>
<div>
<CButtonGroup>
<CButton class="d-sm-down-none">Button 1</CButton>
<CButton class="d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" variant="success">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButton class="d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" variant="info">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
</CButtonGroup>
</div>
<CCardBody>
<div>
<CButtonGroup>
<CButton class="d-sm-down-none">Button 1</CButton>
<CButton class="d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" variant="success">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButton class="d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" variant="info">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
</CCardHeader>
<div>
<CButtonGroup vertical>
<CButton>Top</CButton>
<CButton>Middle</CButton>
<CButton>Bottom</CButton>
</CButtonGroup>
</div>
<CCardBody>
<div>
<CButtonGroup vertical>
<CButton>Top</CButton>
<CButton>Middle</CButton>
<CButton>Bottom</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -108,74 +116,76 @@
</a>
</div>
</CCardHeader>
<div>
<CButtonToolbar key-nav aria-label="Toolbar with button groups">
<CButtonGroup class="mx-1">
<CButton class="d-sm-down-none">&laquo;</CButton>
<CButton>&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton class="d-sm-down-none">Edit</CButton>
<CButton>Undo</CButton>
<CButton>Redo</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton>&rsaquo;</CButton>
<CButton class="d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr class="d-sm-down-none"/>
<div>
<CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
<CButtonGroup size="sm" class="mx-1">
<CButton>New</CButton>
<CButton>Edit</CButton>
</CButtonGroup>
<CFormInput
class="mb-0 w-25 mx-1"
size="sm"
prepend="$"
append=".00"
value="100"
/>
<CFormSelect
class="mb-0 w-25 mx-1"
size="sm"
prepend="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
/>
<CButtonGroup size="sm" class="mx-1">
<CButton>Save</CButton>
<CButton>Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr/>
<div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="mx-1 d-sm-down-none">
<CButton>New</CButton>
<CButton>Edit</CButton>
<CButton>Undo</CButton>
</CButtonGroup>
<CDropdown
class="mx-1"
placement="bottom-end"
button-content="Menu"
>
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="mx-1">
<CButton>Save</CButton>
<CButton>Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<CCardBody>
<div>
<CButtonToolbar key-nav aria-label="Toolbar with button groups">
<CButtonGroup class="mx-1">
<CButton class="d-sm-down-none">&laquo;</CButton>
<CButton>&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton class="d-sm-down-none">Edit</CButton>
<CButton>Undo</CButton>
<CButton>Redo</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton>&rsaquo;</CButton>
<CButton class="d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr class="d-sm-down-none"/>
<div>
<CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
<CButtonGroup size="sm" class="mx-1">
<CButton>New</CButton>
<CButton>Edit</CButton>
</CButtonGroup>
<CFormInput
class="mb-0 w-25 mx-1"
size="sm"
prepend="$"
append=".00"
value="100"
/>
<CFormSelect
class="mb-0 w-25 mx-1"
size="sm"
prepend="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
/>
<CButtonGroup size="sm" class="mx-1">
<CButton>Save</CButton>
<CButton>Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr/>
<div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="mx-1 d-sm-down-none">
<CButton>New</CButton>
<CButton>Edit</CButton>
<CButton>Undo</CButton>
</CButtonGroup>
<CDropdown
class="mx-1"
placement="bottom-end"
buttonContent="Menu"
>
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="mx-1">
<CButton>Save</CButton>
<CButton>Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>