22 lines
818 B
Vue
22 lines
818 B
Vue
|
<script setup lang="ts">
|
||
|
|
withDefaults(defineProps<{
|
||
|
|
ariaLabel?: string
|
||
|
|
}>(), {
|
||
|
|
ariaLabel: '列表页面',
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<section class="list-page-layout" :aria-label="ariaLabel">
|
||
|
|
<div v-if="$slots.toolbar" class="list-page-layout__toolbar"><slot name="toolbar" /></div>
|
||
|
|
<div v-if="$slots.metrics" class="list-page-layout__metrics"><slot name="metrics" /></div>
|
||
|
|
<div v-if="$slots.state" class="list-page-layout__state"><slot name="state" /></div>
|
||
|
|
<div v-if="$slots.default" class="list-page-layout__content"><slot /></div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.list-page-layout { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
|
||
|
|
.list-page-layout__toolbar, .list-page-layout__metrics, .list-page-layout__state, .list-page-layout__content { min-width: 0; }
|
||
|
|
</style>
|