Add views to sections: buttons, icons, notifications
This commit is contained in:
Marcin Michałek
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Brand Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
|
||||
TODO: check did I should remove brand-buttons
|
||||
|
||||
<Example href="breadcrumbs">
|
||||
<template v-for="(brandName, key) in brands" :key="key">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
|
||||
<template v-for="(brandName, key) in brands" :key="key">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon size="sm" :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
|
||||
<template v-for="(brandName, key) in brands" :key="key">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon size="lg" :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BrandButtons",
|
||||
data: function(){
|
||||
return {
|
||||
brands: [
|
||||
'facebook',
|
||||
'twitter',
|
||||
'linkedin',
|
||||
'flickr',
|
||||
'tumblr',
|
||||
'xing',
|
||||
'github',
|
||||
'stackoverflow',
|
||||
'youtube',
|
||||
'dribbble',
|
||||
'instagram',
|
||||
'pinterest',
|
||||
'vk',
|
||||
'yahoo',
|
||||
'behance',
|
||||
'reddit',
|
||||
'vimeo'
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Dropdowns</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
|
||||
|
||||
<h4 class="mt-4">Single button</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/dropdown.html#single-button">
|
||||
<CDropdown color="secondary">
|
||||
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/dropdown.html#single-button">
|
||||
<CDropdown color="secondary" togglerText="Dropdown button">
|
||||
<CDropdownToggle component="a" color="primary">Dropdown Button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<Example href="components/dropdown.html#single-button">
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
|
||||
<CDropdown :color="item" :togglerText="item" variant="btn-group">
|
||||
<CDropdownToggle :color="item">{{item}}</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Split button</h4>
|
||||
<Example href="components/dropdown.html#split-button">
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
|
||||
<CDropdown :color="item" :togglerText="item" variant="btn-group">
|
||||
<CButton :color="item">{{ item }}</CButton>
|
||||
<CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Sizing</h4>
|
||||
<Example href="components/dropdown.html#sizing">
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="secondary" size="lg">Large button</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">
|
||||
<CButton color="secondary" size="lg">Large split button</CButton>
|
||||
<CDropdownToggle color="secondary" size="lg" split>Large button</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="secondary" size="sm">Small button</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">
|
||||
<CButton color="secondary" size="sm">Small split button</CButton>
|
||||
<CDropdownToggle color="secondary" size="sm" split>Small button</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>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Dark dropdowns</h4>
|
||||
<Example href="components/dropdown.html#dark-dropdowns">
|
||||
<CDropdown color="secondary" dark>
|
||||
<CDropdownToggle color="primary">Dropdown Button</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>
|
||||
</Example>
|
||||
<p>In navbar:</p>
|
||||
<Example href="components/dropdown.html#dark-dropdowns">
|
||||
<CNavbar expand="lg" colorScheme="dark" class="bg-dark">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
||||
<CNavbarNav>
|
||||
<CDropdown dark variant="nav-item">
|
||||
<CDropdownToggle color="primary">Dropdown Button</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>
|
||||
</CNavbarNav>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Directions</h4>
|
||||
<Example href="components/dropdown.html#directions">
|
||||
<CDropdown color="secondary" direction="dropup">
|
||||
<CDropdownToggle color="secondary">Dropup</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 color="secondary" direction="dropup">
|
||||
<CButton color="secondary">Split dropup</CButton>
|
||||
<CDropdownToggle color="secondary" split/>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#directions">
|
||||
<CDropdown color="secondary" direction="dropend">
|
||||
<CDropdownToggle color="secondary">Dropend</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 color="secondary" direction="dropend">
|
||||
<CButton color="secondary">Split dropend</CButton>
|
||||
<CDropdownToggle color="secondary" split/>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#directions">
|
||||
<CDropdown color="secondary" direction="dropstart">
|
||||
<CDropdownToggle color="secondary">Dropstart</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>
|
||||
<CDropdown color="secondary" direction="dropstart">
|
||||
<CDropdownToggle color="secondary" split/>
|
||||
<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="secondary">Split dropstart</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Responsive alignment</h4>
|
||||
<Example href="components/dropdown.html#responsive-alignment">
|
||||
<CDropdown color="secondary" :alignment="{ 'lg': 'end' }">
|
||||
<CDropdownToggle color="secondary">Left-aligned but right aligned when large screen</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>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#responsive-alignment">
|
||||
<CDropdown color="secondary" :alignment="{ 'xs': 'end', 'lg': 'start' }">
|
||||
<CDropdownToggle color="secondary">Right-aligned but left aligned when large screen</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>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Dropdown menu content examples</h4>
|
||||
<Example href="components/dropdown.html#menu-content">
|
||||
<div class="border rounded py-2">
|
||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
</div>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#menu-content">
|
||||
<div class="border rounded py-2">
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</div>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#menu-content">
|
||||
<div class="border rounded p-4 text-muted" style="max-width: 200px">
|
||||
<p>
|
||||
Some example text that's free-flowing within the dropdown menu.
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
And this is more example text.
|
||||
</p>
|
||||
</div>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#menu-content">
|
||||
<div class="border rounded py-2">
|
||||
<CForm class="px-4 py-4">
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="exampleDropdownFormEmail1">Email address</CFormLabel>
|
||||
<CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="exampleDropdownFormPassword1">Password</CFormLabel>
|
||||
<CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormCheck id="dropdownCheck" label="Remember me"/>
|
||||
</div>
|
||||
<CButton type="submit">Sign in</CButton>
|
||||
</CForm>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">New around here? Sign up</CDropdownItem>
|
||||
<CDropdownItem href="#">Forgot password?</CDropdownItem>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonDropdowns",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Groups</strong>
|
||||
</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>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonGroups",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/button.html#examples">
|
||||
|
||||
<template v-for="(shape) in [null, 'rounded-pill', 'rounded-0', 'rounded-circle']">
|
||||
<h4 class="mt-4">Shape {{ shape === null ? 'standard' : shape === 'rounded-0' ? ' square' : shape }}:</h4>
|
||||
<CRow>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard disabled</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" disabled class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline disabled</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost disabled</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard disabled size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline disabled size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost disabled size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<CRow>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard disabled size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline disabled size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost disabled size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Block buttons</h4>
|
||||
|
||||
<Example href="components/button.html#block-buttons">
|
||||
<div class="d-grid gap-2">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="d-grid gap-2 d-md-block">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="d-grid gap-2 col-6 mx-auto">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<CButton color="primary" class="me-md-2">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Buttons",
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user