diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-03-04 09:59:47 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-03-20 21:26:14 +0300 |
commit | 3f6710a09c953405cc0bc8014eab89887122b17d (patch) | |
tree | 713e6118de3922bee39a690e2e3361069697056e /docs/.vuepress | |
parent | a06fe4695e7e4c09ea07540d3353cb05c36f1e37 (diff) | |
download | webui-vue-3f6710a09c953405cc0bc8014eab89887122b17d.tar.xz |
Add buttons documentation
- Add documentation for how to use buttons
- Update markup and CSS rulesets to support icons on the left or the
right of text
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ic897f416e85824287360bc7ef5dc47c402d64eba
Diffstat (limited to 'docs/.vuepress')
-rw-r--r-- | docs/.vuepress/components/BmcButtons.vue | 50 | ||||
-rw-r--r-- | docs/.vuepress/config.js | 5 | ||||
-rw-r--r-- | docs/.vuepress/enhanceApp.js | 10 |
3 files changed, 64 insertions, 1 deletions
diff --git a/docs/.vuepress/components/BmcButtons.vue b/docs/.vuepress/components/BmcButtons.vue new file mode 100644 index 00000000..2035e4db --- /dev/null +++ b/docs/.vuepress/components/BmcButtons.vue @@ -0,0 +1,50 @@ +<template> + <div> + <h3 class="h4">Enabled</h3> + <b-button variant="primary">Primary</b-button> + <b-button variant="primary"> + <icon-add /> + <span>Primary with icon</span> + </b-button> + <b-button variant="secondary">Secondary</b-button> + <b-button variant="danger">Danger</b-button> + <b-button variant="link">Link Button</b-button> + <b-button variant="link"> + <icon-add /> + <span>Link Button</span> + </b-button> + + <h3 class="h4">Disabled</h3> + <b-button disabled variant="primary">Primary</b-button> + <b-button disabled variant="primary"> + <icon-add /> + <span>Primary with icon</span> + </b-button> + <b-button disabled variant="secondary">Secondary</b-button> + <b-button disabled variant="danger">Danger</b-button> + <b-button disabled variant="link">Link Button</b-button> + <b-button disabled variant="link"> + <icon-add /> + <span>Link Button</span> + </b-button> + </div> +</template> + +<script> +import IconAdd from '@carbon/icons-vue/es/add--alt/20'; +import IconArrowRight from '@carbon/icons-vue/es/arrow--right/16'; +export default { + name: 'BmcButtons', + components: { IconAdd, IconArrowRight } +} +</script> +<style scoped> + button { + margin-bottom: 1rem; + margin-right: .5rem; + } + + h3 { + margin: .5rem 0 1rem; + } +</style>
\ No newline at end of file diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 5a8e601f..2be074e4 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -42,7 +42,10 @@ module.exports = { }, { title: "Components", - children: ["/guide/components/", "/guide/components/page-section"] + children: [ + "/guide/components/", + "/guide/components/button", + ] } ], "/themes/": [""] diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js new file mode 100644 index 00000000..59c1f925 --- /dev/null +++ b/docs/.vuepress/enhanceApp.js @@ -0,0 +1,10 @@ + +import "../../src/assets/styles/_obmc-custom.scss"; +import { + ButtonPlugin + } from 'bootstrap-vue'; + + +export default ({ Vue }) => { + Vue.use(ButtonPlugin); +}
\ No newline at end of file |