sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: add missing variant props

Browse Source
This commit is contained in:
woothu
2019-07-24 17:10:56 +02:00
parent 8879eccbc8
commit 25a46142cd
10 changed files with 92 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/buttons/ButtonGroups.vue
+37 -36
View File
@@ -16,11 +16,11 @@
<CCardBody>
<div>
<CButtonGroup>
<CButton>One</CButton>
<CButton>Two</CButton>
<CButton>Three</CButton>
<CButton>Four</CButton>
<CButton class="c-d-sm-down-none">Five</CButton>
<CButton variant="secondary">One</CButton>
<CButton variant="secondary">Two</CButton>
<CButton variant="secondary">Three</CButton>
<CButton variant="secondary">Four</CButton>
<CButton variant="secondary" class="c-d-sm-down-none">Five</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup>
@@ -44,21 +44,21 @@
<CCardBody>
<div>
<CButtonGroup>
<CButton>Left</CButton>
<CButton>Middle</CButton>
<CButton>Right</CButton>
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="sm">
<CButton>Left</CButton>
<CButton>Middle</CButton>
<CButton>Right</CButton>
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="lg">
<CButton>Left</CButton>
<CButton>Middle</CButton>
<CButton>Right</CButton>
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
</CButtonGroup>
</div>
</CCardBody>
@@ -72,15 +72,15 @@
<CCardBody>
<div>
<CButtonGroup>
<CButton class="c-d-sm-down-none">Button 1</CButton>
<CButton class="c-d-sm-down-none">Button 2</CButton>
<CButton variant="secondary" class="c-d-sm-down-none">Button 1</CButton>
<CButton variant="secondary" class="c-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="c-d-sm-down-none">Button 3</CButton>
<CButton variant="secondary" class="c-d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" variant="info">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
@@ -101,9 +101,9 @@
<CCardBody>
<div>
<CButtonGroup vertical>
<CButton>Top</CButton>
<CButton>Middle</CButton>
<CButton>Bottom</CButton>
<CButton variant="secondary">Top</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Bottom</CButton>
</CButtonGroup>
</div>
</CCardBody>
@@ -125,17 +125,17 @@
<div>
<CButtonToolbar aria-label="Toolbar with button groups">
<CButtonGroup class="c-mx-1">
<CButton class="c-d-sm-down-none">&laquo;</CButton>
<CButton>&lsaquo;</CButton>
<CButton variant="secondary" class="c-d-sm-down-none">&laquo;</CButton>
<CButton variant="secondary">&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="c-mx-1">
<CButton class="c-d-sm-down-none">Edit</CButton>
<CButton>Undo</CButton>
<CButton>Redo</CButton>
<CButton variant="secondary" class="c-d-sm-down-none">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
<CButton variant="secondary">Redo</CButton>
</CButtonGroup>
<CButtonGroup class="c-mx-1">
<CButton>&rsaquo;</CButton>
<CButton class="c-d-sm-down-none">&raquo;</CButton>
<CButton variant="secondary">&rsaquo;</CButton>
<CButton variant="secondary" class="c-d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
@@ -146,8 +146,8 @@
class="c-d-sm-down-none"
>
<CButtonGroup size="sm" class="c-mx-1">
<CButton>New</CButton>
<CButton>Edit</CButton>
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
</CButtonGroup>
<CFormInput
class="c-mb-0 c-w-25 c-mx-1"
@@ -165,8 +165,8 @@
custom
/>
<CButtonGroup size="sm" class="c-mx-1">
<CButton>Save</CButton>
<CButton>Cancel</CButton>
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
@@ -174,11 +174,12 @@
<div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="c-mx-1 c-d-sm-down-none">
<CButton>New</CButton>
<CButton>Edit</CButton>
<CButton>Undo</CButton>
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
</CButtonGroup>
<CDropdown
variant="secondary"
class="c-mx-1"
placement="bottom-end"
button-content="Menu"
@@ -188,8 +189,8 @@
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="c-mx-1">
<CButton>Save</CButton>
<CButton>Cancel</CButton>
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
src/views/buttons/Dropdowns.vue
+21 -3
View File
@@ -15,7 +15,11 @@
</CCardHeader>
<CCardBody>
<div>
<CDropdown button-html="Dropdown Button" class="c-m-2">
<CDropdown
button-html="Dropdown Button"
class="c-m-2"
variant="secondary"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
@@ -33,7 +37,11 @@
</CDropdown>
</div> -->
<div>
<CDropdown button-html="Dropdown with divider" class="c-m-2">
<CDropdown
button-html="Dropdown with divider"
class="c-m-2"
variant="secondary"
>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
@@ -41,7 +49,11 @@
</CDropdown>
</div>
<div>
<CDropdown button-html="Dropdown with header" class="c-m-2">
<CDropdown
button-html="Dropdown with header"
class="c-m-2"
variant="secondary"
>
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second Item</CDropdownItem>
@@ -93,6 +105,7 @@
</div>
<div>
<CDropdown
variant="secondary"
:offset="25"
button-html="Offset Dropdown"
class="c-m-2"
@@ -104,6 +117,7 @@
</div>
<div>
<CDropdown
variant="secondary"
split
button-html="Split Dropdown"
class="c-m-2"
@@ -151,6 +165,7 @@
<CCardBody>
<div>
<CDropdown
variant="secondary"
size="lg"
button-html="Large"
class="c-m-2"
@@ -160,6 +175,7 @@
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown
variant="secondary"
size="lg"
split
button-html="Large Split"
@@ -171,6 +187,7 @@
</CDropdown>
<br>
<CDropdown
variant="secondary"
size="sm"
button-html="Small"
class="c-m-2"
@@ -180,6 +197,7 @@
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<CDropdown
variant="secondary"
size="sm"
split button-html="Small Split"
class="c-m-2"