refactor: update examples
This commit is contained in:
Łukasz Holeczek
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<DocsCallout name="Dropdown" href="components/dropdown" />
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Single button</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Here's how you can put them to work with either
|
||||
<code><button></code>
|
||||
elements:
|
||||
</p>
|
||||
<Example href="components/dropdown#single-button">
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="secondary"
|
||||
>Dropdown button</CDropdownToggle
|
||||
>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
The best part is you can do this with any button variant, too:
|
||||
</p>
|
||||
<Example href="components/dropdown#single-button">
|
||||
<template
|
||||
v-for="color in [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
]"
|
||||
:key="color"
|
||||
>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle :color="color">{{ color }}</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>
|
||||
</template>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Split button</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Similarly, create split button dropdowns with virtually the same
|
||||
markup as single button dropdowns, but with the addition of boolean
|
||||
prop <code>split</code> for proper spacing around the dropdown
|
||||
caret.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
We use this extra class to reduce the horizontal
|
||||
<code>padding</code> on either side of the caret by 25% and remove
|
||||
the <code>margin-left</code> that's attached for normal button
|
||||
dropdowns. Those additional changes hold the caret centered in the
|
||||
split button and implement a more properly sized hit area next to
|
||||
the main button.
|
||||
</p>
|
||||
<Example href="components/dropdown#split-button">
|
||||
<template
|
||||
v-for="color in [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
]"
|
||||
:key="color"
|
||||
>
|
||||
<CDropdown variant="btn-group">
|
||||
<CButton :color="color">{{ color }}</CButton>
|
||||
<CDropdownToggle :color="color" split>{{
|
||||
color
|
||||
}}</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>
|
||||
</template>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Button dropdowns work with buttons of all sizes, including default
|
||||
and split dropdown buttons.
|
||||
</p>
|
||||
<Example href="components/dropdown#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 />
|
||||
<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#sizing">
|
||||
<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 />
|
||||
<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>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Single button</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Opt into darker dropdowns to match a dark navbar or custom style by
|
||||
set
|
||||
<code>dark</code> property. No changes are required to the dropdown
|
||||
items.
|
||||
</p>
|
||||
<Example href="components/dropdown#dark-dropdowns">
|
||||
<CDropdown dark>
|
||||
<CDropdownToggle color="secondary"
|
||||
>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 class="text-medium-emphasis small">
|
||||
And putting it to use in a navbar:
|
||||
</p>
|
||||
<Example href="components/dropdown#dark-dropdowns">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="https://coreui.io/react/">
|
||||
Navbar
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-coreui-toggle="collapse"
|
||||
data-coreui-target="#navbarNavDarkDropdown"
|
||||
aria-controls="navbarNavDarkDropdown"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div
|
||||
class="collapse navbar-collapse"
|
||||
id="navbarNavDarkDropdown"
|
||||
>
|
||||
<ul class="navbar-nav">
|
||||
<CDropdown dark component="li" variant="nav-item">
|
||||
<CDropdownToggle>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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Dropup</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Trigger dropdown menus above elements by adding
|
||||
<code>direction="dropup"</code> to the
|
||||
<code><CDropdown></code>
|
||||
component.
|
||||
</p>
|
||||
<Example href="components/dropdown#dropup">
|
||||
<CDropdown variant="btn-group" direction="dropup">
|
||||
<CDropdownToggle color="secondary">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" direction="dropup">
|
||||
<CButton color="secondary">Small split button</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>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Dropright</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Trigger dropdown menus at the right of the elements by adding
|
||||
<code>direction="dropend"</code> to the
|
||||
<code><CDropdown></code>
|
||||
component.
|
||||
</p>
|
||||
<Example href="components/dropdown#dropright">
|
||||
<CDropdown variant="btn-group" direction="dropend">
|
||||
<CDropdownToggle color="secondary">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" direction="dropend">
|
||||
<CButton color="secondary">Small split button</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>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Dropleft</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Trigger dropdown menus at the left of the elements by adding
|
||||
<code>direction="dropstart"</code> to the
|
||||
<code><CDropdown></code>
|
||||
component.
|
||||
</p>
|
||||
<Example href="components/dropdown#dropleft">
|
||||
<CButtonGroup>
|
||||
<CDropdown variant="btn-group" 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">Small split button</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Dropdowns',
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user