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/components | |
| 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/components')
| -rw-r--r-- | docs/.vuepress/components/BmcButtons.vue | 50 |
1 files changed, 50 insertions, 0 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 |