sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor(Buttons): view rearrange

Browse Source
This commit is contained in:
xidedix
2018-05-24 20:38:50 +02:00
parent e2ab902710
commit bfa24d75b1
1 changed files with 668 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/buttons/StandardButtons.vue
+668 -213
View File
@@ -1,225 +1,680 @@
<template>
<div class="animated fadeIn">
<b-card no-body>
<b-card-header>
<strong>Standard buttons</strong>
</b-card-header>
<b-card-body>
<b-row class="align-items-center">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Normal
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="primary">Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="secondary">Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="success">Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="warning">Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="danger">Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="info">Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="light">Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="dark">Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="link">Link</b-button>
</b-col>
</b-row>
<b-row class="align-items-center mt-3">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Active State
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="primary" aria-pressed="true">Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="secondary" aria-pressed="true">Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="success" aria-pressed="true">Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="warning" aria-pressed="true">Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="danger" aria-pressed="true">Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="info" aria-pressed="true">Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="light" aria-pressed="true">Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="dark" aria-pressed="true">Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="link" aria-pressed="true">Link</b-button>
</b-col>
</b-row>
<b-row class="align-items-center mt-3">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Disabled
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="primary" disabled>Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="secondary" disabled>Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="success" disabled>Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="warning" disabled>Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="danger" disabled>Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="info" disabled>Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="light" disabled>Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="dark" disabled>Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="link" disabled>Link</b-button>
</b-col>
</b-row>
</b-card-body>
</b-card>
<b-card no-body>
<b-card-header>
<strong>Outline Buttons</strong>
</b-card-header>
<b-card-body>
<p>
Use <code>variant="outline-*"</code> prop
</p>
<b-row class="align-items-center">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Normal
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-primary">Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-secondary">Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-success">Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-warning">Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-danger">Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-info">Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-light">Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-dark">Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></b-col>
</b-row>
<b-row class="align-items-center mt-3">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Active State
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="outline-primary" aria-pressed="true">Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="outline-secondary" aria-pressed="true">Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="outline-success" aria-pressed="true">Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="outline-warning" aria-pressed="true">Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="outline-danger" aria-pressed="true">Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="outline-info" aria-pressed="true">Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="outline-light" aria-pressed="true">Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="outline-dark" aria-pressed="true">Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></b-col>
</b-row>
<b-row class="align-items-center mt-3">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Disabled
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-primary" disabled>Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-secondary" disabled>Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-success" disabled>Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-warning" disabled>Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-danger" disabled>Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-info" disabled>Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-light" disabled>Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="outline-dark" disabled>Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></b-col>
</b-row>
</b-card-body>
</b-card>
<b-card no-body>
<b-card-header>
<strong>Ghost Buttons</strong>
</b-card-header>
<b-card-body>
<p>
Use
<code>.btn-ghost-*</code> class for ghost buttons.
</p>
<b-row class="align-items-center">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Normal
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-primary">Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-secondary">Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-success">Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-warning">Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-danger">Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-info">Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-light">Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-dark">Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></b-col>
</b-row>
<b-row class="align-items-center mt-3">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Active State
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="ghost-primary" aria-pressed="true">Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="ghost-secondary" aria-pressed="true">Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="ghost-success" aria-pressed="true">Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="ghost-warning" aria-pressed="true">Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="ghost-danger" aria-pressed="true">Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="ghost-info" aria-pressed="true">Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="ghost-light" aria-pressed="true">Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block pressed variant="ghost-dark" aria-pressed="true">Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></b-col>
</b-row>
<b-row class="align-items-center mt-3">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Disabled
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-primary" disabled>Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-secondary" disabled>Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-success" disabled>Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-warning" disabled>Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-danger" disabled>Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-info" disabled>Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-light" disabled>Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="ghost-dark" disabled>Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></b-col>
</b-row>
</b-card-body>
</b-card>
<b-card no-body>
<b-card-header>
<strong>Square Buttons</strong>
</b-card-header>
<b-card-body>
<p>
Use
<code>.btn-square</code> class for square buttons.
</p>
<b-row class="align-items-center">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Normal
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="primary" class="btn-square">Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="secondary" class="btn-square">Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="success" class="btn-square">Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="warning" class="btn-square">Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="danger" class="btn-square">Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="info" class="btn-square">Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="light" class="btn-square">Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="dark" class="btn-square">Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="link" class="btn-square">Link</b-button>
</b-col>
</b-row>
<b-row class="align-items-center mt-3">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Active State
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="primary" class="btn-square" aria-pressed="true">Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="secondary" class="btn-square" aria-pressed="true">Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="success" class="btn-square" aria-pressed="true">Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="warning" class="btn-square" aria-pressed="true">Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="danger" class="btn-square" aria-pressed="true">Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="info" class="btn-square" aria-pressed="true">Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="light" class="btn-square" aria-pressed="true">Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="dark" class="btn-square" aria-pressed="true">Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="link" class="btn-square" aria-pressed="true">Link</b-button>
</b-col>
</b-row>
<b-row class="align-items-center mt-3">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Disabled
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="primary" class="btn-square" disabled>Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="secondary" class="btn-square" disabled>Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="success" class="btn-square" disabled>Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="warning" class="btn-square" disabled>Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="danger" class="btn-square" disabled>Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="info" class="btn-square" disabled>Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="light" class="btn-square" disabled>Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="dark" class="btn-square" disabled>Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="link" class="btn-square" disabled>Link</b-button>
</b-col>
</b-row>
</b-card-body>
</b-card>
<b-card no-body>
<b-card-header>
<strong>Pill Buttons</strong>
</b-card-header>
<b-card-body>
<p>
Use
<code>.btn-pill</code> class for pill buttons.
</p>
<b-row class="align-items-center">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Normal
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="primary" class="btn-pill">Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="secondary" class="btn-pill">Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="success" class="btn-pill">Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="warning" class="btn-pill">Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="danger" class="btn-pill">Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="info" class="btn-pill">Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="light" class="btn-pill">Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="dark" class="btn-pill">Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="link" class="btn-pill">Link</b-button>
</b-col>
</b-row>
<b-row class="align-items-center mt-3">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Active State
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="primary" class="btn-pill" aria-pressed="true">Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="secondary" class="btn-pill" aria-pressed="true">Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="success" class="btn-pill" aria-pressed="true">Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="warning" class="btn-pill" aria-pressed="true">Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="danger" class="btn-pill" aria-pressed="true">Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="info" class="btn-pill" aria-pressed="true">Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="light" class="btn-pill" aria-pressed="true">Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="dark" class="btn-pill" aria-pressed="true">Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button pressed block variant="link" class="btn-pill" aria-pressed="true">Link</b-button>
</b-col>
</b-row>
<b-row class="align-items-center mt-3">
<b-col cols="12" xl class="mb-3 mb-xl-0">
Disabled
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="primary" class="btn-pill" disabled>Primary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="secondary" class="btn-pill" disabled>Secondary</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="success" class="btn-pill" disabled>Success</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="warning" class="btn-pill" disabled>Warning</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="danger" class="btn-pill" disabled>Danger</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="info" class="btn-pill" disabled>Info</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="light" class="btn-pill" disabled>Light</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="dark" class="btn-pill" disabled>Dark</b-button>
</b-col>
<b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<b-button block variant="link" class="btn-pill" disabled>Link</b-button>
</b-col>
</b-row>
</b-card-body>
</b-card>
<b-card no-body>
<b-card-header>
<strong>Sizes</strong>
</b-card-header>
<b-card-body>
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
<b-row class="align-items-center">
<b-col cols="2" xl class="mb-3 mb-xl-0">
Small
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="primary" size="sm">Standard Button</b-button>
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="outline-secondary" size="sm">Outline Button</b-button>
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button size="sm" variant="ghost-success">Ghost Button</b-button>
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="warning" size="sm" class="btn-square">Square Button</b-button>
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="danger" size="sm" class="btn-pill">Pill Button</b-button>
</b-col>
</b-row>
<b-row class="align-items-center mt-3">
<b-col cols="2" xl class="mb-3 mb-xl-0">
Normal
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="primary">Standard Button</b-button>
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="outline-secondary" >Outline Button</b-button>
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="ghost-success">Ghost Button</b-button>
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="warning" class="btn-square">Square Button</b-button>
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="danger" class="btn-pill">Pill Button</b-button>
</b-col>
</b-row>
<b-row class="align-items-center mt-3">
<b-col cols="2" xl class="mb-3 mb-xl-0">
Large
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="primary" size="lg">Standard Button</b-button>
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="outline-secondary" size="lg">Outline Button</b-button>
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="ghost-success" size="lg">Ghost Button</b-button>
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="warning" size="lg" class="btn-square">Square Button</b-button>
</b-col>
<b-col cols="2" class="mb-3 mb-xl-0 text-center">
<b-button variant="danger" size="lg" class="btn-pill">Pill Button</b-button>
</b-col>
</b-row>
</b-card-body>
</b-card>
<b-card no-body>
<b-card-header>
<strong>With Icons</strong>
</b-card-header>
<b-card-body>
<b-row class="align-items-center mt-3">
<b-col sm xs="12" class="text-center mt-3">
<b-button variant="primary">
<i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button
</b-button>
</b-col>
<b-col sm xs="12" class="text-center mt-3">
<b-button variant="secondary" outline>
<i class="fa fa-lightbulb-o"></i>&nbsp;Outline Button
</b-button>
</b-col>
<b-col sm xs="12" class="text-center mt-3">
<b-button variant="ghost-success">
<i class="fa fa-lightbulb-o"></i>&nbsp;Ghost Button
</b-button>
</b-col>
<b-col sm xs="12" class="text-center mt-3">
<b-button variant="warning" class="btn-square">
<i class="fa fa-lightbulb-o"></i>&nbsp;Square Button
</b-button>
</b-col>
<b-col sm xs="12" class="text-center mt-3">
<b-button variant="danger" class="btn-pill">
<i class="fa fa-lightbulb-o"></i>&nbsp;Pill Button
</b-button>
</b-col>
</b-row>
</b-card-body>
</b-card>
<b-card>
<div slot="header">
<strong>Toggle pressed state</strong>
</div>
<b-row>
<b-col sm xs="12" class="text-center mt-3">
<b-button variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</b-button>
</b-col>
<b-col sm xs="12" class="text-center mt-3">
<b-button variant="outline-secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</b-button>
</b-col>
<b-col sm xs="12" class="text-center mt-3">
<b-button variant="outline-success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</b-button>
</b-col>
<b-col sm xs="12" class="text-center mt-3">
<b-button variant="outline-info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</b-button>
</b-col>
<b-col sm xs="12" class="text-center mt-3">
<b-button variant="outline-warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</b-button>
</b-col>
<b-col sm xs="12" class="text-center mt-3">
<b-button variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</b-button>
</b-col>
</b-row>
</b-card>
<b-row>
<b-col md="6">
<b-col xs="12" md="6">
<b-card>
<div slot="header">
<strong>Options</strong>
<strong>Block Level b-buttons</strong> <small>Add this <code>block</code></small>
</div>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<b-button variant="primary">Primary</b-button>
<!-- Secondary, outline button -->
<b-button variant="secondary">Secondary</b-button>
<!-- Indicates a successful or positive action -->
<b-button variant="success">Success</b-button>
<!-- Indicates caution should be taken with this action -->
<b-button variant="warning">Warning</b-button>
<!-- Indicates a dangerous or potentially negative action -->
<b-button variant="danger">Danger</b-button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<b-button variant="link">Link</b-button>
<b-button size="lg" variant="secondary" block>Block level button</b-button>
<b-button size="lg" variant="primary" block>Block level button</b-button>
<b-button size="lg" variant="success" block>Block level button</b-button>
<b-button size="lg" variant="info" block>Block level button</b-button>
<b-button size="lg" variant="warning" block>Block level button</b-button>
<b-button size="lg" variant="danger" block>Block level button</b-button>
<b-button size="lg" variant="link" block>Block level button</b-button>
</b-card>
<b-card>
</b-col>
<b-col xs="12" md="6">
<b-card>
<div slot="header">
<strong>With Icons</strong>
<strong>Block Level b-buttons</strong> <small>Add this <code>block</code></small>
</div>
<b-button variant="primary"><i class="fa fa-star"></i>&nbsp; Primary</b-button>
<b-button variant="secondary"><i class="fa fa-lightbulb-o"></i>&nbsp; Secondary</b-button>
<b-button variant="success"><i class="fa fa-magic"></i>&nbsp; Success</b-button>
<b-button variant="warning"><i class="fa fa-map-marker"></i>&nbsp; Warning</b-button>
<b-button variant="danger"><i class="fa fa-rss"></i>&nbsp; Danger</b-button>
<b-button variant="link"><i class="fa fa-link"></i>&nbsp; Link</b-button>
<b-button size="lg" variant="outline-secondary" block>Block level button</b-button>
<b-button size="lg" variant="outline-primary" block>Block level button</b-button>
<b-button size="lg" variant="outline-success" block>Block level button</b-button>
<b-button size="lg" variant="outline-info" block>Block level button</b-button>
<b-button size="lg" variant="outline-warning" block>Block level button</b-button>
<b-button size="lg" variant="outline-danger" block>Block level button</b-button>
<b-button size="lg" variant="ghost-info" block>Block level button</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Size Large</strong> <small>Add this <code>size="lg"</code></small>
</div>
<b-button size="lg" variant="primary">Primary</b-button>
<b-button size="lg" variant="secondary">Secondary</b-button>
<b-button size="lg" variant="success">Success</b-button>
<b-button size="lg" variant="info">Info</b-button>
<b-button size="lg" variant="warning">Warning</b-button>
<b-button size="lg" variant="danger">Danger</b-button>
<b-button size="lg" variant="link">Link</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Size Small</strong> <small>Add this <code>size="sm"</code></small>
</div>
<b-button size="sm" variant="primary">Primary</b-button>
<b-button size="sm" variant="secondary">Secondary</b-button>
<b-button size="sm" variant="success">Success</b-button>
<b-button size="sm" variant="info">Info</b-button>
<b-button size="sm" variant="warning">Warning</b-button>
<b-button size="sm" variant="danger">Danger</b-button>
<b-button size="sm" variant="link">Link</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Disabled state</strong> <small>Add this <code>:disabled="true"</code></small>
</div>
<b-button size="lg" variant="primary" :disabled="true">Primary</b-button>
<b-button size="lg" variant="secondary" :disabled="true">Secondary</b-button>
<b-button size="lg" variant="success" :disabled="true">Success</b-button>
<b-button size="lg" variant="info" :disabled="true">Info</b-button>
<b-button size="lg" variant="warning" :disabled="true">Warning</b-button>
<b-button size="lg" variant="danger" :disabled="true">Danger</b-button>
<b-button size="lg" variant="link" :disabled="true">Link</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Active state</strong> <small>Add this <code>:active="true"</code></small>
</div>
<b-button variant="primary" :active="true">Primary</b-button>
<b-button variant="secondary" :active="true">Secondary</b-button>
<b-button variant="success" :active="true">Success</b-button>
<b-button variant="info" :active="true">Info</b-button>
<b-button variant="warning" :active="true">Warning</b-button>
<b-button variant="danger" :active="true">Danger</b-button>
<b-button variant="link" :active="true">Link</b-button>
</b-card>
<b-card header-tag="header">
<div slot="header">
<strong>Pressed state</strong> <small>Add this <code>:pressed="true"</code></small>
</div>
<b-button variant="primary" :pressed="true">Primary</b-button>
<b-button variant="secondary" :pressed="true">Secondary</b-button>
<b-button variant="success" :pressed="true">Success</b-button>
<b-button variant="info" :pressed="true">Info</b-button>
<b-button variant="warning" :pressed="true">Warning</b-button>
<b-button variant="danger" :pressed="true">Danger</b-button>
<b-button variant="link" :pressed="true">Link</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Toggle pressed state</strong>
</div>
<b-button variant="primary" :pressed.sync="myToggle">Primary {{myToggle ? 'On ' : 'Off'}}</b-button>
<b-button variant="secondary" :pressed.sync="myToggle">Secondary {{myToggle ? 'On ' : 'Off'}}</b-button>
<b-button variant="success" :pressed.sync="myToggle">Success {{myToggle ? 'On ' : 'Off'}}</b-button>
<b-button variant="info" :pressed.sync="myToggle">Info {{myToggle ? 'On ' : 'Off'}}</b-button>
<b-button variant="warning" :pressed.sync="myToggle">Warning {{myToggle ? 'On ' : 'Off'}}</b-button>
<b-button variant="danger" :pressed.sync="myToggle">Danger {{myToggle ? 'On ' : 'Off'}}</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Block Level Buttons</strong> <small>Add this <code>:block="true"</code></small>
</div>
<b-button size="lg" variant="secondary" :block="true">Block level button</b-button>
<b-button size="lg" variant="primary" :block="true">Block level button</b-button>
<b-button size="lg" variant="success" :block="true">Block level button</b-button>
<b-button size="lg" variant="info" :block="true">Block level button</b-button>
<b-button size="lg" variant="warning" :block="true">Block level button</b-button>
<b-button size="lg" variant="danger" :block="true">Block level button</b-button>
<b-button size="lg" variant="link" :block="true">Block level button</b-button>
</b-card>
</b-col><!--/.col-->
<b-col md="6">
<b-card>
<div slot="header">
<strong>Options</strong>
</div>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<b-button variant="outline-primary">Primary</b-button>
<!-- Secondary, outline button -->
<b-button variant="outline-secondary">Secondary</b-button>
<!-- Indicates a successful or positive action -->
<b-button variant="outline-success">Success</b-button>
<!-- Indicates caution should be taken with this action -->
<b-button variant="outline-warning">Warning</b-button>
<!-- Indicates a dangerous or potentially negative action -->
<b-button variant="outline-danger">Danger</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>With Icons</strong>
</div>
<b-button variant="outline-primary"><i class="fa fa-star"></i>&nbsp; Primary</b-button>
<b-button variant="outline-secondary"><i class="fa fa-lightbulb-o"></i>&nbsp; Secondary</b-button>
<b-button variant="outline-success"><i class="fa fa-magic"></i>&nbsp; Success</b-button>
<b-button variant="outline-warning"><i class="fa fa-map-marker"></i>&nbsp; Warning</b-button>
<b-button variant="outline-danger"><i class="fa fa-rss"></i>&nbsp; Danger</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Size Large</strong> <small>Add this <code>size="lg"</code></small>
</div>
<b-button size="lg" variant="outline-primary">Primary</b-button>
<b-button size="lg" variant="outline-secondary">Secondary</b-button>
<b-button size="lg" variant="outline-success">Success</b-button>
<b-button size="lg" variant="outline-info">Info</b-button>
<b-button size="lg" variant="outline-warning">Warning</b-button>
<b-button size="lg" variant="outline-danger">Danger</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Size Small</strong> <small>Add this <code>size="sm"</code></small>
</div>
<b-button size="sm" variant="outline-primary">Primary</b-button>
<b-button size="sm" variant="outline-secondary">Secondary</b-button>
<b-button size="sm" variant="outline-success">Success</b-button>
<b-button size="sm" variant="outline-info">Info</b-button>
<b-button size="sm" variant="outline-warning">Warning</b-button>
<b-button size="sm" variant="outline-danger">Danger</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Disabled state</strong> <small>Add this <code>:disabled="true"</code></small>
</div>
<b-button variant="outline-primary" :disabled="true">Primary</b-button>
<b-button variant="outline-secondary" :disabled="true">Secondary</b-button>
<b-button variant="success" :disabled="true">Success</b-button>
<b-button variant="outline-info" :disabled="true">Info</b-button>
<b-button variant="outline-warning" :disabled="true">Warning</b-button>
<b-button variant="outline-danger" :disabled="true">Danger</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Active state</strong> <small>Add this <code>:active="true"</code></small>
</div>
<b-button variant="outline-primary" :active="true">Primary</b-button>
<b-button variant="outline-secondary" :active="true">Secondary</b-button>
<b-button variant="outline-success" :active="true">Success</b-button>
<b-button variant="outline-info" :active="true">Info</b-button>
<b-button variant="outline-warning" :active="true">Warning</b-button>
<b-button variant="outline-danger" :active="true">Danger</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Pressed state</strong> <small>Add this <code>:pressed="true"</code></small>
</div>
<b-button variant="outline-primary" :pressed="true">Primary</b-button>
<b-button variant="outline-secondary" :pressed="true">Secondary</b-button>
<b-button variant="outline-success" :pressed="true">Success</b-button>
<b-button variant="outline-info" :pressed="true">Info</b-button>
<b-button variant="outline-warning" :pressed="true">Warning</b-button>
<b-button variant="outline-danger" :pressed="true">Danger</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Toggle pressed state</strong>
</div>
<b-button variant="outline-primary" :pressed.sync="myToggle">Primary {{myToggle ? 'On ' : 'Off'}}</b-button>
<b-button variant="outline-secondary" :pressed.sync="myToggle">Secondary {{myToggle ? 'On ' : 'Off'}}</b-button>
<b-button variant="outline-success" :pressed.sync="myToggle">Success {{myToggle ? 'On ' : 'Off'}}</b-button>
<b-button variant="outline-info" :pressed.sync="myToggle">Info {{myToggle ? 'On ' : 'Off'}}</b-button>
<b-button variant="outline-warning" :pressed.sync="myToggle">Warning {{myToggle ? 'On ' : 'Off'}}</b-button>
<b-button variant="outline-danger" :pressed.sync="myToggle">Danger {{myToggle ? 'On ' : 'Off'}}</b-button>
</b-card>
<b-card>
<div slot="header">
<strong>Block Level Buttons</strong> <small>Add this <code>:block="true"</code></small>
</div>
<b-button size="lg" variant="outline-secondary" :block="true">Block level button</b-button>
<b-button size="lg" variant="outline-primary" :block="true">Block level button</b-button>
<b-button size="lg" variant="outline-success" :block="true">Block level button</b-button>
<b-button size="lg" variant="outline-info" :block="true">Block level button</b-button>
<b-button size="lg" variant="outline-warning" :block="true">Block level button</b-button>
<b-button size="lg" variant="outline-danger" :block="true">Block level button</b-button>
</b-card>
</b-col><!--/.col-->
</b-row><!--/.row-->
</b-col>
</b-row>
</div>
</template>
@@ -227,7 +682,7 @@
export default {
name: 'standard-buttons',
data: () => {
return { myToggle: false }
return { togglePress: false }
}
}
</script>