50 lines
1.0 KiB
Vue
50 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
:class="[
|
||
|
|
':soy: relative inline-flex justify-center items-center gap-12px px-12px py-4px border-1px border-solid rounded-4px cursor-pointer whitespace-nowrap',
|
||
|
|
style['button-tab'],
|
||
|
|
{ [style['button-tab_dark']]: darkMode },
|
||
|
|
{ [style['button-tab_active']]: active },
|
||
|
|
{ [style['button-tab_active_dark']]: active && darkMode }
|
||
|
|
]"
|
||
|
|
>
|
||
|
|
<slot name="prefix"></slot>
|
||
|
|
<slot></slot>
|
||
|
|
<slot name="suffix"></slot>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import style from './index.module.css';
|
||
|
|
import type { PageTabProps } from '../../types';
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'ButtonTab'
|
||
|
|
});
|
||
|
|
|
||
|
|
defineProps<PageTabProps>();
|
||
|
|
|
||
|
|
type SlotFn = (props?: Record<string, unknown>) => any;
|
||
|
|
|
||
|
|
type Slots = {
|
||
|
|
/**
|
||
|
|
* slot
|
||
|
|
* @description the center content of the tab
|
||
|
|
*/
|
||
|
|
default?: SlotFn;
|
||
|
|
/**
|
||
|
|
* slot
|
||
|
|
* @description the left content of the tab
|
||
|
|
*/
|
||
|
|
prefix?: SlotFn;
|
||
|
|
/**
|
||
|
|
* slot
|
||
|
|
* @description the right content of the tab
|
||
|
|
*/
|
||
|
|
suffix?: SlotFn;
|
||
|
|
};
|
||
|
|
defineSlots<Slots>();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|