diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-01-03 21:03:39 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-01-03 21:03:39 +0000 |
commit | f6e339141d527fe50f61d9204ccf16b8ccc6d861 (patch) | |
tree | b02d1d7b32ce4c7b8e6d3109d6c29b090037dee4 /app/assets/javascripts/vue_shared/components/expand_button.vue | |
parent | c6ab17f11395338d4dc13880ae8c60a37b1ba890 (diff) | |
download | gitlab-ce-f6e339141d527fe50f61d9204ccf16b8ccc6d861.tar.gz |
Backport of methods and components added in EBackport of methods and components added in EEE
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/expand_button.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/expand_button.vue | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue new file mode 100644 index 00000000000..96991c4e268 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/expand_button.vue @@ -0,0 +1,46 @@ +<script> + import { __ } from '~/locale'; + /** + * Port of detail_behavior expand button. + * + * @example + * <expand-button> + * <template slot="expanded"> + * Text goes here. + * </template> + * </expand-button> + */ + export default { + name: 'expandButton', + data() { + return { + isCollapsed: true, + }; + }, + computed: { + ariaLabel() { + return __('Click to expand text'); + }, + }, + methods: { + onClick() { + this.isCollapsed = !this.isCollapsed; + }, + }, + }; +</script> +<template> + <span> + <button + type="button" + v-show="isCollapsed" + class="text-expander btn-blank" + aria-label="Click to Expand Text" + @click="onClick"> + ... + </button> + <span v-show="!isCollapsed"> + <slot name="expanded"></slot> + </span> + </span> +</template> |