| | |
| | | <template> |
| | | <div class="data-board-card-wrapper"> |
| | | <div class="data-board-card-title">{{ title }}</div> |
| | | <div class="data-board-card-content"> |
| | | <div class="data-board-card-content" :class="contentBetween && 'content-between'"> |
| | | <slot></slot> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | type Props = { |
| | | title?: string; |
| | | contentBetween?: boolean; |
| | | }; |
| | | |
| | | const props = withDefaults(defineProps<Props>(), {}); |
| | | const props = withDefaults(defineProps<Props>(), { |
| | | contentBetween: false, |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | .data-board-card-content { |
| | | flex: 1; |
| | | min-height: 0; |
| | | |
| | | &.content-between { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | } |
| | | } |
| | | } |
| | | </style> |