diff options
Diffstat (limited to 'content/frontend/components/banner')
-rw-r--r-- | content/frontend/components/banner/banner.vue | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/content/frontend/components/banner/banner.vue b/content/frontend/components/banner/banner.vue new file mode 100644 index 00000000..530bc9f0 --- /dev/null +++ b/content/frontend/components/banner/banner.vue @@ -0,0 +1,39 @@ +<script> +export default { + props: { + text: { + type: String, + required: false, + default: '', + }, + show: { + type: Boolean, + required: false, + default: true, + }, + }, + data() { + return { + isVisible: this.show + } + }, + mounted() { + this.toggleBanner(this.isVisible); + }, + methods: { + toggleBanner(isVisible) { + this.$emit('toggle', isVisible); + this.isVisible = isVisible; + }, + }, +}; +</script> + +<template> + <div v-if="isVisible" class="banner position-fixed w-100 text-center"> + <span v-if="text">{{ text }}</span> + <slot></slot> + <!-- TODO: Replace the 'x' below with a gl-icon component once gitlab-ui becomes available in the docs --> + <button class="btn btn-close pull-right" @click="toggleBanner(false)">x</button> + </div> +</template> |