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

refactor: new project structure

Browse Source
This commit is contained in:
Łukasz Holeczek
2018-03-05 15:35:14 +01:00
parent 0347970e65
commit 7dcd6bff72
273 changed files with 102 additions and 5945 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/buttons/ButtonGroups.vue
+197
View File
@@ -0,0 +1,197 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-row>
<b-col cols="12" >
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap button group</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-group" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div>
<div>
<b-button-group>
<b-button>One</b-button>
<b-button>Two</b-button>
<b-button>Three</b-button>
<b-button>Four</b-button>
<b-button class="d-sm-down-none">Five</b-button>
</b-button-group>
<br><br>
<b-button-group>
<b-button class="d-sm-down-none" variant="success">Success</b-button>
<b-button variant="info">Info</b-button>
<b-button variant="warning">Warn</b-button>
<b-button class="d-sm-down-none" variant="primary">Primary</b-button>
<b-button variant="danger">Danger</b-button>
<b-button variant="link">Link</b-button>
</b-button-group>
</div>
</b-card>
</b-col>
<b-col cols="12">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Button group</strong> sizing
</div>
<div>
<b-button-group>
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>
<br><br>
<b-button-group size="sm">
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>
<br><br>
<b-button-group size="lg">
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>
</div>
</b-card>
</b-col>
<b-col cols="12">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Button group</strong> dropdown support
</div>
<div>
<b-button-group>
<b-button class="d-sm-down-none">Button 1</b-button>
<b-button class="d-sm-down-none">Button 2</b-button>
<b-dropdown right text="Menu" variant="success">
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
<b-button class="d-sm-down-none">Button 3</b-button>
<b-dropdown right split text="Split Menu" variant="info">
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
</b-button-group>
</div>
</b-card>
</b-col>
<b-col cols="12">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Button group</strong> vertical variation
</div>
<div>
<b-button-group vertical>
<b-button>Top</b-button>
<b-button>Middle</b-button>
<b-button>Bottom</b-button>
</b-button-group>
</div>
</b-card>
</b-col>
<b-col cols="12">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div>
<div>
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
<b-button-group class="mx-1">
<b-btn class="d-sm-down-none">&laquo;</b-btn>
<b-btn>&lsaquo;</b-btn>
</b-button-group>
<b-button-group class="mx-1">
<b-btn class="d-sm-down-none">Edit</b-btn>
<b-btn>Undo</b-btn>
<b-btn>Redo</b-btn>
</b-button-group>
<b-button-group class="mx-1">
<b-btn>&rsaquo;</b-btn>
<b-btn class="d-sm-down-none">&raquo;</b-btn>
</b-button-group>
</b-button-toolbar>
</div>
<hr class="d-sm-down-none"/>
<div>
<b-button-toolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
<b-button-group size="sm" class="mx-1">
<b-btn>New</b-btn>
<b-btn>Edit</b-btn>
</b-button-group>
<b-input-group size="sm" class="w-25 mx-1">
<b-input-group-prepend>
<b-input-group-text>$</b-input-group-text>
</b-input-group-prepend>
<b-form-input value="100" class="text-right"></b-form-input>
<b-input-group-append>
<b-input-group-text>.00</b-input-group-text>
</b-input-group-append>
</b-input-group>
<b-input-group size="sm" class="w-25 mx-1">
<b-input-group-prepend>
<b-input-group-text>Size</b-input-group-text>
</b-input-group-prepend>
<b-form-select value="Medium" :options="['Large','Medium','Small']"></b-form-select>
</b-input-group>
<b-button-group size="sm" class="mx-1">
<b-btn>Save</b-btn>
<b-btn>Cancel</b-btn>
</b-button-group>
</b-button-toolbar>
</div>
<hr/>
<div>
<b-button-toolbar aria-label="Toolbar with button groups and dropdown menu">
<b-button-group class="mx-1 d-sm-down-none">
<b-btn>New</b-btn>
<b-btn>Edit</b-btn>
<b-btn>Undo</b-btn>
</b-button-group>
<b-dropdown class="mx-1" right text="menu">
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
<b-button-group class="mx-1">
<b-btn>Save</b-btn>
<b-btn>Cancel</b-btn>
</b-button-group>
</b-button-toolbar>
</div>
</b-card>
</b-col>
</b-row>
</div>
</div>
</template>
<script>
export default {
name: 'button-groups'
}
</script>
src/views/buttons/Dropdowns.vue
+236
View File
@@ -0,0 +1,236 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-row>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Dropdown</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" target="_blank"><small class="text-muted">docs</small></a>
</div>
</div>
<div>
<b-dropdown id="ddown1" text="Dropdown Button" class="m-2">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-buttons" text="Dropdown using buttons as menu items" class="m-2">
<b-dropdown-item-button>I'm a button</b-dropdown-item-button>
<b-dropdown-item-button>I'm also a button</b-dropdown-item-button>
<b-dropdown-item-button disabled>I'm a button, but disabled!</b-dropdown-item-button>
<b-dropdown-item-button>I don't look like a button, but I am!</b-dropdown-item-button>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-divider" text="Dropdown with divider" class="m-2">
<b-dropdown-item-button>First item</b-dropdown-item-button>
<b-dropdown-item-button>Second item</b-dropdown-item-button>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item-button>Separated Item</b-dropdown-item-button>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-header" text="Dropdown with header" class="m-2">
<b-dropdown-header>Dropdown header</b-dropdown-header>
<b-dropdown-item-button>First item</b-dropdown-item-button>
<b-dropdown-item-button>Second Item</b-dropdown-item-button>
</b-dropdown>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>positioning</small>
</div>
<div>
<b-dropdown id="ddown-left" text="Left align" variant="primary" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
<b-dropdown id="ddown-right" right text="Right align" variant="primary" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-dropup" dropup text="Drop-Up" variant="info" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-offset" offset="25" text="Offset Dropdown" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-split" split text="Split Dropdown" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-dropdown>
</div>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>hidden caret</small>
</div>
<div>
<b-dropdown variant="link" size="lg" no-caret>
<template slot="button-content">
&#x1f50d;<span class="sr-only">Search</span>
</template>
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-dropdown>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>sizing</small>
</div>
<div>
<b-dropdown id="ddown-lg" size="lg" text="Large" class="m-2">
<b-dropdown-item-button>Action</b-dropdown-item-button>
<b-dropdown-item-button>Another action</b-dropdown-item-button>
<b-dropdown-item-button>Something else here</b-dropdown-item-button>
</b-dropdown>
<b-dropdown id="ddown-lg-split" size="lg" split text="Large Split" class="m-2">
<b-dropdown-item-button>Action</b-dropdown-item-button>
<b-dropdown-item-button>Another action</b-dropdown-item-button>
<b-dropdown-item-button>Something else here...</b-dropdown-item-button>
</b-dropdown>
<br>
<b-dropdown id="ddown-sm" size="sm" text="Small" class="m-2">
<b-dropdown-item-button>Action</b-dropdown-item-button>
<b-dropdown-item-button>Another action</b-dropdown-item-button>
<b-dropdown-item-button>Something else here...</b-dropdown-item-button>
</b-dropdown>
<b-dropdown id="ddown-sm-split" size="sm" split text="Small Split" class="m-2">
<b-dropdown-item-button>Action</b-dropdown-item-button>
<b-dropdown-item-button>Another action</b-dropdown-item-button>
<b-dropdown-item-button>Something else here...</b-dropdown-item-button>
</b-dropdown>
</div>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>headers and accessibility</small>
</div>
<div>
<b-dropdown id="ddown-aria" text="Dropdown ARIA" variant="primary" class="m-2">
<div role="group" aria-lableledby="header1">
<b-dropdown-header id="header1">Groups</b-dropdown-header>
<b-dropdown-item-button aria-describedby="header1">Add</b-dropdown-item-button>
<b-dropdown-item-button aria-describedby="header1">Delete</b-dropdown-item-button>
</div>
<div role="group" aria-lableledby="header2">
<b-dropdown-header id="header2">Users</b-dropdown-header>
<b-dropdown-item-button aria-describedby="header2">Add</b-dropdown-item-button>
<b-dropdown-item-button aria-describedby="header2">Delete</b-dropdown-item-button>
</div>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item-button>Something <strong>not</strong> associated with user</b-dropdown-item-button>
</b-dropdown>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong><small><code>variant</code></small>
</div>
<b-dropdown size="sm" id="ddown_primary" text="Primary" variant="primary" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_secondary" text="Secondary" variant="secondary" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_success" text="Success" variant="success" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_warning" text="Warning" variant="warning" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_danger" text="Danger" variant="danger" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_info" text="Info" variant="info" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_light" text="Light" variant="light" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_dark" text="Dark" variant="dark" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_link" text="Link" variant="link" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
</b-card>
</b-col>
</b-row>
</div>
</div>
</template>
<script>
export default {
name: 'dropdowns'
}
</script>
src/views/buttons/SocialButtons.vue
+292
View File
@@ -0,0 +1,292 @@
<template>
<div class="animated fadeIn">
<b-row>
<b-col cols="12">
<b-card>
<div slot="header">
<strong>Social Media Button</strong> <small>Usage ex.</small><code style="text-transform:lowercase">&lt;b-button variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
</div>
<h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
<p>
<b-button size="sm" variant="facebook"><span>Facebook</span></b-button>
<b-button size="sm" variant="twitter"><span>Twitter</span></b-button>
<b-button size="sm" variant="linkedin"><span>LinkedIn</span></b-button>
<b-button size="sm" variant="flickr"><span>Flickr</span></b-button>
<b-button size="sm" variant="tumblr"><span>Tumblr</span></b-button>
<b-button size="sm" variant="xing"><span>Xing</span></b-button>
<b-button size="sm" variant="github"><span>Github</span></b-button>
<b-button size="sm" variant="html5"><span>HTML5</span></b-button>
<b-button size="sm" variant="openid"><span>OpenID</span></b-button>
<b-button size="sm" variant="stack-overflow"><span>StackOverflow</span></b-button>
<b-button size="sm" variant="css3"><span>CSS3</span></b-button>
<b-button size="sm" variant="youtube"><span>YouTube</span></b-button>
<b-button size="sm" variant="dribbble"><span>Dribbble</span></b-button>
<b-button size="sm" variant="google-plus"><span>Google+</span></b-button>
<b-button size="sm" variant="instagram"><span>Instagram</span></b-button>
<b-button size="sm" variant="pinterest"><span>Pinterest</span></b-button>
<b-button size="sm" variant="vk"><span>VK</span></b-button>
<b-button size="sm" variant="yahoo"><span>Yahoo</span></b-button>
<b-button size="sm" variant="behance"><span>Behance</span></b-button>
<b-button size="sm" variant="dropbox"><span>Dropbox</span></b-button>
<b-button size="sm" variant="reddit"><span>Reddit</span></b-button>
<b-button size="sm" variant="spotify"><span>Spotify</span></b-button>
<b-button size="sm" variant="vine"><span>Vine</span></b-button>
<b-button size="sm" variant="foursquare"><span>Forsquare</span></b-button>
<b-button size="sm" variant="vimeo"><span>Vimeo</span></b-button>
</p>
<h6>Size Normal</h6>
<p>
<b-button variant="facebook"><span>Facebook</span></b-button>
<b-button variant="twitter"><span>Twitter</span></b-button>
<b-button variant="linkedin"><span>LinkedIn</span></b-button>
<b-button variant="flickr"><span>Flickr</span></b-button>
<b-button variant="tumblr"><span>Tumblr</span></b-button>
<b-button variant="xing"><span>Xing</span></b-button>
<b-button variant="github"><span>Github</span></b-button>
<b-button variant="html5"><span>HTML5</span></b-button>
<b-button variant="openid"><span>OpenID</span></b-button>
<b-button variant="stack-overflow"><span>StackOverflow</span></b-button>
<b-button variant="css3"><span>CSS3</span></b-button>
<b-button variant="youtube"><span>YouTube</span></b-button>
<b-button variant="dribbble"><span>Dribbble</span></b-button>
<b-button variant="google-plus"><span>Google+</span></b-button>
<b-button variant="instagram"><span>Instagram</span></b-button>
<b-button variant="pinterest"><span>Pinterest</span></b-button>
<b-button variant="vk"><span>VK</span></b-button>
<b-button variant="yahoo"><span>Yahoo</span></b-button>
<b-button variant="behance"><span>Behance</span></b-button>
<b-button variant="dropbox"><span>Dropbox</span></b-button>
<b-button variant="reddit"><span>Reddit</span></b-button>
<b-button variant="spotify"><span>Spotify</span></b-button>
<b-button variant="vine"><span>Vine</span></b-button>
<b-button variant="foursquare"><span>Forsquare</span></b-button>
<b-button variant="vimeo"><span>Vimeo</span></b-button>
</p>
<h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
<p>
<b-button size="lg" variant="facebook"><span>Facebook</span></b-button>
<b-button size="lg" variant="twitter"><span>Twitter</span></b-button>
<b-button size="lg" variant="linkedin"><span>LinkedIn</span></b-button>
<b-button size="lg" variant="flickr"><span>Flickr</span></b-button>
<b-button size="lg" variant="tumblr"><span>Tumblr</span></b-button>
<b-button size="lg" variant="xing"><span>Xing</span></b-button>
<b-button size="lg" variant="github"><span>Github</span></b-button>
<b-button size="lg" variant="html5"><span>HTML5</span></b-button>
<b-button size="lg" variant="openid"><span>OpenID</span></b-button>
<b-button size="lg" variant="stack-overflow"><span>StackOverflow</span></b-button>
<b-button size="lg" variant="css3"><span>CSS3</span></b-button>
<b-button size="lg" variant="youtube"><span>YouTube</span></b-button>
<b-button size="lg" variant="dribbble"><span>Dribbble</span></b-button>
<b-button size="lg" variant="google-plus"><span>Google+</span></b-button>
<b-button size="lg" variant="instagram"><span>Instagram</span></b-button>
<b-button size="lg" variant="pinterest"><span>Pinterest</span></b-button>
<b-button size="lg" variant="vk"><span>VK</span></b-button>
<b-button size="lg" variant="yahoo"><span>Yahoo</span></b-button>
<b-button size="lg" variant="behance"><span>Behance</span></b-button>
<b-button size="lg" variant="dropbox"><span>Dropbox</span></b-button>
<b-button size="lg" variant="reddit"><span>Reddit</span></b-button>
<b-button size="lg" variant="spotify"><span>Spotify</span></b-button>
<b-button size="lg" variant="vine"><span>Vine</span></b-button>
<b-button size="lg" variant="foursquare"><span>Forsquare</span></b-button>
<b-button size="lg" variant="vimeo"><span>Vimeo</span></b-button>
</p>
</b-card>
</b-col><!--/.col-->
<b-col cols="12">
<b-card>
<div slot="header">
<strong>Social Media Button</strong> <small>Only icons. Usage ex.</small> <code style="text-transform:lowercase">&lt;b-button variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
</div>
<h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
<p>
<b-button size="sm" variant="facebook icon"></b-button>
<b-button size="sm" variant="twitter icon"></b-button>
<b-button size="sm" variant="linkedin icon"></b-button>
<b-button size="sm" variant="flickr icon"></b-button>
<b-button size="sm" variant="tumblr icon"></b-button>
<b-button size="sm" variant="xing icon"></b-button>
<b-button size="sm" variant="github icon"></b-button>
<b-button size="sm" variant="html5 icon"></b-button>
<b-button size="sm" variant="openid icon"></b-button>
<b-button size="sm" variant="stack-overflow icon"></b-button>
<b-button size="sm" variant="css3 icon"></b-button>
<b-button size="sm" variant="youtube icon"></b-button>
<b-button size="sm" variant="dribbble icon"></b-button>
<b-button size="sm" variant="google-plus icon"></b-button>
<b-button size="sm" variant="instagram icon"></b-button>
<b-button size="sm" variant="pinterest icon"></b-button>
<b-button size="sm" variant="vk icon"></b-button>
<b-button size="sm" variant="yahoo icon"></b-button>
<b-button size="sm" variant="behance icon"></b-button>
<b-button size="sm" variant="dropbox icon"></b-button>
<b-button size="sm" variant="reddit icon"></b-button>
<b-button size="sm" variant="spotify icon"></b-button>
<b-button size="sm" variant="vine icon"></b-button>
<b-button size="sm" variant="foursquare icon"></b-button>
<b-button size="sm" variant="vimeo icon"></b-button>
</p>
<h6>Size Normal</h6>
<p>
<b-button variant="facebook icon"></b-button>
<b-button variant="twitter icon"></b-button>
<b-button variant="linkedin icon"></b-button>
<b-button variant="flickr icon"></b-button>
<b-button variant="tumblr icon"></b-button>
<b-button variant="xing icon"></b-button>
<b-button variant="github icon"></b-button>
<b-button variant="html5 icon"></b-button>
<b-button variant="openid icon"></b-button>
<b-button variant="stack-overflow icon"></b-button>
<b-button variant="css3 icon"></b-button>
<b-button variant="youtube icon"></b-button>
<b-button variant="dribbble icon"></b-button>
<b-button variant="google-plus icon"></b-button>
<b-button variant="instagram icon"></b-button>
<b-button variant="pinterest icon"></b-button>
<b-button variant="vk icon"></b-button>
<b-button variant="yahoo icon"></b-button>
<b-button variant="behance icon"></b-button>
<b-button variant="dropbox icon"></b-button>
<b-button variant="reddit icon"></b-button>
<b-button variant="spotify icon"></b-button>
<b-button variant="vine icon"></b-button>
<b-button variant="foursquare icon"></b-button>
<b-button variant="vimeo icon"></b-button>
</p>
<h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
<p>
<b-button size="lg" variant="facebook icon"><span>Facebook</span></b-button>
<b-button size="lg" variant="twitter icon"><span>Twitter</span></b-button>
<b-button size="lg" variant="linkedin icon"><span>LinkedIn</span></b-button>
<b-button size="lg" variant="flickr icon"><span>Flickr</span></b-button>
<b-button size="lg" variant="tumblr icon"><span>Tumblr</span></b-button>
<b-button size="lg" variant="xing icon"><span>Xing</span></b-button>
<b-button size="lg" variant="github icon"><span>Github</span></b-button>
<b-button size="lg" variant="html5 icon"><span>HTML5</span></b-button>
<b-button size="lg" variant="openid icon"><span>OpenID</span></b-button>
<b-button size="lg" variant="stack-overflow icon"><span>StackOverflow</span></b-button>
<b-button size="lg" variant="css3 icon"><span>CSS3</span></b-button>
<b-button size="lg" variant="youtube icon"><span>YouTube</span></b-button>
<b-button size="lg" variant="dribbble icon"><span>Dribbble</span></b-button>
<b-button size="lg" variant="google-plus icon"><span>Google+</span></b-button>
<b-button size="lg" variant="instagram icon"><span>Instagram</span></b-button>
<b-button size="lg" variant="pinterest icon"><span>Pinterest</span></b-button>
<b-button size="lg" variant="vk icon"><span>VK</span></b-button>
<b-button size="lg" variant="yahoo icon"><span>Yahoo</span></b-button>
<b-button size="lg" variant="behance icon"><span>Behance</span></b-button>
<b-button size="lg" variant="dropbox icon"><span>Dropbox</span></b-button>
<b-button size="lg" variant="reddit icon"><span>Reddit</span></b-button>
<b-button size="lg" variant="spotify icon"><span>Spotify</span></b-button>
<b-button size="lg" variant="vine icon"><span>Vine</span></b-button>
<b-button size="lg" variant="foursquare icon"><span>Forsquare</span></b-button>
<b-button size="lg" variant="vimeo icon"><span>Vimeo</span></b-button>
</p>
</b-card>
</b-col><!--/.col-->
<b-col cols="12">
<b-card>
<div slot="header">
<strong>Social Media Button</strong> <small>Only text. Usage ex.</small> <code style="text-transform:lowercase">&lt;b-button variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
</div>
<h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
<p>
<b-button size="sm" variant="facebook text"><span>Facebook</span></b-button>
<b-button size="sm" variant="twitter text"><span>Twitter</span></b-button>
<b-button size="sm" variant="linkedin text"><span>LinkedIn</span></b-button>
<b-button size="sm" variant="flickr text"><span>Flickr</span></b-button>
<b-button size="sm" variant="tumblr text"><span>Tumblr</span></b-button>
<b-button size="sm" variant="xing text"><span>Xing</span></b-button>
<b-button size="sm" variant="github text"><span>Github</span></b-button>
<b-button size="sm" variant="html5 text"><span>HTML5</span></b-button>
<b-button size="sm" variant="openid text"><span>OpenID</span></b-button>
<b-button size="sm" variant="stack-overflow text"><span>StackOverflow</span></b-button>
<b-button size="sm" variant="css3 text"><span>CSS3</span></b-button>
<b-button size="sm" variant="youtube text"><span>YouTube</span></b-button>
<b-button size="sm" variant="dribbble text"><span>Dribbble</span></b-button>
<b-button size="sm" variant="google-plus text"><span>Google+</span></b-button>
<b-button size="sm" variant="instagram text"><span>Instagram</span></b-button>
<b-button size="sm" variant="pinterest text"><span>Pinterest</span></b-button>
<b-button size="sm" variant="vk text"><span>VK</span></b-button>
<b-button size="sm" variant="yahoo text"><span>Yahoo</span></b-button>
<b-button size="sm" variant="behance text"><span>Behance</span></b-button>
<b-button size="sm" variant="dropbox text"><span>Dropbox</span></b-button>
<b-button size="sm" variant="reddit text"><span>Reddit</span></b-button>
<b-button size="sm" variant="spotify text"><span>Spotify</span></b-button>
<b-button size="sm" variant="vine text"><span>Vine</span></b-button>
<b-button size="sm" variant="foursquare text"><span>Forsquare</span></b-button>
<b-button size="sm" variant="vimeo text"><span>Vimeo</span></b-button>
</p>
<h6>Size Normal</h6>
<p>
<b-button variant="facebook text"><span>Facebook</span></b-button>
<b-button variant="twitter text"><span>Twitter</span></b-button>
<b-button variant="linkedin text"><span>LinkedIn</span></b-button>
<b-button variant="flickr text"><span>Flickr</span></b-button>
<b-button variant="tumblr text"><span>Tumblr</span></b-button>
<b-button variant="xing text"><span>Xing</span></b-button>
<b-button variant="github text"><span>Github</span></b-button>
<b-button variant="html5 text"><span>HTML5</span></b-button>
<b-button variant="openid text"><span>OpenID</span></b-button>
<b-button variant="stack-overflow text"><span>StackOverflow</span></b-button>
<b-button variant="css3 text"><span>CSS3</span></b-button>
<b-button variant="youtube text"><span>YouTube</span></b-button>
<b-button variant="dribbble text"><span>Dribbble</span></b-button>
<b-button variant="google-plus text"><span>Google+</span></b-button>
<b-button variant="instagram text"><span>Instagram</span></b-button>
<b-button variant="pinterest text"><span>Pinterest</span></b-button>
<b-button variant="vk text"><span>VK</span></b-button>
<b-button variant="yahoo text"><span>Yahoo</span></b-button>
<b-button variant="behance text"><span>Behance</span></b-button>
<b-button variant="dropbox text"><span>Dropbox</span></b-button>
<b-button variant="reddit text"><span>Reddit</span></b-button>
<b-button variant="spotify text"><span>Spotify</span></b-button>
<b-button variant="vine text"><span>Vine</span></b-button>
<b-button variant="foursquare text"><span>Forsquare</span></b-button>
<b-button variant="vimeo text"><span>Vimeo</span></b-button>
</p>
<h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
<p>
<b-button size="lg" variant="facebook text"><span>Facebook</span></b-button>
<b-button size="lg" variant="twitter text"><span>Twitter</span></b-button>
<b-button size="lg" variant="linkedin text"><span>LinkedIn</span></b-button>
<b-button size="lg" variant="flickr text"><span>Flickr</span></b-button>
<b-button size="lg" variant="tumblr text"><span>Tumblr</span></b-button>
<b-button size="lg" variant="xing text"><span>Xing</span></b-button>
<b-button size="lg" variant="github text"><span>Github</span></b-button>
<b-button size="lg" variant="html5 text"><span>HTML5</span></b-button>
<b-button size="lg" variant="openid text"><span>OpenID</span></b-button>
<b-button size="lg" variant="stack-overflow text"><span>StackOverflow</span></b-button>
<b-button size="lg" variant="css3 text"><span>CSS3</span></b-button>
<b-button size="lg" variant="youtube text"><span>YouTube</span></b-button>
<b-button size="lg" variant="dribbble text"><span>Dribbble</span></b-button>
<b-button size="lg" variant="google-plus text"><span>Google+</span></b-button>
<b-button size="lg" variant="instagram text"><span>Instagram</span></b-button>
<b-button size="lg" variant="pinterest text"><span>Pinterest</span></b-button>
<b-button size="lg" variant="vk text"><span>VK</span></b-button>
<b-button size="lg" variant="yahoo text"><span>Yahoo</span></b-button>
<b-button size="lg" variant="behance text"><span>Behance</span></b-button>
<b-button size="lg" variant="dropbox text"><span>Dropbox</span></b-button>
<b-button size="lg" variant="reddit text"><span>Reddit</span></b-button>
<b-button size="lg" variant="spotify text"><span>Spotify</span></b-button>
<b-button size="lg" variant="vine text"><span>Vine</span></b-button>
<b-button size="lg" variant="foursquare text"><span>Forsquare</span></b-button>
<b-button size="lg" variant="vimeo text"><span>Vimeo</span></b-button>
</p>
</b-card>
</b-col><!--/.col-->
</b-row><!--/.row-->
</div>
</template>
<script>
export default {
name: 'social-buttons'
}
</script>
<style scoped lang="css">
.btn {
margin-bottom: 4px;
}
</style>
src/views/buttons/StandardButtons.vue
+233
View File
@@ -0,0 +1,233 @@
<template>
<div class="animated fadeIn">
<b-row>
<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="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-card>
<b-card>
<div slot="header">
<strong>With Icons</strong>
</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-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-->
</div>
</template>
<script>
export default {
name: 'standard-buttons',
data: () => {
return { myToggle: false }
}
}
</script>