762 lines
27 KiB
Vue
762 lines
27 KiB
Vue
<script>
|
||
import Layout from "../../layouts/main";
|
||
import PageHeader from "../../components/page-header";
|
||
|
||
/**
|
||
* Buttons component
|
||
*/
|
||
export default {
|
||
components: { Layout, PageHeader },
|
||
data() {
|
||
return {
|
||
title: "Buttons",
|
||
items: [
|
||
{
|
||
text: "UI Elements",
|
||
href: "/"
|
||
},
|
||
{
|
||
text: "Buttons",
|
||
active: true
|
||
}
|
||
],
|
||
selected: "radio1",
|
||
options: [
|
||
{
|
||
text: "Active",
|
||
value: "radio1",
|
||
},
|
||
{
|
||
text: "Radio",
|
||
value: "radio2",
|
||
},
|
||
{
|
||
text: "Radio",
|
||
value: "radio3",
|
||
},
|
||
],
|
||
selectedCheck: [], // Must be an array reference!
|
||
optionsCheck: [
|
||
{
|
||
text: "Checked-1",
|
||
value: "checked1",
|
||
},
|
||
{
|
||
text: "Checked-2",
|
||
value: "checked2",
|
||
},
|
||
{
|
||
text: "Checked-3",
|
||
value: "checked3",
|
||
},
|
||
],
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Layout>
|
||
<PageHeader :title="title" :items="items" />
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Default buttons</h4>
|
||
<p class="card-title-desc">
|
||
Bootstrap includes six predefined button styles, each serving its
|
||
own semantic purpose.
|
||
</p>
|
||
<div class="button-items">
|
||
<b-button variant="primary">Primary</b-button>
|
||
<b-button variant="secondary">Secondary</b-button>
|
||
<b-button variant="success">Success</b-button>
|
||
<b-button variant="info">Info</b-button>
|
||
<b-button variant="warning">Warning</b-button>
|
||
<b-button variant="danger">Danger</b-button>
|
||
<b-button variant="dark">Dark</b-button>
|
||
<b-button variant="link">Link</b-button>
|
||
<b-button variant="light">Light</b-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Outline buttons</h4>
|
||
<p class="card-title-desc">
|
||
Replace the default modifier classes with the
|
||
<code class="highlighter-rouge">outline-*</code> ones to remove
|
||
all background images and colors on any button.
|
||
</p>
|
||
<div class="button-items">
|
||
<b-button variant="outline-primary">Primary</b-button>
|
||
<b-button variant="outline-secondary">Secondary</b-button>
|
||
<b-button variant="outline-success">Success</b-button>
|
||
<b-button variant="outline-info">Info</b-button>
|
||
<b-button variant="outline-warning">Warning</b-button>
|
||
<b-button variant="outline-danger">Danger</b-button>
|
||
<b-button variant="outline-dark">Dark</b-button>
|
||
<b-button variant="outline-light">Light</b-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Rounded buttons</h4>
|
||
<p class="card-title-desc">
|
||
Use
|
||
<code>pill</code> for button round border.
|
||
</p>
|
||
<div class="button-items">
|
||
<b-button pill variant="primary">Primary</b-button>
|
||
<b-button pill variant="secondary">Secondary</b-button>
|
||
<b-button pill variant="success">Success</b-button>
|
||
<b-button pill variant="info">Info</b-button>
|
||
<b-button pill variant="warning">Warning</b-button>
|
||
<b-button pill variant="danger">Danger</b-button>
|
||
<b-button pill variant="dark">Dark</b-button>
|
||
<b-button pill variant="link">Link</b-button>
|
||
<b-button pill variant="light">Light</b-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Buttons with icon</h4>
|
||
<p class="card-title-desc">Add icon in button.</p>
|
||
|
||
<div class="button-items">
|
||
<b-button variant="primary">
|
||
<i class="bx bx-smile font-size-16 align-middle me-2"></i>
|
||
Primary
|
||
</b-button>
|
||
<b-button variant="success">
|
||
<i
|
||
class="bx bx-check-double font-size-16 align-middle me-2"
|
||
></i>
|
||
Success
|
||
</b-button>
|
||
<b-button variant="warning">
|
||
<i class="bx bx-error font-size-16 align-middle me-2"></i>
|
||
Warning
|
||
</b-button>
|
||
<b-button variant="danger">
|
||
<i class="bx bx-block font-size-16 align-middle me-2"></i>
|
||
Danger
|
||
</b-button>
|
||
<b-button variant="dark">
|
||
<i
|
||
class="bx bx-loader bx-spin font-size-16 align-middle me-2"
|
||
></i>
|
||
Loading
|
||
</b-button>
|
||
<b-button variant="light">
|
||
<i
|
||
class="bx bx-hourglass bx-spin font-size-16 align-middle me-2"
|
||
></i>
|
||
Loading
|
||
</b-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Snip Buttons</h4>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-4">
|
||
<div class="mt-4">
|
||
<h5 class="font-size-15 mb-3">Example 1</h5>
|
||
|
||
<div>
|
||
<div class="btn-group btn-group-example mb-3" role="group">
|
||
<b-button variant="outline-primary" class="w-sm"
|
||
>Left</b-button
|
||
>
|
||
<b-button variant="outline-primary" class="w-sm"
|
||
>Middle</b-button
|
||
>
|
||
<b-button variant="outline-primary" class="w-sm"
|
||
>Right</b-button
|
||
>
|
||
</div>
|
||
|
||
<div>
|
||
<div
|
||
class="btn-group btn-group-example mb-3"
|
||
role="group"
|
||
>
|
||
<b-button variant="primary" class="w-xs">
|
||
<i class="mdi mdi-thumb-up"></i>
|
||
</b-button>
|
||
<b-button variant="danger" class="w-xs">
|
||
<i class="mdi mdi-thumb-down"></i>
|
||
</b-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="btn-group btn-group-example" role="group">
|
||
<b-button variant="outline-secondary" class="w-xs">
|
||
<i class="bx bx-menu-alt-right"></i>
|
||
</b-button>
|
||
<b-button variant="outline-secondary" class="w-xs">
|
||
<i class="bx bx-menu"></i>
|
||
</b-button>
|
||
<b-button variant="outline-secondary" class="w-xs">
|
||
<i class="bx bx-menu-alt-left"></i>
|
||
</b-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<div class="mt-4">
|
||
<h5 class="font-size-15 mb-3">Example 2</h5>
|
||
|
||
<div class="button-items">
|
||
<b-button variant="primary" class="btn-label">
|
||
<i class="bx bx-smile label-icon"></i> Primary
|
||
</b-button>
|
||
<b-button variant="success" class="btn-label">
|
||
<i class="bx bx-check-double label-icon"></i> Success
|
||
</b-button>
|
||
<b-button variant="warning" class="btn-label">
|
||
<i class="bx bx-error label-icon"></i> Warning
|
||
</b-button>
|
||
<b-button variant="danger" class="btn-label">
|
||
<i class="bx bx-block label-icon"></i> Danger
|
||
</b-button>
|
||
<b-button variant="dark" class="btn-label">
|
||
<i class="bx bx-loader label-icon"></i> Dark
|
||
</b-button>
|
||
<b-button variant="light" class="btn-label">
|
||
<i class="bx bx-hourglass label-icon"></i> Light
|
||
</b-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<div class="mt-4">
|
||
<h5 class="font-size-15 mb-3">Example 3</h5>
|
||
|
||
<div class="button-items">
|
||
<b-button variant="primary" class="w-sm">
|
||
<i class="mdi mdi-download d-block font-size-16"></i>
|
||
Download
|
||
</b-button>
|
||
<b-button variant="light" class="w-sm">
|
||
<i class="mdi mdi-upload d-block font-size-16"></i> Upload
|
||
</b-button>
|
||
<b-button variant="success" class="w-sm">
|
||
<i class="mdi mdi-pencil d-block font-size-16"></i> Edit
|
||
</b-button>
|
||
<b-button variant="danger" class="w-sm">
|
||
<i class="mdi mdi-trash-can d-block font-size-16"></i>
|
||
Delete
|
||
</b-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Buttons Sizes</h4>
|
||
<p class="card-title-desc">
|
||
Add
|
||
<code>lg</code> or <code>sm</code> for additional sizes.
|
||
</p>
|
||
|
||
<div class="button-items">
|
||
<b-button size="lg" variant="primary">Large button</b-button>
|
||
<b-button size="lg">Large button</b-button>
|
||
<b-button size="sm" variant="primary">Small button</b-button>
|
||
<b-button size="sm">Small button</b-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Buttons width</h4>
|
||
<p class="card-title-desc">
|
||
Add
|
||
<code>.w-xs</code>, <code>.w-sm</code>, <code>.w-md</code> and
|
||
<code>.w-lg</code> class for additional buttons width.
|
||
</p>
|
||
|
||
<div class="button-items">
|
||
<b-button variant="primary" class="w-xs">Xs</b-button>
|
||
<b-button variant="danger" class="w-sm ml-1">Small</b-button>
|
||
<b-button variant="warning" class="w-md ml-1">Medium</b-button>
|
||
<b-button variant="success" class="w-lg">Large</b-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Button tags</h4>
|
||
<p class="card-title-desc">
|
||
The
|
||
<code class="highlighter-rouge">.btn</code>
|
||
classes are designed to be used with the
|
||
<code class="highlighter-rouge"><button></code> element.
|
||
However, you can also use these classes on
|
||
<code class="highlighter-rouge"><a></code> or
|
||
<code class="highlighter-rouge"><input></code> elements
|
||
(though some browsers may apply a slightly different rendering).
|
||
</p>
|
||
|
||
<div class="button-items">
|
||
<a
|
||
class="btn btn-primary"
|
||
href="javascript: void(0);"
|
||
role="button"
|
||
>Link</a
|
||
>
|
||
<button class="btn btn-success" type="submit">Button</button>
|
||
<input class="btn btn-info" type="button" value="Input" />
|
||
<input class="btn btn-danger" type="submit" value="Submit" />
|
||
<input class="btn btn-warning" type="reset" value="Reset" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Toggle states</h4>
|
||
<p class="card-title-desc">
|
||
Add
|
||
<code class="highlighter-rouge">data-toggle="button"</code>
|
||
to toggle a button’s
|
||
<code class="highlighter-rouge">active</code>
|
||
state. If you’re pre-toggling a button, you must manually add the
|
||
<code class="highlighter-rouge">.active</code> class
|
||
<strong>and</strong>
|
||
<code class="highlighter-rouge">aria-pressed="true"</code> to the
|
||
<code class="highlighter-rouge"><button></code>.
|
||
</p>
|
||
|
||
<div class="button-items">
|
||
<button
|
||
type="button"
|
||
class="btn btn-primary"
|
||
data-toggle="button"
|
||
aria-pressed="false"
|
||
>
|
||
Single toggle
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Block Buttons</h4>
|
||
<p class="card-title-desc">
|
||
Create block level buttons—those that span the full width of a
|
||
parent—by adding
|
||
<code class="highlighter-rouge">.btn-block</code>.
|
||
</p>
|
||
|
||
<div class="d-grid gap-2">
|
||
<b-button block variant="primary" size="lg"
|
||
>Block Level Button</b-button
|
||
>
|
||
<b-button block size="sm">Block Level Button</b-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Checkbox & Radio Buttons</h4>
|
||
<p class="card-title-desc">
|
||
Bootstrap’s
|
||
<code class="highlighter-rouge">.button</code> styles can be
|
||
applied to other elements, such as
|
||
<code class="highlighter-rouge"><label></code>s, to provide
|
||
checkbox or radio style button toggling. Add
|
||
<code class="highlighter-rouge">data-toggle="buttons"</code> to a
|
||
<code class="highlighter-rouge">.btn-group</code> containing those
|
||
modified buttons to enable toggling in their respective styles.
|
||
</p>
|
||
|
||
<div class="row">
|
||
<div class="col-xl-6">
|
||
<b-form-checkbox-group
|
||
v-model="selectedCheck"
|
||
:options="optionsCheck"
|
||
name="buttons-1"
|
||
class="check-group"
|
||
buttons
|
||
button-variant="primary"
|
||
></b-form-checkbox-group>
|
||
</div>
|
||
<div class="col-xl-6">
|
||
<b-form-radio-group
|
||
id="btn-radios-1"
|
||
class="check-group"
|
||
v-model="selected"
|
||
:options="options"
|
||
buttons
|
||
name="radios-btn-default"
|
||
></b-form-radio-group>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Button group</h4>
|
||
<p class="card-title-desc">
|
||
Wrap a series of buttons with
|
||
<code class="highlighter-rouge">.btn</code> in
|
||
<code class="highlighter-rouge">.btn-group</code>.
|
||
</p>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="d-flex flex-wrap gap-2">
|
||
<b-button-group>
|
||
<b-button variant="primary">Left</b-button>
|
||
<b-button variant="primary">Middle</b-button>
|
||
<b-button variant="primary">Right</b-button>
|
||
</b-button-group>
|
||
|
||
<b-button-group>
|
||
<b-button variant="outline-primary">Left</b-button>
|
||
<b-button variant="outline-primary">Middle</b-button>
|
||
<b-button variant="outline-primary">Right</b-button>
|
||
</b-button-group>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="d-flex flex-wrap gap-3 mt-4 mt-md-0">
|
||
<b-button-group class="mt-4 mt-md-0">
|
||
<b-button>
|
||
<i class="bx bx-menu-alt-right"></i>
|
||
</b-button>
|
||
<b-button>
|
||
<i class="bx bx-menu"></i>
|
||
</b-button>
|
||
<b-button>
|
||
<i class="bx bx-menu-alt-left"></i>
|
||
</b-button>
|
||
</b-button-group>
|
||
|
||
<b-button-group class="mt-4 mt-md-0">
|
||
<b-button variant="outline-primary">
|
||
<i class="bx bx-menu-alt-right"></i>
|
||
</b-button>
|
||
<b-button variant="outline-primary">
|
||
<i class="bx bx-menu"></i>
|
||
</b-button>
|
||
<b-button variant="outline-primary">
|
||
<i class="bx bx-menu-alt-left"></i>
|
||
</b-button>
|
||
</b-button-group>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Button toolbar</h4>
|
||
<p class="card-title-desc">
|
||
Combine sets of button groups into button toolbars for more
|
||
complex components. Use utility classes as needed to space out
|
||
groups, buttons, and more.
|
||
</p>
|
||
<div class="d-flex flex-wrap gap-4">
|
||
<div
|
||
class="btn-toolbar"
|
||
role="toolbar"
|
||
aria-label="Toolbar with button groups"
|
||
>
|
||
<div
|
||
class="btn-group me-2"
|
||
role="group"
|
||
aria-label="First group"
|
||
>
|
||
<button type="button" class="btn btn-secondary">1</button>
|
||
<button type="button" class="btn btn-secondary">2</button>
|
||
<button type="button" class="btn btn-secondary">3</button>
|
||
<button type="button" class="btn btn-secondary">4</button>
|
||
</div>
|
||
<div
|
||
class="btn-group me-2"
|
||
role="group"
|
||
aria-label="Second group"
|
||
>
|
||
<button type="button" class="btn btn-secondary">5</button>
|
||
<button type="button" class="btn btn-secondary">6</button>
|
||
<button type="button" class="btn btn-secondary">7</button>
|
||
</div>
|
||
<div class="btn-group" role="group" aria-label="Third group">
|
||
<button type="button" class="btn btn-secondary">8</button>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="btn-toolbar"
|
||
role="toolbar"
|
||
aria-label="Toolbar with button groups"
|
||
>
|
||
<div
|
||
class="btn-group me-2"
|
||
role="group"
|
||
aria-label="First group"
|
||
>
|
||
<button type="button" class="btn btn-outline-secondary">
|
||
1
|
||
</button>
|
||
<button type="button" class="btn btn-outline-secondary">
|
||
2
|
||
</button>
|
||
<button type="button" class="btn btn-outline-secondary">
|
||
3
|
||
</button>
|
||
<button type="button" class="btn btn-outline-secondary">
|
||
4
|
||
</button>
|
||
</div>
|
||
<div
|
||
class="btn-group me-2"
|
||
role="group"
|
||
aria-label="Second group"
|
||
>
|
||
<button type="button" class="btn btn-outline-secondary">
|
||
5
|
||
</button>
|
||
<button type="button" class="btn btn-outline-secondary">
|
||
6
|
||
</button>
|
||
<button type="button" class="btn btn-outline-secondary">
|
||
7
|
||
</button>
|
||
</div>
|
||
<div class="btn-group" role="group" aria-label="Third group">
|
||
<button type="button" class="btn btn-outline-secondary">
|
||
8
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Sizing</h4>
|
||
<p class="card-title-desc">
|
||
Instead of applying button sizing classes to every button in a
|
||
group, just add
|
||
<code class="highlighter-rouge">.btn-group-*</code> to each
|
||
<code class="highlighter-rouge">.btn-group</code>, including each
|
||
one when nesting multiple groups.
|
||
</p>
|
||
<div class="d-flex flex-wrap gap-3">
|
||
<div
|
||
class="btn-group btn-group-lg"
|
||
role="group"
|
||
aria-label="Basic example"
|
||
>
|
||
<button type="button" class="btn btn-primary">Left</button>
|
||
<button type="button" class="btn btn-primary">Middle</button>
|
||
<button type="button" class="btn btn-primary">Right</button>
|
||
</div>
|
||
<div
|
||
class="btn-group btn-group-lg"
|
||
role="group"
|
||
aria-label="Basic example"
|
||
>
|
||
<button type="button" class="btn btn-outline-primary">
|
||
Left
|
||
</button>
|
||
<button type="button" class="btn btn-outline-primary">
|
||
Middle
|
||
</button>
|
||
<button type="button" class="btn btn-outline-primary">
|
||
Right
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<br />
|
||
<div class="d-flex flex-wrap gap-3">
|
||
<div
|
||
class="btn-group"
|
||
role="group"
|
||
aria-label="Basic example"
|
||
>
|
||
<button type="button" class="btn btn-secondary">Left</button>
|
||
<button type="button" class="btn btn-secondary">Middle</button>
|
||
<button type="button" class="btn btn-secondary">Right</button>
|
||
</div>
|
||
<div class="btn-group" role="group" aria-label="Basic example">
|
||
<button type="button" class="btn btn-outline-secondary">
|
||
Left
|
||
</button>
|
||
<button type="button" class="btn btn-outline-secondary">
|
||
Middle
|
||
</button>
|
||
<button type="button" class="btn btn-outline-secondary">
|
||
Right
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<br />
|
||
<div class="d-flex flex-wrap gap-3">
|
||
<div
|
||
class="btn-group btn-group-sm"
|
||
role="group"
|
||
aria-label="Basic example"
|
||
>
|
||
<button type="button" class="btn btn-danger">Left</button>
|
||
<button type="button" class="btn btn-danger">Middle</button>
|
||
<button type="button" class="btn btn-danger">Right</button>
|
||
</div>
|
||
<div
|
||
class="btn-group btn-group-sm"
|
||
role="group"
|
||
aria-label="Basic example"
|
||
>
|
||
<button type="button" class="btn btn-outline-danger">
|
||
Left
|
||
</button>
|
||
<button type="button" class="btn btn-outline-danger">
|
||
Middle
|
||
</button>
|
||
<button type="button" class="btn btn-outline-danger">
|
||
Right
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Vertical variation</h4>
|
||
<p class="card-title-desc">
|
||
Make a set of buttons appear vertically stacked rather than
|
||
horizontally. Split button dropdowns are not supported here.
|
||
</p>
|
||
<div class="d-flex flex-wrap gap-3 align-items-center">
|
||
<b-button-group vertical>
|
||
<b-button variant="secondary">Button</b-button>
|
||
<b-dropdown variant="secondary">
|
||
<template slot="button-content">
|
||
Dropdown
|
||
<i class="mdi mdi-chevron-down"></i>
|
||
</template>
|
||
<b-dropdown-item>Dropdown Link</b-dropdown-item>
|
||
<b-dropdown-item>Dropdown Link</b-dropdown-item>
|
||
</b-dropdown>
|
||
<b-button variant="secondary">Button</b-button>
|
||
<b-button variant="secondary">Button</b-button>
|
||
</b-button-group>
|
||
|
||
<div
|
||
class="btn-group-vertical"
|
||
role="group"
|
||
aria-label="Vertical radio toggle button group"
|
||
>
|
||
<input
|
||
type="radio"
|
||
class="btn-check"
|
||
name="vbtn-radio"
|
||
id="vbtn-radio1"
|
||
autocomplete="off"
|
||
checked=""
|
||
/>
|
||
<label class="btn btn-outline-danger mb-0" for="vbtn-radio1"
|
||
>Radio 1</label
|
||
>
|
||
<input
|
||
type="radio"
|
||
class="btn-check"
|
||
name="vbtn-radio"
|
||
id="vbtn-radio2"
|
||
autocomplete="off"
|
||
/>
|
||
<label class="btn btn-outline-danger mb-0" for="vbtn-radio2"
|
||
>Radio 2</label
|
||
>
|
||
<input
|
||
type="radio"
|
||
class="btn-check"
|
||
name="vbtn-radio"
|
||
id="vbtn-radio3"
|
||
autocomplete="off"
|
||
/>
|
||
<label class="btn btn-outline-danger mb-0" for="vbtn-radio3"
|
||
>Radio 3</label
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
</Layout>
|
||
</template>
|