feat: Bootstrap Vue components changed to Coreui-Vue components
This commit is contained in:
woothu
+248
-248
@@ -1,287 +1,287 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<strong>Brand Button</strong>
|
||||
</div>
|
||||
<small>Usage </small><code style="text-transform:lowercase"><b-button variant="facebook"><span>Facebook</span></b-button></code>
|
||||
</CCardHeader>
|
||||
<small>Usage </small><code><CButton variant="facebook"><span>Facebook</span></CButton></code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
|
||||
<b-button size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
|
||||
<b-button size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></b-button>
|
||||
<b-button size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></b-button>
|
||||
<b-button size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></b-button>
|
||||
<b-button size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></b-button>
|
||||
<b-button size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></b-button>
|
||||
<b-button size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></b-button>
|
||||
<b-button size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></b-button>
|
||||
<b-button size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></b-button>
|
||||
<b-button size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></b-button>
|
||||
<b-button size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></b-button>
|
||||
<b-button size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></b-button>
|
||||
<b-button size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></b-button>
|
||||
<b-button size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></b-button>
|
||||
<b-button size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></b-button>
|
||||
<b-button size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></b-button>
|
||||
<b-button size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></b-button>
|
||||
<b-button size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></b-button>
|
||||
<b-button size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></b-button>
|
||||
<b-button size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></b-button>
|
||||
<b-button size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></b-button>
|
||||
<b-button size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></b-button>
|
||||
<b-button size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button>
|
||||
<b-button size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button>
|
||||
<CButton size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
|
||||
<CButton size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
|
||||
<CButton size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
|
||||
<CButton size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
|
||||
<CButton size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
|
||||
<CButton size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
|
||||
<CButton size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
|
||||
<CButton size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
|
||||
<CButton size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
|
||||
<CButton size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
|
||||
<CButton size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
|
||||
<CButton size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
|
||||
<CButton size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
|
||||
<CButton size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
|
||||
<CButton size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
|
||||
<CButton size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
|
||||
<CButton size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
|
||||
<CButton size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
|
||||
<CButton size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
|
||||
<CButton size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
|
||||
<CButton size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
|
||||
<CButton size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
|
||||
<CButton size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
|
||||
<CButton size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
|
||||
<CButton size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<b-button variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
|
||||
<b-button variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
|
||||
<b-button variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></b-button>
|
||||
<b-button variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></b-button>
|
||||
<b-button variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></b-button>
|
||||
<b-button variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></b-button>
|
||||
<b-button variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></b-button>
|
||||
<b-button variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></b-button>
|
||||
<b-button variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></b-button>
|
||||
<b-button variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></b-button>
|
||||
<b-button variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></b-button>
|
||||
<b-button variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></b-button>
|
||||
<b-button variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></b-button>
|
||||
<b-button variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></b-button>
|
||||
<b-button variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></b-button>
|
||||
<b-button variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></b-button>
|
||||
<b-button variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></b-button>
|
||||
<b-button variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></b-button>
|
||||
<b-button variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></b-button>
|
||||
<b-button variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></b-button>
|
||||
<b-button variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></b-button>
|
||||
<b-button variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></b-button>
|
||||
<b-button variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></b-button>
|
||||
<b-button variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button>
|
||||
<b-button variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button>
|
||||
<CButton variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
|
||||
<CButton variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
|
||||
<CButton variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
|
||||
<CButton variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
|
||||
<CButton variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
|
||||
<CButton variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
|
||||
<CButton variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
|
||||
<CButton variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
|
||||
<CButton variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
|
||||
<CButton variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
|
||||
<CButton variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
|
||||
<CButton variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
|
||||
<CButton variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
|
||||
<CButton variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
|
||||
<CButton variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
|
||||
<CButton variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
|
||||
<CButton variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
|
||||
<CButton variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
|
||||
<CButton variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
|
||||
<CButton variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
|
||||
<CButton variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
|
||||
<CButton variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
|
||||
<CButton variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
|
||||
<CButton variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
|
||||
<CButton variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
|
||||
<b-button size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
|
||||
<b-button size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></b-button>
|
||||
<b-button size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></b-button>
|
||||
<b-button size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></b-button>
|
||||
<b-button size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></b-button>
|
||||
<b-button size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></b-button>
|
||||
<b-button size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></b-button>
|
||||
<b-button size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></b-button>
|
||||
<b-button size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></b-button>
|
||||
<b-button size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></b-button>
|
||||
<b-button size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></b-button>
|
||||
<b-button size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></b-button>
|
||||
<b-button size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></b-button>
|
||||
<b-button size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></b-button>
|
||||
<b-button size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></b-button>
|
||||
<b-button size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></b-button>
|
||||
<b-button size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></b-button>
|
||||
<b-button size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></b-button>
|
||||
<b-button size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></b-button>
|
||||
<b-button size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></b-button>
|
||||
<b-button size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></b-button>
|
||||
<b-button size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></b-button>
|
||||
<b-button size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button>
|
||||
<b-button size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button>
|
||||
<CButton size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
|
||||
<CButton size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
|
||||
<CButton size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
|
||||
<CButton size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
|
||||
<CButton size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
|
||||
<CButton size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
|
||||
<CButton size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
|
||||
<CButton size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
|
||||
<CButton size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
|
||||
<CButton size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
|
||||
<CButton size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
|
||||
<CButton size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
|
||||
<CButton size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
|
||||
<CButton size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
|
||||
<CButton size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
|
||||
<CButton size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
|
||||
<CButton size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
|
||||
<CButton size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
|
||||
<CButton size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
|
||||
<CButton size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
|
||||
<CButton size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
|
||||
<CButton size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
|
||||
<CButton size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
|
||||
<CButton size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
|
||||
<CButton size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
|
||||
</p>
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
<b-col cols="12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol><!--/.col-->
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<strong>Brand Button </strong> <small>Icons only</small>
|
||||
</div>
|
||||
<small>Usage </small> <code style="text-transform:lowercase"><b-button variant="facebook icon"><span>Facebook</span></b-button></code>
|
||||
</CCardHeader>
|
||||
<small>Usage </small> <code><CButton variant="facebook icon"><span>Facebook</span></CButton></code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></b-button>
|
||||
<b-button size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></b-button>
|
||||
<b-button size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></b-button>
|
||||
<b-button size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></b-button>
|
||||
<b-button size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></b-button>
|
||||
<b-button size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></b-button>
|
||||
<b-button size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></b-button>
|
||||
<b-button size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></b-button>
|
||||
<b-button size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></b-button>
|
||||
<b-button size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></b-button>
|
||||
<b-button size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></b-button>
|
||||
<b-button size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></b-button>
|
||||
<b-button size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></b-button>
|
||||
<b-button size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></b-button>
|
||||
<b-button size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></b-button>
|
||||
<b-button size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></b-button>
|
||||
<b-button size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></b-button>
|
||||
<b-button size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></b-button>
|
||||
<b-button size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></b-button>
|
||||
<b-button size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></b-button>
|
||||
<b-button size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></b-button>
|
||||
<b-button size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></b-button>
|
||||
<b-button size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></b-button>
|
||||
<b-button size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></b-button>
|
||||
<b-button size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></b-button>
|
||||
<CButton size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
|
||||
<CButton size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
|
||||
<CButton size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
|
||||
<CButton size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
|
||||
<CButton size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
|
||||
<CButton size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
|
||||
<CButton size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
|
||||
<CButton size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
|
||||
<CButton size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
|
||||
<CButton size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
|
||||
<CButton size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
|
||||
<CButton size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
|
||||
<CButton size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
|
||||
<CButton size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
|
||||
<CButton size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
|
||||
<CButton size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
|
||||
<CButton size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
|
||||
<CButton size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
|
||||
<CButton size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
|
||||
<CButton size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
|
||||
<CButton size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
|
||||
<CButton size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
|
||||
<CButton size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
|
||||
<CButton size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
|
||||
<CButton size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<b-button variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></b-button>
|
||||
<b-button variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></b-button>
|
||||
<b-button variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></b-button>
|
||||
<b-button variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></b-button>
|
||||
<b-button variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></b-button>
|
||||
<b-button variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></b-button>
|
||||
<b-button variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></b-button>
|
||||
<b-button variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></b-button>
|
||||
<b-button variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></b-button>
|
||||
<b-button variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></b-button>
|
||||
<b-button variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></b-button>
|
||||
<b-button variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></b-button>
|
||||
<b-button variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></b-button>
|
||||
<b-button variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></b-button>
|
||||
<b-button variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></b-button>
|
||||
<b-button variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></b-button>
|
||||
<b-button variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></b-button>
|
||||
<b-button variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></b-button>
|
||||
<b-button variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></b-button>
|
||||
<b-button variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></b-button>
|
||||
<b-button variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></b-button>
|
||||
<b-button variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></b-button>
|
||||
<b-button variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></b-button>
|
||||
<b-button variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></b-button>
|
||||
<b-button variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></b-button>
|
||||
<CButton variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
|
||||
<CButton variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
|
||||
<CButton variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
|
||||
<CButton variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
|
||||
<CButton variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
|
||||
<CButton variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
|
||||
<CButton variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
|
||||
<CButton variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
|
||||
<CButton variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
|
||||
<CButton variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
|
||||
<CButton variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
|
||||
<CButton variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
|
||||
<CButton variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
|
||||
<CButton variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
|
||||
<CButton variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
|
||||
<CButton variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
|
||||
<CButton variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
|
||||
<CButton variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
|
||||
<CButton variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
|
||||
<CButton variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
|
||||
<CButton variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
|
||||
<CButton variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
|
||||
<CButton variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
|
||||
<CButton variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
|
||||
<CButton variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></b-button>
|
||||
<b-button size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></b-button>
|
||||
<b-button size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></b-button>
|
||||
<b-button size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></b-button>
|
||||
<b-button size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></b-button>
|
||||
<b-button size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></b-button>
|
||||
<b-button size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></b-button>
|
||||
<b-button size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></b-button>
|
||||
<b-button size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></b-button>
|
||||
<b-button size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></b-button>
|
||||
<b-button size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></b-button>
|
||||
<b-button size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></b-button>
|
||||
<b-button size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></b-button>
|
||||
<b-button size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></b-button>
|
||||
<b-button size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></b-button>
|
||||
<b-button size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></b-button>
|
||||
<b-button size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></b-button>
|
||||
<b-button size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></b-button>
|
||||
<b-button size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></b-button>
|
||||
<b-button size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></b-button>
|
||||
<b-button size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></b-button>
|
||||
<b-button size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></b-button>
|
||||
<b-button size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></b-button>
|
||||
<b-button size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></b-button>
|
||||
<b-button size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></b-button>
|
||||
<CButton size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
|
||||
<CButton size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
|
||||
<CButton size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
|
||||
<CButton size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
|
||||
<CButton size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
|
||||
<CButton size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
|
||||
<CButton size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
|
||||
<CButton size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
|
||||
<CButton size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
|
||||
<CButton size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
|
||||
<CButton size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
|
||||
<CButton size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
|
||||
<CButton size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
|
||||
<CButton size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
|
||||
<CButton size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
|
||||
<CButton size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
|
||||
<CButton size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
|
||||
<CButton size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
|
||||
<CButton size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
|
||||
<CButton size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
|
||||
<CButton size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
|
||||
<CButton size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
|
||||
<CButton size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
|
||||
<CButton size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
|
||||
<CButton size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
|
||||
</p>
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
</CCard>
|
||||
</CCol><!--/.col-->
|
||||
|
||||
<b-col cols="12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<strong>Brand Button </strong> <small>Text only</small>
|
||||
</div>
|
||||
<small>Usage </small> <code style="text-transform:lowercase"><b-button variant="facebook text"><span>Facebook</span></b-button></code>
|
||||
</CCardHeader>
|
||||
<small>Usage </small> <code><CButton variant="facebook text"><span>Facebook</span></CButton></code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></b-button>
|
||||
<b-button size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></b-button>
|
||||
<b-button size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></b-button>
|
||||
<b-button size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></b-button>
|
||||
<b-button size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></b-button>
|
||||
<b-button size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></b-button>
|
||||
<b-button size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></b-button>
|
||||
<b-button size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></b-button>
|
||||
<b-button size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></b-button>
|
||||
<b-button size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></b-button>
|
||||
<b-button size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></b-button>
|
||||
<b-button size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></b-button>
|
||||
<b-button size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></b-button>
|
||||
<b-button size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></b-button>
|
||||
<b-button size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></b-button>
|
||||
<b-button size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></b-button>
|
||||
<b-button size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></b-button>
|
||||
<b-button size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></b-button>
|
||||
<b-button size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></b-button>
|
||||
<b-button size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></b-button>
|
||||
<b-button size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></b-button>
|
||||
<b-button size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></b-button>
|
||||
<b-button size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></b-button>
|
||||
<b-button size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></b-button>
|
||||
<b-button size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></b-button>
|
||||
<CButton size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
|
||||
<CButton size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
|
||||
<CButton size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
|
||||
<CButton size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
|
||||
<CButton size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
|
||||
<CButton size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
|
||||
<CButton size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
|
||||
<CButton size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
|
||||
<CButton size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
|
||||
<CButton size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
|
||||
<CButton size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
|
||||
<CButton size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
|
||||
<CButton size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
|
||||
<CButton size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
|
||||
<CButton size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
|
||||
<CButton size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
|
||||
<CButton size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
|
||||
<CButton size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
|
||||
<CButton size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
|
||||
<CButton size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
|
||||
<CButton size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
|
||||
<CButton size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
|
||||
<CButton size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
|
||||
<CButton size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
|
||||
<CButton size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<b-button variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></b-button>
|
||||
<b-button variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></b-button>
|
||||
<b-button variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></b-button>
|
||||
<b-button variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></b-button>
|
||||
<b-button variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></b-button>
|
||||
<b-button variant="xing text" class="mr-1 btn-brand"><span>Xing</span></b-button>
|
||||
<b-button variant="github text" class="mr-1 btn-brand"><span>Github</span></b-button>
|
||||
<b-button variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></b-button>
|
||||
<b-button variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></b-button>
|
||||
<b-button variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></b-button>
|
||||
<b-button variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></b-button>
|
||||
<b-button variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></b-button>
|
||||
<b-button variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></b-button>
|
||||
<b-button variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></b-button>
|
||||
<b-button variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></b-button>
|
||||
<b-button variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></b-button>
|
||||
<b-button variant="vk text" class="mr-1 btn-brand"><span>VK</span></b-button>
|
||||
<b-button variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></b-button>
|
||||
<b-button variant="behance text" class="mr-1 btn-brand"><span>Behance</span></b-button>
|
||||
<b-button variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></b-button>
|
||||
<b-button variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></b-button>
|
||||
<b-button variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></b-button>
|
||||
<b-button variant="vine text" class="mr-1 btn-brand"><span>Vine</span></b-button>
|
||||
<b-button variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></b-button>
|
||||
<b-button variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></b-button>
|
||||
<CButton variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
|
||||
<CButton variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
|
||||
<CButton variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
|
||||
<CButton variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
|
||||
<CButton variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
|
||||
<CButton variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
|
||||
<CButton variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
|
||||
<CButton variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
|
||||
<CButton variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
|
||||
<CButton variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
|
||||
<CButton variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
|
||||
<CButton variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
|
||||
<CButton variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
|
||||
<CButton variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
|
||||
<CButton variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
|
||||
<CButton variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
|
||||
<CButton variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
|
||||
<CButton variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
|
||||
<CButton variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
|
||||
<CButton variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
|
||||
<CButton variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
|
||||
<CButton variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
|
||||
<CButton variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
|
||||
<CButton variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
|
||||
<CButton variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></b-button>
|
||||
<b-button size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></b-button>
|
||||
<b-button size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></b-button>
|
||||
<b-button size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></b-button>
|
||||
<b-button size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></b-button>
|
||||
<b-button size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></b-button>
|
||||
<b-button size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></b-button>
|
||||
<b-button size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></b-button>
|
||||
<b-button size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></b-button>
|
||||
<b-button size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></b-button>
|
||||
<b-button size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></b-button>
|
||||
<b-button size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></b-button>
|
||||
<b-button size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></b-button>
|
||||
<b-button size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></b-button>
|
||||
<b-button size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></b-button>
|
||||
<b-button size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></b-button>
|
||||
<b-button size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></b-button>
|
||||
<b-button size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></b-button>
|
||||
<b-button size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></b-button>
|
||||
<b-button size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></b-button>
|
||||
<b-button size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></b-button>
|
||||
<b-button size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></b-button>
|
||||
<b-button size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></b-button>
|
||||
<b-button size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></b-button>
|
||||
<b-button size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></b-button>
|
||||
<CButton size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
|
||||
<CButton size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
|
||||
<CButton size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
|
||||
<CButton size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
|
||||
<CButton size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
|
||||
<CButton size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
|
||||
<CButton size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
|
||||
<CButton size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
|
||||
<CButton size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
|
||||
<CButton size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
|
||||
<CButton size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
|
||||
<CButton size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
|
||||
<CButton size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
|
||||
<CButton size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
|
||||
<CButton size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
|
||||
<CButton size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
|
||||
<CButton size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
|
||||
<CButton size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
|
||||
<CButton size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
|
||||
<CButton size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
|
||||
<CButton size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
|
||||
<CButton size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
|
||||
<CButton size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
|
||||
<CButton size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
|
||||
<CButton size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
|
||||
</p>
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
</CCard>
|
||||
</CCol><!--/.col-->
|
||||
</CRow><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
+144
-260
@@ -1,306 +1,190 @@
|
||||
<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">
|
||||
<CRow>
|
||||
<CCol cols="12" >
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CButton variant="success" to="/dashboard" disabled>sdjk</CButton>
|
||||
<CButton variant="success" to="/dashboard" role="smh">sdjk</CButton>
|
||||
|
||||
<CButton variant="success" :pressed.sync="myToggle">sdjk</CButton>
|
||||
<CButton variant="success" :pressed.sync="myToggle2">sdjk</CButton>
|
||||
|
||||
<CButton variant="outline-success" pressed>sdjk</CButton>
|
||||
|
||||
<CButton square block ghost>sdjk</CButton>
|
||||
</br></br>
|
||||
<CButton pill ghost>sdjk</CButton>
|
||||
<CButton block size="sm" variant="success" pill square :pressed="false" disabled>sdjk</CButton>
|
||||
<CButton block size="sm" variant="success" pill square to="/dashboard" disabled>sdjk</CButton>
|
||||
|
||||
<CButton block size="lg" variant="info" square >sdjk</CButton>
|
||||
|
||||
</br></br>
|
||||
<CEmbed
|
||||
tag="p"
|
||||
aspect="16by9"
|
||||
src="https://www.youtube.com/embed/axTSc3e6wu8"
|
||||
frameborder="0"
|
||||
allow="accelerometer;autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
>
|
||||
|
||||
</CEmbed>
|
||||
<b-nav pills>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item-dropdown id="nav7_ddown" text="Dropdown" extra-toggle-classes="nav-link-custom" right>
|
||||
<b-dropdown-item>one</b-dropdown-item>
|
||||
<b-dropdown-item>two</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>three</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-nav>
|
||||
<b-nav pills>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<!-- <c-nav-item-dropdown id="nav7_ddown" text="Dropdown" extra-toggle-classes="nav-link-custom" right>
|
||||
<b-dropdown-item>one</b-dropdown-item>
|
||||
<b-dropdown-item>two</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>three</b-dropdown-item>
|
||||
</c-nav-item-dropdown> -->
|
||||
</b-nav>
|
||||
<CButtonToolbar role="smh">
|
||||
<c-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>
|
||||
</c-button-group>
|
||||
<c-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>
|
||||
</c-button-group>
|
||||
</CButtonToolbar>
|
||||
<CButtonGroup>
|
||||
<CButton>One</CButton>
|
||||
<CButton>Two</CButton>
|
||||
<CButton>Three</CButton>
|
||||
<CButton>Four</CButton>
|
||||
<CButton class="d-sm-down-none">Five</CButton>
|
||||
</CButtonGroup>
|
||||
<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>
|
||||
<CButtonGroup>
|
||||
<CButton class="d-sm-down-none" variant="success">Success</CButton>
|
||||
<CButton variant="info">Info</CButton>
|
||||
<CButton variant="warning">Warn</CButton>
|
||||
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
|
||||
<CButton variant="danger">Danger</CButton>
|
||||
<CButton variant="link">Link</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<CDropdown no-caret show>
|
||||
<img slot="button-content"
|
||||
src="img/avatars/6.jpg"
|
||||
class="img-avatar"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
|
||||
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
|
||||
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
|
||||
<c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
|
||||
<c-badge variant="success">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
|
||||
<c-badge variant="danger">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-comments" /> Comments
|
||||
<c-badge variant="warning">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-header
|
||||
tag="div"
|
||||
class="text-center">
|
||||
<strong>Settings</strong>
|
||||
</b-dropdown-header>
|
||||
<b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-usd" /> Payments
|
||||
<c-badge variant="secondary">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-file" /> Projects
|
||||
<c-badge variant="primary">{{ itemsCount }}</c-badge>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-divider ></b-dropdown-divider >
|
||||
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
|
||||
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
|
||||
</CDropdown>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-button-group>
|
||||
<b-button>Left</b-button>
|
||||
<b-button>Middle</b-button>
|
||||
<b-button>Right</b-button>
|
||||
</b-button-group>
|
||||
<CButtonGroup>
|
||||
<CButton>Left</CButton>
|
||||
<CButton>Middle</CButton>
|
||||
<CButton>Right</CButton>
|
||||
</CButtonGroup>
|
||||
<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>
|
||||
<CButtonGroup size="sm">
|
||||
<CButton>Left</CButton>
|
||||
<CButton>Middle</CButton>
|
||||
<CButton>Right</CButton>
|
||||
</CButtonGroup>
|
||||
<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>
|
||||
<CButtonGroup size="lg">
|
||||
<CButton>Left</CButton>
|
||||
<CButton>Middle</CButton>
|
||||
<CButton>Right</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<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>
|
||||
<CButtonGroup>
|
||||
<CButton class="d-sm-down-none">Button 1</CButton>
|
||||
<CButton class="d-sm-down-none">Button 2</CButton>
|
||||
<CDropdown right text="Menu" variant="success">
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CButton class="d-sm-down-none">Button 3</CButton>
|
||||
<CDropdown right split text="Split Menu" variant="info">
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-button-group vertical>
|
||||
<b-button>Top</b-button>
|
||||
<b-button>Middle</b-button>
|
||||
<b-button>Bottom</b-button>
|
||||
</b-button-group>
|
||||
<CButtonGroup vertical>
|
||||
<CButton>Top</CButton>
|
||||
<CButton>Middle</CButton>
|
||||
<CButton>Bottom</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<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">«</b-btn>
|
||||
<b-btn>‹</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>›</b-btn>
|
||||
<b-btn class="d-sm-down-none">»</b-btn>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
<CButtonToolbar key-nav aria-label="Toolbar with button groups">
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton class="d-sm-down-none">«</CButton>
|
||||
<CButton>‹</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton class="d-sm-down-none">Edit</CButton>
|
||||
<CButton>Undo</CButton>
|
||||
<CButton>Redo</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton>›</CButton>
|
||||
<CButton class="d-sm-down-none">»</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</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>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton>New</CButton>
|
||||
<CButton>Edit</CButton>
|
||||
</CButtonGroup>
|
||||
<CFormInput
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
prepend="$"
|
||||
append=".00"
|
||||
value="100"
|
||||
/>
|
||||
<CFormSelect
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
prepend="Size"
|
||||
value="Medium"
|
||||
:options="['Large','Medium','Small']"
|
||||
custom
|
||||
/>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton>Save</CButton>
|
||||
<CButton>Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</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>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||
<CButtonGroup class="mx-1 d-sm-down-none">
|
||||
<CButton>New</CButton>
|
||||
<CButton>Edit</CButton>
|
||||
<CButton>Undo</CButton>
|
||||
</CButtonGroup>
|
||||
<CDropdown
|
||||
class="mx-1"
|
||||
placement="bottom-end"
|
||||
button-content="Menu"
|
||||
>
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton>Save</CButton>
|
||||
<CButton>Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CButton from './CButton'
|
||||
// import CButtonGroup from './CButtonGroup'
|
||||
// import CButtonToolbar from './CButtonToolbar'
|
||||
|
||||
// import CEmbed from './CEmbed'
|
||||
// import CDropdown from '../../containers/CDropdown'
|
||||
|
||||
export default {
|
||||
name: 'button-groups',
|
||||
// components: {
|
||||
// CButtonGroup,
|
||||
// CButtonToolbar,
|
||||
// CButton
|
||||
// },
|
||||
// components: {
|
||||
// CEmbed,
|
||||
// CDropdown
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
myToggle: false,
|
||||
|
||||
+215
-203
@@ -1,232 +1,244 @@
|
||||
<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">
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Dropdown</strong>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CDropdown id="ddown1" button-content="Dropdown Button" class="m-2">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<CDropdown id="ddown-buttons" button-content="Dropdown using buttons as menu items" class="m-2">
|
||||
<CDropdownItem>I'm a button</CDropdownItem>
|
||||
<CDropdownItem>I'm also a button</CDropdownItem>
|
||||
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
|
||||
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div> -->
|
||||
<div>
|
||||
<CDropdown id="ddown-divider" button-content="Dropdown with divider" class="m-2">
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second item</CDropdownItem>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
<CDropdownItem>Separated Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
</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>
|
||||
<CDropdown id="ddown-header" button-content="Dropdown with header" class="m-2">
|
||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
</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">
|
||||
🔍<span class="sr-only">Search</span>
|
||||
</template>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard
|
||||
|
||||
<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>
|
||||
>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CDropdown id="ddown-left" button-content="Left align" variant="primary" class="m-2">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown id="ddown-right"
|
||||
placement="bottom-end"
|
||||
button-content="Right align"
|
||||
variant="primary"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<div>
|
||||
<CDropdown id="ddown-dropup"
|
||||
button-content="Drop-Up"
|
||||
variant="info"
|
||||
class="m-2"
|
||||
dropup
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown id="ddown-offset"
|
||||
:offset="25"
|
||||
button-content="Offset Dropdown"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown id="ddown-split" split button-content="Split Dropdown" class="m-2">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard
|
||||
|
||||
>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CDropdown variant="link"
|
||||
size="lg"
|
||||
button-content="🔍<span class='sr-only'>Search</span>"
|
||||
no-caret
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard
|
||||
|
||||
>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<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>
|
||||
<CDropdown id="ddown-lg" size="lg" button-content="Large" class="m-2">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown id="ddown-lg-split" size="lg" split button-content="Large Split" class="m-2">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
<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>
|
||||
<CDropdown id="ddown-sm" size="sm" button-content="Small" class="m-2">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown id="ddown-sm-split" size="sm" split button-content="Small Split" class="m-2">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</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">
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard
|
||||
|
||||
>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-dropdown id="ddown-aria" text="Dropdown ARIA" variant="primary" class="m-2">
|
||||
<CDropdown id="ddown-aria" button-content="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>
|
||||
<CDropdownHeader id="header1">Groups</CDropdownHeader>
|
||||
<CDropdownItem aria-describedby="header1">Add</CDropdownItem>
|
||||
<CDropdownItem aria-describedby="header1">Delete</CDropdownItem>
|
||||
</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>
|
||||
<CDropdownHeader id="header2">Users</CDropdownHeader>
|
||||
<CDropdownItem aria-describedby="header2">Add</CDropdownItem>
|
||||
<CDropdownItem aria-describedby="header2">Delete</CDropdownItem>
|
||||
</div>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item-button>Something <strong>not</strong> associated with user</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
<CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard
|
||||
|
||||
>
|
||||
<CCardHeader 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>
|
||||
</CCardHeader>
|
||||
<CDropdown size="sm" id="ddown_primary" button-content="Primary" variant="primary" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_secondary" button-content="Secondary" variant="secondary" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_success" button-content="Success" variant="success" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_warning" button-content="Warning" variant="warning" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_danger" button-content="Danger" variant="danger" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_info" button-content="Info" variant="info" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_light" button-content="Light" variant="light" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_dark" button-content="Dark" variant="dark" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown size="sm" id="ddown_link" button-content="Link" variant="link" class="m-0">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user