refactor: update examples
This commit is contained in:
Łukasz Holeczek
+438
-168
@@ -1,177 +1,447 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCol :xs="12">
|
||||
<DocsCallout name="Button" href="components/buttons" />
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Buttons</strong>
|
||||
<strong>Vue Button</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>
|
||||
<p class="text-medium-emphasis small">
|
||||
CoreUI includes a bunch of predefined buttons components, each
|
||||
serving its own semantic purpose. Buttons show what action will
|
||||
happen when the user clicks or touches it. CoreUI buttons are used
|
||||
to initialize operations, both in the background or foreground of an
|
||||
experience.
|
||||
</p>
|
||||
<Example href="components/buttons">
|
||||
<template
|
||||
v-for="state in ['normal', 'active', 'disabled']"
|
||||
:key="state"
|
||||
>
|
||||
<CRow class="align-items-center mb-3">
|
||||
<CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
|
||||
state.charAt(0).toUpperCase() + state.slice(1)
|
||||
}}</CCol>
|
||||
<CCol xs>
|
||||
<template
|
||||
v-for="color in [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
]"
|
||||
:key="color"
|
||||
>
|
||||
<CButton
|
||||
:color="color"
|
||||
:active="state === 'active' ? true : false"
|
||||
:disabled="state === 'disabled' ? true : false"
|
||||
>
|
||||
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
|
||||
</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button</strong> <small>with icons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
You can combine button with our
|
||||
<a href="https://icons.coreui.io/">CoreUI Icons</a>.
|
||||
</p>
|
||||
<Example href="components/buttons">
|
||||
<template
|
||||
v-for="state in ['normal', 'active', 'disabled']"
|
||||
:key="state"
|
||||
>
|
||||
<CRow class="align-items-center mb-3">
|
||||
<CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
|
||||
state.charAt(0).toUpperCase() + state.slice(1)
|
||||
}}</CCol>
|
||||
|
||||
<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>
|
||||
<CCol xs>
|
||||
<template
|
||||
v-for="color in [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
]"
|
||||
:key="color"
|
||||
>
|
||||
<CButton
|
||||
:color="color"
|
||||
:active="state === 'active' ? true : false"
|
||||
:disabled="state === 'disabled' ? true : false"
|
||||
>
|
||||
<CIcon icon="cil-bell" class="me-2" />
|
||||
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
|
||||
</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button</strong> <small>Button components</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
The <code><CButton></code> component are designed for
|
||||
<code><button></code> , <code><a></code> or
|
||||
<code><input></code>
|
||||
elements (though some browsers may apply a slightly different
|
||||
rendering).
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
If you're using <code><CButton></code> component as
|
||||
<code><a></code> elements that are used to trigger
|
||||
functionality ex. collapsing content, these links should be given a
|
||||
<code>role="button"</code> to adequately communicate their
|
||||
meaning to assistive technologies such as screen readers.
|
||||
</p>
|
||||
<Example href="components/buttons#button-components">
|
||||
<CButton component="a" color="primary" href="#" role="button">
|
||||
Link
|
||||
</CButton>
|
||||
<CButton type="submit" color="primary"> Button </CButton>
|
||||
<CButton
|
||||
component="input"
|
||||
type="button"
|
||||
color="primary"
|
||||
value="Input"
|
||||
/>
|
||||
<CButton
|
||||
component="input"
|
||||
type="submit"
|
||||
color="primary"
|
||||
value="Submit"
|
||||
/>
|
||||
<CButton
|
||||
component="input"
|
||||
type="reset"
|
||||
color="primary"
|
||||
value="Reset"
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button</strong> <small>outline</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
If you need a button, but without the strong background colors. Set
|
||||
<code>variant="outline"</code> prop to remove all background
|
||||
colors.
|
||||
</p>
|
||||
<Example href="components/buttons#outline-buttons">
|
||||
<template
|
||||
v-for="state in ['normal', 'active', 'disabled']"
|
||||
:key="state"
|
||||
>
|
||||
<CRow class="align-items-center mb-3">
|
||||
<CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
|
||||
state.charAt(0).toUpperCase() + state.slice(1)
|
||||
}}</CCol>
|
||||
|
||||
<CCol xs>
|
||||
<template
|
||||
v-for="color in [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
]"
|
||||
:key="color"
|
||||
>
|
||||
<CButton
|
||||
:color="color"
|
||||
:active="state === 'active' ? true : false"
|
||||
:disabled="state === 'disabled' ? true : false"
|
||||
variant="outline"
|
||||
>
|
||||
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
|
||||
</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button</strong> <small>ghost</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
If you need a ghost variant of button, set
|
||||
<code>variant="ghost"</code> prop to remove all background
|
||||
colors.
|
||||
</p>
|
||||
<Example href="components/buttons#ghost-buttons">
|
||||
<template
|
||||
v-for="state in ['normal', 'active', 'disabled']"
|
||||
:key="state"
|
||||
>
|
||||
<CRow class="align-items-center mb-3">
|
||||
<CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
|
||||
state.charAt(0).toUpperCase() + state.slice(1)
|
||||
}}</CCol>
|
||||
<CCol xs>
|
||||
<template
|
||||
v-for="color in [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
]"
|
||||
:key="color"
|
||||
>
|
||||
<CButton
|
||||
:color="color"
|
||||
:active="state === 'active' ? true : false"
|
||||
:disabled="state === 'disabled' ? true : false"
|
||||
variant="ghost"
|
||||
>
|
||||
<CIcon icon="{cilBell}" class="me-2" />
|
||||
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
|
||||
</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button</strong> <small>Sizes</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Larger or smaller buttons? Add <code>size="lg"</code> or
|
||||
<code>size="sm"</code> for additional sizes.
|
||||
</p>
|
||||
<Example href="components/buttons#sizes">
|
||||
<CButton color="primary" size="lg"> Large button </CButton>
|
||||
<CButton color="secondary" size="lg"> Large button </CButton>
|
||||
</Example>
|
||||
<Example href="components/buttons#sizes">
|
||||
<CButton color="primary" size="sm"> Small button </CButton>
|
||||
<CButton color="secondary" size="sm"> Small button </CButton>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button</strong> <small>Pill</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/buttons#pill-buttons">
|
||||
<template
|
||||
v-for="color in [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
]"
|
||||
:key="color"
|
||||
>
|
||||
<CButton
|
||||
:color="color"
|
||||
:active="state === 'active' ? true : false"
|
||||
:disabled="state === 'disabled' ? true : false"
|
||||
shape="rounded-pill"
|
||||
>
|
||||
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
|
||||
</CButton>
|
||||
</template>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button</strong> <small>Square</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/buttons#square">
|
||||
<template
|
||||
v-for="color in [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
]"
|
||||
:key="color"
|
||||
>
|
||||
<CButton
|
||||
:color="color"
|
||||
:active="state === 'active' ? true : false"
|
||||
:disabled="state === 'disabled' ? true : false"
|
||||
shape="rounded-0"
|
||||
>
|
||||
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
|
||||
</CButton>
|
||||
</template>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button</strong> <small>Disabled state</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> boolean prop to any
|
||||
<code><CButton></code>
|
||||
component to make buttons look inactive. Disabled button has
|
||||
<code>pointer-events: none</code> applied to, disabling hover and
|
||||
active states from triggering.
|
||||
</p>
|
||||
<Example href="components/buttons#disabled-state">
|
||||
<CButton color="primary" size="lg" disabled>
|
||||
Primary button
|
||||
</CButton>
|
||||
<CButton color="secondary" size="lg" disabled> Button </CButton>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
Disabled buttons using the <code><a></code> component act a
|
||||
little different:
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
<code><a></code>s don'tsupport the
|
||||
<code>disabled</code> attribute, so CoreUI has to add
|
||||
<code>.disabled</code> class to make buttons look inactive. CoreUI
|
||||
also has to add to the disabled button component
|
||||
<code>aria-disabled="true"</code> attribute to show the
|
||||
state of the component to assistive technologies.
|
||||
</p>
|
||||
<Example href="components/buttons#disabled-state">
|
||||
<CButton component="a" href="#" color="primary" size="lg" disabled>
|
||||
Primary link
|
||||
</CButton>
|
||||
<CButton
|
||||
component="a"
|
||||
href="#"
|
||||
color="secondary"
|
||||
size="lg"
|
||||
disabled
|
||||
>
|
||||
Link
|
||||
</CButton>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Button</strong> <small>Block buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Create buttons that span the full width of a parent—by using
|
||||
utilities.
|
||||
</p>
|
||||
<Example href="components/buttons#block-buttons">
|
||||
<div class="d-grid gap-2">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
Here we create a responsive variation, starting with vertically
|
||||
stacked buttons until the <code>md</code> breakpoint, where
|
||||
<code>.d-md-block</code> replaces the <code>.d-grid</code> class,
|
||||
thus nullifying the <code>gap-2</code> utility. Resize your browser
|
||||
to see them change.
|
||||
</p>
|
||||
<Example href="components/buttons#block-buttons">
|
||||
<div class="d-grid gap-2 d-md-block">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
You can adjust the width of your block buttons with grid column
|
||||
width classes. For example, for a half-width "block button",
|
||||
use <code>.col-6</code>. Center it horizontally with
|
||||
<code>.mx-auto</code>, too.
|
||||
</p>
|
||||
<Example href="components/buttons#block-buttons">
|
||||
<div class="d-grid gap-2 col-6 mx-auto">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
Additional utilities can be used to adjust the alignment of buttons
|
||||
when horizontal. Here we've taken our previous responsive
|
||||
example and added some flex utilities and a margin utility on the
|
||||
button to right align the buttons when they're no longer
|
||||
stacked.
|
||||
</p>
|
||||
<Example href="components/buttons#block-buttons">
|
||||
<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>
|
||||
@@ -180,6 +450,6 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Buttons",
|
||||
};
|
||||
</script>
|
||||
name: 'Buttons',
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user