diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/_sila/Global/Collapse.vue | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue new file mode 100644 index 00000000..c8665c28 --- /dev/null +++ b/src/components/_sila/Global/Collapse.vue @@ -0,0 +1,59 @@ +<template> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle="id" + variant="collapse" + class="d-flex flex-nowrap justify-content-start" + > + <img :src="require(imgPath)" /> + {{ title }} + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse :id="id" class="nav-item__nav"> + <slot></slot> + </b-collapse> + </div> +</template> +<script> +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/20'; + +export default { + name: 'Collapse', + props: { + id: { + type: String, + default: null, + }, + imgPath: { + type: String, + default: '@/assets/images/_sila/collapsed/temperature.svg', + }, + title: { + type: String, + default: 'collapsed title', + }, + }, + data() { + return { + iconChevronUp: iconChevronUp, + }; + }, +}; +</script> +<style lang="scss" scoped> +//nav items style +.nav-item, +.nav-link { + padding: 0; +} +.nav-item { + list-style-type: none; +} + +a { + color: $text-primary !important; + &:hover { + color: $text-primary !important; + } +} +</style> |