<script> import Layout from "../../layouts/main"; import PageHeader from "@/components/page-header"; import appConfig from "@/app.config"; /** * Buttons component */ export default { page: { title: "Buttons", meta: [{ name: "description", content: appConfig.description }] }, components: { Layout, PageHeader }, data() { return { title: "Buttons", items: [ { text: "UI Elements", href: "/" }, { text: "Buttons", active: true } ] }; } }; </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="light">Light</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="secondary">Secondary</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-light">Light</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-secondary">Secondary</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="light">Light</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="secondary">Secondary</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"> Primary <i class="ri-arrow-right-line align-middle ml-2"></i> </b-button> <b-button variant="success"> <i class="ri-check-line align-middle mr-2"></i> Success </b-button> <b-button variant="warning"> <i class="ri-error-warning-line align-middle mr-2"></i> Warning </b-button> <b-button variant="danger"> <i class="ri-close-line align-middle mr-2"></i> Danger </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">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" variant="light">Large button</b-button> <b-button size="sm" variant="primary">Small button</b-button> <b-button size="sm" variant="light">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> <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"> <div class="btn-group btn-group-toggle mt-2 mt-xl-0" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" checked /> Checked-1 </label> <label class="btn btn-primary"> <input type="checkbox" /> Checked-2 </label> <label class="btn btn-primary"> <input type="checkbox" /> Checked-3 </label> </div> </div> <div class="col-xl-6"> <div class="btn-group btn-group-toggle mt-2 mt-xl-0" data-toggle="buttons"> <label class="btn btn-secondary active"> <input id="option1" type="radio" name="options" checked /> Active </label> <label class="btn btn-secondary"> <input id="option2" type="radio" name="options" /> Radio </label> <label class="btn btn-secondary"> <input id="option3" type="radio" name="options" /> Radio </label> </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">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"> <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> </div> <div class="col-md-6"> <b-button-group class="mt-4 mt-md-0"> <b-button variant="light"> <i class="ri-menu-2-line"></i> </b-button> <b-button variant="light"> <i class="ri-menu-5-line"></i> </b-button> <b-button variant="light"> <i class="ri-menu-3-line"></i> </b-button> </b-button-group> </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> <b-button-toolbar> <b-button-group class="mx-1"> <b-button variant="light">1</b-button> <b-button variant="light">2</b-button> <b-button variant="light">3</b-button> <b-button variant="light">4</b-button> </b-button-group> <b-button-group class="mx-1"> <b-button variant="light">5</b-button> <b-button variant="light">6</b-button> <b-button variant="light">7</b-button> </b-button-group> <b-button-group> <b-button variant="light">8</b-button> </b-button-group> </b-button-toolbar> </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> <b-button-group size="lg"> <b-button variant="primary">Left</b-button> <b-button variant="primary">Middle</b-button> <b-button variant="primary">Right</b-button> </b-button-group> <br /> <b-button-group class="mt-2"> <b-button variant="light">Left</b-button> <b-button variant="light">Middle</b-button> <b-button variant="light">Right</b-button> </b-button-group> <br /> <b-button-group class="mt-2" size="sm"> <b-button variant="danger">Left</b-button> <b-button variant="danger">Middle</b-button> <b-button variant="danger">Right</b-button> </b-button-group> </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> <b-button-group vertical> <b-button variant="light">Button</b-button> <b-dropdown variant="light"> <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="light">Button</b-button> <b-button variant="light">Button</b-button> </b-button-group> </div> </div> </div> </div> <!-- end row --> </Layout> </template>