refactor: update examples
This commit is contained in:
Łukasz Holeczek
+382
-219
@@ -1,224 +1,387 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCol :xs="12">
|
||||
<DocsCallout name="Button Group" href="components/button-group" />
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Groups</strong>
|
||||
<strong>Vue Button Group</strong> <span>Basic example</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Basic example</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/button-group.html#basic-example">
|
||||
<CButtonGroup role="group" aria-label="Basic example">
|
||||
<CButton color="primary">Left</CButton>
|
||||
<CButton color="primary">Middle</CButton>
|
||||
<CButton color="primary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/button-group.html#basic-example">
|
||||
<CButtonGroup>
|
||||
<CButton href="#" color="primary" active>Active link</CButton>
|
||||
<CButton href="#" color="primary">Link</CButton>
|
||||
<CButton href="#" color="primary">Link</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Mixed styles</h4>
|
||||
<Example href="components/button-group.html#mixed-styles">
|
||||
<CButtonGroup role="group" aria-label="Basic mixed styles example">
|
||||
<CButton color="danger">Left</CButton>
|
||||
<CButton color="warning">Middle</CButton>
|
||||
<CButton color="success">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Outlined styles</h4>
|
||||
<Example href="components/button-group.html#outlined-styles">
|
||||
<CButtonGroup role="group" aria-label="Basic outlined example">
|
||||
<CButton color="primary" variant="outline">Left</CButton>
|
||||
<CButton color="primary" variant="outline">Middle</CButton>
|
||||
<CButton color="primary" variant="outline">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<h4 class="mt-4">Checkbox and radio button groups</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/button-group.html#checkbox-and-radio-button-groups">
|
||||
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
|
||||
<CFormCheck button buttonVariant="outline" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
|
||||
<CFormCheck button buttonVariant="outline" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
|
||||
<CFormCheck button buttonVariant="outline" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/button-group.html#checkbox-and-radio-button-groups">
|
||||
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
|
||||
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
|
||||
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
|
||||
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<h4 class="mt-4">Button toolbar</h4>
|
||||
<Example href="components/button-group.html#button-toolbar">
|
||||
<CButtonToolbar role="group" aria-label="Toolbar with button groups">
|
||||
<CButtonGroup class="me-2" role="group" aria-label="First group">
|
||||
<CButton color="primary">1</CButton>
|
||||
<CButton color="primary">2</CButton>
|
||||
<CButton color="primary">3</CButton>
|
||||
<CButton color="primary">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="me-2" role="group" aria-label="Second group">
|
||||
<CButton color="secondary">5</CButton>
|
||||
<CButton color="secondary">6</CButton>
|
||||
<CButton color="secondary">7</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="me-2" role="group" aria-label="Third group">
|
||||
<CButton color="info">8</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</Example>
|
||||
<Example href="components/button-group.html#button-toolbar">
|
||||
<CButtonToolbar class="mb-3" role="group" aria-label="Toolbar with button groups">
|
||||
<CButtonGroup class="me-2" role="group" aria-label="First group">
|
||||
<CButton color="secondary" variant="outline">1</CButton>
|
||||
<CButton color="secondary" variant="outline">2</CButton>
|
||||
<CButton color="secondary" variant="outline">3</CButton>
|
||||
<CButton color="secondary" variant="outline">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
<CButtonToolbar class="justify-content-between" role="group" aria-label="Toolbar with button groups">
|
||||
<CButtonGroup class="me-2" role="group" aria-label="First group">
|
||||
<CButton color="secondary" variant="outline">1</CButton>
|
||||
<CButton color="secondary" variant="outline">2</CButton>
|
||||
<CButton color="secondary" variant="outline">3</CButton>
|
||||
<CButton color="secondary" variant="outline">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Sizing</h4>
|
||||
<Example href="components/button-group.html#sizing">
|
||||
<CButtonGroup size="lg" role="group" aria-label="Large button group">
|
||||
<CButton color="dark" variant="outline">Left</CButton>
|
||||
<CButton color="dark" variant="outline">Middle</CButton>
|
||||
<CButton color="dark" variant="outline">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br/>
|
||||
<CButtonGroup role="group" aria-label="Default button group">
|
||||
<CButton color="dark" variant="outline">Left</CButton>
|
||||
<CButton color="dark" variant="outline">Middle</CButton>
|
||||
<CButton color="dark" variant="outline">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br/>
|
||||
<CButtonGroup size="sm" role="group" aria-label="Small button group">
|
||||
<CButton color="dark" variant="outline">Left</CButton>
|
||||
<CButton color="dark" variant="outline">Middle</CButton>
|
||||
<CButton color="dark" variant="outline">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vertical variation</h4>
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<Example href="components/button-group.html#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<Example href="components/button-group.html#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<Example href="components/button-group.html#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
|
||||
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
|
||||
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<p>
|
||||
Wrap a series of <code><CButton></code> components in
|
||||
<code><CButtonGroup></code>.
|
||||
</p>
|
||||
<Example href="components/button-group">
|
||||
<CButtonGroup role="group" aria-label="Basic example">
|
||||
<CButton color="primary">Left</CButton>
|
||||
<CButton color="primary">Middle</CButton>
|
||||
<CButton color="primary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
<p>
|
||||
These classes can also be added to groups of links, as an
|
||||
alternative to the
|
||||
<code><CNav></code> components.
|
||||
</p>
|
||||
<Example href="components/button-group">
|
||||
<CButtonGroup>
|
||||
<CButton href="#" color="primary" active> Active link </CButton>
|
||||
<CButton href="#" color="primary"> Link </CButton>
|
||||
<CButton href="#" color="primary"> Link </CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Group</strong> <span>Mixed styles</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/button-group#mixed-styles">
|
||||
<CButtonGroup role="group" aria-label="Basic mixed styles example">
|
||||
<CButton color="danger">Left</CButton>
|
||||
<CButton color="warning">Middle</CButton>
|
||||
<CButton color="success">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Group</strong> <span>Outlined styles</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/button-group#outlined-styles">
|
||||
<CButtonGroup role="group" aria-label="Basic outlined example">
|
||||
<CButton color="primary" variant="outline"> Left </CButton>
|
||||
<CButton color="primary" variant="outline"> Middle </CButton>
|
||||
<CButton color="primary" variant="outline"> Right </CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Group</strong> <span>Checkbox and radio button groups</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Combine button-like checkbox and radio toggle buttons into a
|
||||
seamless looking button group.
|
||||
</p>
|
||||
<Example
|
||||
href="components/button-group#checkbox-and-radio-button-groups"
|
||||
>
|
||||
<CButtonGroup
|
||||
role="group"
|
||||
aria-label="Basic checkbox toggle button group"
|
||||
>
|
||||
<CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btncheck1"
|
||||
autoComplete="off" label="Checkbox 1" />
|
||||
<CFormCheck :button="{ color: 'primary', variant: 'outline' }"
|
||||
id="btncheck2" autoComplete="off" label="Checkbox 2" />
|
||||
<CFormCheck :button="{ color: 'primary', variant: 'outline' }"
|
||||
id="btncheck3" autoComplete="off" label="Checkbox 3" />
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
<Example
|
||||
href="components/button-group#checkbox-and-radio-button-groups"
|
||||
>
|
||||
<CButtonGroup
|
||||
role="group"
|
||||
aria-label="Basic checkbox toggle button group"
|
||||
>
|
||||
<CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
|
||||
name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"
|
||||
/> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
|
||||
name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"
|
||||
/> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
|
||||
name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"
|
||||
/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Group</strong> <span>Button toolbar</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Join sets of button groups into button toolbars for more complicated
|
||||
components. Use utility classes as needed to space out groups,
|
||||
buttons, and more.
|
||||
</p>
|
||||
<Example href="components/button-group#button-toolbar">
|
||||
<CButtonToolbar
|
||||
role="group"
|
||||
aria-label="Toolbar with button groups"
|
||||
>
|
||||
<CButtonGroup
|
||||
class="me-2"
|
||||
role="group"
|
||||
aria-label="First group"
|
||||
>
|
||||
<CButton color="primary">1</CButton>
|
||||
<CButton color="primary">2</CButton>
|
||||
<CButton color="primary">3</CButton>
|
||||
<CButton color="primary">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup
|
||||
class="me-2"
|
||||
role="group"
|
||||
aria-label="Second group"
|
||||
>
|
||||
<CButton color="secondary">5</CButton>
|
||||
<CButton color="secondary">6</CButton>
|
||||
<CButton color="secondary">7</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup
|
||||
class="me-2"
|
||||
role="group"
|
||||
aria-label="Third group"
|
||||
>
|
||||
<CButton color="info">8</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</Example>
|
||||
<p>
|
||||
Feel free to combine input groups with button groups in your
|
||||
toolbars. Similar to the example above, you’ll likely need some
|
||||
utilities through to space items correctly.
|
||||
</p>
|
||||
<Example href="components/button-group#button-toolbar">
|
||||
<CButtonToolbar
|
||||
class="mb-3"
|
||||
role="group"
|
||||
aria-label="Toolbar with button groups"
|
||||
>
|
||||
<CButtonGroup
|
||||
class="me-2"
|
||||
role="group"
|
||||
aria-label="First group"
|
||||
>
|
||||
<CButton color="secondary" variant="outline"> 1 </CButton>
|
||||
<CButton color="secondary" variant="outline"> 2 </CButton>
|
||||
<CButton color="secondary" variant="outline"> 3 </CButton>
|
||||
<CButton color="secondary" variant="outline"> 4 </CButton>
|
||||
</CButtonGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput
|
||||
placeholder="Input group example"
|
||||
aria-label="Input group example"
|
||||
aria-describedby="btnGroupAddon"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
<CButtonToolbar
|
||||
class="justify-content-between"
|
||||
role="group"
|
||||
aria-label="Toolbar with button groups"
|
||||
>
|
||||
<CButtonGroup
|
||||
class="me-2"
|
||||
role="group"
|
||||
aria-label="First group"
|
||||
>
|
||||
<CButton color="secondary" variant="outline"> 1 </CButton>
|
||||
<CButton color="secondary" variant="outline"> 2 </CButton>
|
||||
<CButton color="secondary" variant="outline"> 3 </CButton>
|
||||
<CButton color="secondary" variant="outline"> 4 </CButton>
|
||||
</CButtonGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput
|
||||
placeholder="Input group example"
|
||||
aria-label="Input group example"
|
||||
aria-describedby="btnGroupAddon"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Group</strong> <span>Sizing</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Alternatively, of implementing button sizing classes to each button
|
||||
in a group, set
|
||||
<code>size</code> property to all
|
||||
<code><CButtonGroup></code>'s, including each one when
|
||||
nesting multiple groups.
|
||||
</p>
|
||||
<Example href="components/button-group#sizing">
|
||||
<CButtonGroup
|
||||
size="lg"
|
||||
role="group"
|
||||
aria-label="Large button group"
|
||||
>
|
||||
<CButton color="dark" variant="outline"> Left </CButton>
|
||||
<CButton color="dark" variant="outline"> Middle </CButton>
|
||||
<CButton color="dark" variant="outline"> Right </CButton>
|
||||
</CButtonGroup>
|
||||
<br />
|
||||
<CButtonGroup role="group" aria-label="Default button group">
|
||||
<CButton color="dark" variant="outline"> Left </CButton>
|
||||
<CButton color="dark" variant="outline"> Middle </CButton>
|
||||
<CButton color="dark" variant="outline"> Right </CButton>
|
||||
</CButtonGroup>
|
||||
<br />
|
||||
<CButtonGroup
|
||||
size="sm"
|
||||
role="group"
|
||||
aria-label="Small button group"
|
||||
>
|
||||
<CButton color="dark" variant="outline"> Left </CButton>
|
||||
<CButton color="dark" variant="outline"> Middle </CButton>
|
||||
<CButton color="dark" variant="outline"> Right </CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Group</strong> <span>Nesting</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Put a <code><CButtonGroup></code> inside another
|
||||
<code><CButtonGroup></code> when you need dropdown menus
|
||||
combined with a series of buttons.
|
||||
</p>
|
||||
<Example href="components/button-group#nesting">
|
||||
<CButtonGroup
|
||||
role="group"
|
||||
aria-label="Button group with nested dropdown"
|
||||
>
|
||||
<CButton color="primary">1</CButton>
|
||||
<CButton color="primary">2</CButton>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Group</strong> <span>Vertical variation</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Create a set of buttons that appear vertically stacked rather than
|
||||
horizontally.
|
||||
<strong>Split button dropdowns are not supported here.</strong>
|
||||
</p>
|
||||
<Example href="components/button-group/#vertical-variation">
|
||||
<CButtonGroup
|
||||
vertical
|
||||
role="group"
|
||||
aria-label="Vertical button group"
|
||||
>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
<Example href="components/button-group/#vertical-variation">
|
||||
<CButtonGroup
|
||||
vertical
|
||||
role="group"
|
||||
aria-label="Vertical button group"
|
||||
>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
<Example href="components/button-group/#vertical-variation">
|
||||
<CButtonGroup
|
||||
vertical
|
||||
role="group"
|
||||
aria-label="Vertical button group"
|
||||
>
|
||||
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }"
|
||||
name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio
|
||||
1" defaultChecked /> <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }"
|
||||
name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio
|
||||
2" /> <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }"
|
||||
name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio
|
||||
3" />
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
@@ -227,6 +390,6 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonGroups",
|
||||
};
|
||||
</script>
|
||||
name: 'ButtonGroups',
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user