vue-style-details
v1.0.1
Published
> a beautify details
Downloads
2
Readme
vue-style-details
a beautify details
Source Code
<template>
<details>
<summary :style="headerStyle || {}">{{ header }}</summary>
<slot></slot>
</details>
</template>
<script>
export default {
props: {
header: String,
headerStyle: Object,
},
}
</script>
<style lang="scss" scoped>
details {
margin-top: 10px;
}
summary {
text-align: center;
background: rgb(238 238 238 / 60%);
padding: 5px;
color: #606266;
cursor: default;
font-size: 14px;
margin-bottom: 10px;
user-select: none;
&:hover {
background: rgb(238 238 238 / 90%);
}
&:focus {
outline: none;
}
}
</style>