+ `
+ }}
+
+
+
+### Sizes
+
+There are four different sizes. Each one has it's own break points, so please
+check every break point when use change it.
+
+
+
+ {{
+ components: { SysFormButton },
+ template: `
+
+ small
+ medium
+ large
+ huge
+
+ `
+ }}
+
+
+
+### Direction
+
+There is a `direction` prop that allows you to change the direction the content
+will flow. This will not change any text wrapping settings, so you if you want
+to force a line break, you need to wrap the content in different tags like the
+example below.
+
+The most common use case for this is setting `direction="vertical"` with a
+custom `height` and `width` for square styled buttons.
+
+
+
+ {{
+ components: { SysFormButton },
+ template: `
+
+
+ this
+ is
+ horizontal
+
+
+ this
+ is
+ vertical
+
+
+ `
+ }}
+
+
+
+## Combinations
+
+### With an icon
+
+If you want to include an icon in your button, you can just add it as a child.
+There are a couple of things to keep in mind though. First off, you will need
+to wrap your text in a tag. We usually recommend just a `span`. Secondly, we
+only support `svg` icons right now.
+
+
+
+ {{
+ components: { FontAwesomeIcon, SysFormButton },
+ data: () => ({
+ faComment: faComment
+ }),
+ template: `
+
+
+
+ horizontal icon
+
+
+
+ vertical icon
+
+
+ `
+ }}
+
+
+
+### With hard set dimensions
+
+You can easily change the `height` and `width` of the button using CSS in the
+parent.
+
+
+
+ {{
+ components: { FontAwesomeIcon, SysFormButton },
+ data: () => ({
+ faComment: faComment
+ }),
+ template: `
+
+
+
+ this is now a square button
+
+
+ `
+ }}
+
+
diff --git a/src/components/sys-form-button.vue b/src/components/sys-form-button.vue
index 6cc3a59..2e42383 100644
--- a/src/components/sys-form-button.vue
+++ b/src/components/sys-form-button.vue
@@ -39,38 +39,68 @@ export default {
},
props: {
+ /**
+ * If it's in an active state. Same as HTML active attribute.
+ */
active: {
type: Boolean,
default: false
},
+ /**
+ * If it should be a full width block element.
+ */
block: {
type: Boolean,
default: false
},
+ /**
+ * The color the button should be.
+ */
color: {
type: String,
default: 'normal',
validator: (v) => ['normal', 'primary', 'secondary'].includes(v)
},
+ /**
+ * Which direction the content should flow.
+ */
+ direction: {
+ type: String,
+ default: 'horizontal',
+ validator: (v) => ['horizontal', 'vertical'].includes(v)
+ },
+
+ /**
+ * If it's in a disabled state. Same as HTML disabled attribute.
+ */
disabled: {
type: Boolean,
default: false
},
+ /**
+ * The location the button so link to. Same as HTML a link href attribute.
+ */
href: {
type: String,
default: ''
},
+ /**
+ * The size of the button.
+ */
size: {
type: String,
default: 'medium',
validator: (v) => ['small', 'medium', 'large', 'huge'].includes(v)
},
+ /**
+ * An override to what HTML tag it should render as.
+ */
tag: {
type: String,
default: ''
@@ -106,7 +136,8 @@ export default {
'button--disabled': this.disabled,
'button--outline': this.outline,
[`button--${this.color}`]: true,
- [`button--${this.size}`]: true
+ [`button--${this.size}`]: true,
+ [`button--${this.direction}`]: true
})
},
@@ -150,7 +181,20 @@ export default {
methods: {
onClick (e) {
+ /**
+ * When the button is clicked.
+ *
+ * @event click
+ * @property {Event} MouseEvent Same as the native onclick event
+ */
this.$emit('click', e)
+
+ /**
+ * When the button active state switches.
+ *
+ * @event toggle
+ * @property {Boolean} active The opposite of the current active prop
+ */
this.$emit('toggle', !this.active)
}
}
@@ -160,17 +204,19 @@ export default {