ExpansionPanel.vue 795 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <v-expansion-panel :id="id">
  3. <v-expansion-panel-header class="ot_light_grey">
  4. <v-icon class="ot_white--text ot_green icon">
  5. {{ icon }}
  6. </v-icon>
  7. {{ $t(id) }}
  8. </v-expansion-panel-header>
  9. <v-expansion-panel-content>
  10. <slot />
  11. </v-expansion-panel-content>
  12. </v-expansion-panel>
  13. </template>
  14. <script lang="ts">
  15. export default {
  16. props: {
  17. id: {
  18. type: String,
  19. required: true
  20. },
  21. icon: {
  22. type: String,
  23. required: false
  24. }
  25. }
  26. }
  27. </script>
  28. <style scoped>
  29. .icon{
  30. width: 47px;
  31. height: 47px;
  32. padding: 10px;
  33. margin-right: 10px;
  34. flex: none;
  35. }
  36. .v-expansion-panel-header{
  37. padding: 0;
  38. }
  39. .v-expansion-panel--active > .v-expansion-panel-header{
  40. min-height: 47px;
  41. }
  42. </style>