<script lang="ts" setup>
|
import { AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
|
|
const value = defineModel<'details' | 'tiles'>('value', { required: true });
|
</script>
|
|
<template>
|
<a-radio-group v-model:value="value" class="file-view-mode-switch" size="small" button-style="solid" aria-label="文件列表展示方式">
|
<a-tooltip title="详细信息">
|
<a-radio-button value="details" aria-label="详细信息视图"><UnorderedListOutlined /></a-radio-button>
|
</a-tooltip>
|
<a-tooltip title="大图标">
|
<a-radio-button value="tiles" aria-label="大图标视图"><AppstoreOutlined /></a-radio-button>
|
</a-tooltip>
|
</a-radio-group>
|
</template>
|
|
<style lang="scss" scoped>
|
.file-view-mode-switch :deep(.ant-radio-button-wrapper) {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
width: 40px;
|
height: 32px;
|
padding: 0;
|
}
|
</style>
|
