parent
8da278a279
commit
488fe2e7bd
6 changed files with 93 additions and 75 deletions
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="kedshtep" :class="{ naked, inNakedDeckColumn, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
|
||||
<header v-if="showHeader">
|
||||
<header v-if="showHeader" :class="{ bodyTogglable }" @click="toggleContent(!showBody)">
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<slot name="func"></slot>
|
||||
<button v-if="bodyTogglable" @click="toggleContent(!showBody)">
|
||||
<button v-if="bodyTogglable">
|
||||
<template v-if="showBody"><fa icon="angle-up"/></template>
|
||||
<template v-else><fa icon="angle-down"/></template>
|
||||
</button>
|
||||
|
@ -47,6 +47,7 @@ export default Vue.extend({
|
|||
},
|
||||
methods: {
|
||||
toggleContent(show: boolean) {
|
||||
if (!this.bodyTogglable) return;
|
||||
this.showBody = show;
|
||||
this.$emit('toggle', show);
|
||||
}
|
||||
|
@ -77,6 +78,9 @@ export default Vue.extend({
|
|||
> header
|
||||
background var(--faceHeader)
|
||||
|
||||
&.bodyTogglable
|
||||
cursor pointer
|
||||
|
||||
> .title
|
||||
z-index 1
|
||||
margin 0
|
||||
|
@ -120,6 +124,9 @@ export default Vue.extend({
|
|||
color var(--text)
|
||||
background var(--deckColumnBg)
|
||||
|
||||
&.bodyTogglable
|
||||
cursor pointer
|
||||
|
||||
> button
|
||||
position absolute
|
||||
top 0
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue