jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(projects): format code

Browse Source
This commit is contained in:
Soybean
2023-12-14 21:45:29 +08:00
parent a176dc443e
commit a748166399
127 changed files with 2472 additions and 3006 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/materials/src/index.ts
View File

@ -1,4 +1,4 @@
import AdminLayout, { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX } from './libs/admin-layout';
import AdminLayout, { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID } from './libs/admin-layout';
import PageTab from './libs/page-tab';
import SimpleScrollbar from './libs/simple-scrollbar';
import ColorPicker from './libs/color-picker';

3
packages/materials/src/libs/admin-layout/index.module.css.d.ts vendored
View File

@ -14,4 +14,5 @@ declare const styles: {
readonly 'sider-padding-top': string;
readonly 'sider-padding-bottom': string;
};
export = styles;
export default styles;

2
packages/materials/src/libs/admin-layout/index.ts
View File

@ -1,5 +1,5 @@
import AdminLayout from './index.vue';
import { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX } from './shared';
import { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID } from './shared';
export default AdminLayout;
export { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX };

268
packages/materials/src/libs/admin-layout/index.vue
View File

@ -1,129 +1,7 @@
<template>
<div :class="['relative h-full', commonClass]" :style="cssVars">
<div
:id="isWrapperScroll ? scrollElId : undefined"
:class="['flex flex-col h-full', commonClass, scrollWrapperClass, { 'overflow-y-auto': isWrapperScroll }]"
>
<!-- Header -->
<template v-if="showHeader">
<header
v-show="!fullContent"
:class="[
style['layout-header'],
'flex-shrink-0',
commonClass,
headerClass,
headerLeftGapClass,
{ 'absolute top-0 left-0 w-full': fixedHeaderAndTab }
]"
>
<slot name="header"></slot>
</header>
<div
v-show="!fullContent && fixedHeaderAndTab"
:class="[style['layout-header-placement'], 'flex-shrink-0 overflow-hidden']"
></div>
</template>
<!-- Tab -->
<template v-if="showTab">
<div
:class="[
style['layout-tab'],
'flex-shrink-0',
commonClass,
tabClass,
{ 'top-0!': fullContent || !showHeader },
leftGapClass,
{ 'absolute left-0 w-full': fixedHeaderAndTab }
]"
>
<slot name="tab"></slot>
</div>
<div
v-show="fullContent || fixedHeaderAndTab"
:class="[style['layout-tab-placement'], 'flex-shrink-0 overflow-hidden']"
></div>
</template>
<!-- Sider -->
<template v-if="showSider">
<aside
v-show="!fullContent"
:class="[
'absolute left-0 top-0 h-full',
commonClass,
siderClass,
siderPaddingClass,
siderCollapse ? style['layout-sider_collapsed'] : style['layout-sider']
]"
>
<slot name="sider"></slot>
</aside>
</template>
<!-- Mobile Sider -->
<template v-if="showMobileSider">
<aside
:class="[
'absolute left-0 top-0 w-0 h-full bg-white',
commonClass,
mobileSiderClass,
style['layout-mobile-sider'],
siderCollapse ? 'overflow-hidden' : style['layout-sider']
]"
>
<slot name="sider"></slot>
</aside>
<div
v-show="!siderCollapse"
:class="['absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,0.2)]', style['layout-mobile-sider-mask']]"
@click="handleClickMask"
></div>
</template>
<!-- Main Content -->
<main
:id="isContentScroll ? scrollElId : undefined"
:class="[
'flex flex-col flex-grow',
commonClass,
contentClass,
leftGapClass,
{ 'overflow-y-auto': isContentScroll }
]"
>
<slot></slot>
</main>
<!-- Footer -->
<template v-if="showFooter">
<footer
v-show="!fullContent"
:class="[
style['layout-footer'],
'flex-shrink-0',
commonClass,
footerClass,
footerLeftGapClass,
{ 'absolute left-0 bottom-0 w-full': fixedFooter }
]"
>
<slot name="footer"></slot>
</footer>
<div
v-show="!fullContent && fixedFooter"
:class="[style['layout-footer-placement'], 'flex-shrink-0 overflow-hidden']"
></div>
</template>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import type { AdminLayoutProps } from '../../types';
import { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX, createLayoutCssVars } from './shared';
import { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID, createLayoutCssVars } from './shared';
import style from './index.module.css';
defineOptions({
@ -150,31 +28,29 @@ const props = withDefaults(defineProps<AdminLayoutProps>(), {
rightFooter: false
});
const emit = defineEmits<Emits>();
const slots = defineSlots<Slots>();
interface Emits {
/**
* update siderCollapse
*/
/** Update siderCollapse */
(e: 'update:siderCollapse', collapse: boolean): void;
}
const emit = defineEmits<Emits>();
type SlotFn = (props?: Record<string, unknown>) => any;
type Slots = {
/** main */
/** Main */
default?: SlotFn;
/** header */
/** Header */
header?: SlotFn;
/** tab */
/** Tab */
tab?: SlotFn;
/** sider */
/** Sider */
sider?: SlotFn;
/** footer */
/** Footer */
footer?: SlotFn;
};
const slots = defineSlots<Slots>();
const cssVars = computed(() => createLayoutCssVars(props));
// config visible
@ -235,4 +111,126 @@ function handleClickMask() {
}
</script>
<template>
<div class="relative h-full" :class="[commonClass]" :style="cssVars">
<div
:id="isWrapperScroll ? scrollElId : undefined"
class="flex flex-col h-full"
:class="[commonClass, scrollWrapperClass, { 'overflow-y-auto': isWrapperScroll }]"
>
<!-- Header -->
<template v-if="showHeader">
<header
v-show="!fullContent"
class="flex-shrink-0"
:class="[
style['layout-header'],
commonClass,
headerClass,
headerLeftGapClass,
{ 'absolute top-0 left-0 w-full': fixedHeaderAndTab }
]"
>
<slot name="header"></slot>
</header>
<div
v-show="!fullContent && fixedHeaderAndTab"
class="flex-shrink-0 overflow-hidden"
:class="[style['layout-header-placement']]"
></div>
</template>
<!-- Tab -->
<template v-if="showTab">
<div
class="flex-shrink-0"
:class="[
style['layout-tab'],
commonClass,
tabClass,
{ 'top-0!': fullContent || !showHeader },
leftGapClass,
{ 'absolute left-0 w-full': fixedHeaderAndTab }
]"
>
<slot name="tab"></slot>
</div>
<div
v-show="fullContent || fixedHeaderAndTab"
class="flex-shrink-0 overflow-hidden"
:class="[style['layout-tab-placement']]"
></div>
</template>
<!-- Sider -->
<template v-if="showSider">
<aside
v-show="!fullContent"
class="absolute left-0 top-0 h-full"
:class="[
commonClass,
siderClass,
siderPaddingClass,
siderCollapse ? style['layout-sider_collapsed'] : style['layout-sider']
]"
>
<slot name="sider"></slot>
</aside>
</template>
<!-- Mobile Sider -->
<template v-if="showMobileSider">
<aside
class="absolute left-0 top-0 w-0 h-full bg-white"
:class="[
commonClass,
mobileSiderClass,
style['layout-mobile-sider'],
siderCollapse ? 'overflow-hidden' : style['layout-sider']
]"
>
<slot name="sider"></slot>
</aside>
<div
v-show="!siderCollapse"
class="absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,0.2)]"
:class="[style['layout-mobile-sider-mask']]"
@click="handleClickMask"
></div>
</template>
<!-- Main Content -->
<main
:id="isContentScroll ? scrollElId : undefined"
class="flex flex-col flex-grow"
:class="[commonClass, contentClass, leftGapClass, { 'overflow-y-auto': isContentScroll }]"
>
<slot></slot>
</main>
<!-- Footer -->
<template v-if="showFooter">
<footer
v-show="!fullContent"
class="flex-shrink-0"
:class="[
style['layout-footer'],
commonClass,
footerClass,
footerLeftGapClass,
{ 'absolute left-0 bottom-0 w-full': fixedFooter }
]"
>
<slot name="footer"></slot>
</footer>
<div
v-show="!fullContent && fixedFooter"
class="flex-shrink-0 overflow-hidden"
:class="[style['layout-footer-placement']]"
></div>
</template>
</div>
</div>
</template>
<style scoped></style>

18
packages/materials/src/libs/admin-layout/shared.ts
View File

@ -1,18 +1,15 @@
import type { AdminLayoutProps, LayoutCssVarsProps, LayoutCssVars } from '../../types';
import type { AdminLayoutProps, LayoutCssVars, LayoutCssVarsProps } from '../../types';
/**
* the id of the scroll element of the layout
*/
/** The id of the scroll element of the layout */
export const LAYOUT_SCROLL_EL_ID = '__SCROLL_EL_ID__';
/**
* the max z-index of the layout
*/
/** The max z-index of the layout */
export const LAYOUT_MAX_Z_INDEX = 100;
/**
* create layout css vars by css vars props
* @param props css vars props
* Create layout css vars by css vars props
*
* @param props Css vars props
*/
function createLayoutCssVarsByCssVarsProps(props: LayoutCssVarsProps) {
const cssVars: LayoutCssVars = {
@ -32,7 +29,8 @@ function createLayoutCssVarsByCssVarsProps(props: LayoutCssVarsProps) {
}
/**
* create layout css vars
* Create layout css vars
*
* @param props
*/
export function createLayoutCssVars(props: AdminLayoutProps) {

18
packages/materials/src/libs/color-picker/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { onMounted, ref, watch } from 'vue';
import ColorPicker from '@simonwep/pickr';
import '@simonwep/pickr/dist/themes/nano.min.css';
@ -7,12 +7,6 @@ defineOptions({
name: 'ColorPicker'
});
interface Props {
color: string;
palettes?: string[];
disabled?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
palettes: () => [
'#3b82f6',
@ -35,12 +29,18 @@ const props = withDefaults(defineProps<Props>(), {
]
});
const emit = defineEmits<Emits>();
interface Props {
color: string;
palettes?: string[];
disabled?: boolean;
}
interface Emits {
(e: 'update:color', value: string): void;
}
const emit = defineEmits<Emits>();
const domRef = ref<HTMLElement | null>(null);
const instance = ref<ColorPicker | null>(null);

70
packages/materials/src/libs/page-tab/button-tab.vue
View File

@ -1,7 +1,43 @@
<script setup lang="ts">
import type { PageTabProps } from '../../types';
import style from './index.module.css';
defineOptions({
name: 'ButtonTab'
});
defineProps<PageTabProps>();
defineSlots<Slots>();
type SlotFn = (props?: Record<string, unknown>) => any;
type Slots = {
/**
* Slot
*
* The center content of the tab
*/
default?: SlotFn;
/**
* Slot
*
* The left content of the tab
*/
prefix?: SlotFn;
/**
* Slot
*
* The right content of the tab
*/
suffix?: SlotFn;
};
</script>
<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"
: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 },
@ -14,36 +50,4 @@
</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>

14
packages/materials/src/libs/page-tab/chrome-tab-bg.vue
View File

@ -1,5 +1,11 @@
<script setup lang="ts">
defineOptions({
name: 'ChromeTabBg'
});
</script>
<template>
<svg style="width: 100%; height: 100%">
<svg class="wh-full">
<defs>
<symbol id="geometry-left" viewBox="0 0 214 36">
<path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"></path>
@ -22,10 +28,4 @@
</svg>
</template>
<script setup lang="ts">
defineOptions({
name: 'ChromeTabBg'
});
</script>
<style scoped></style>

61
packages/materials/src/libs/page-tab/chrome-tab.vue
View File

@ -1,27 +1,7 @@
<template>
<div
:class="[
':soy: relative inline-flex justify-center items-center gap-16px -mr-18px px-24px py-6px cursor-pointer whitespace-nowrap',
style['chrome-tab'],
{ [style['chrome-tab_dark']]: darkMode },
{ [style['chrome-tab_active']]: active },
{ [style['chrome-tab_active_dark']]: active && darkMode }
]"
>
<div :class="[':soy: absolute left-0 top-0 -z-1 w-full h-full pointer-events-none', style['chrome-tab__bg']]">
<ChromeTabBg />
</div>
<slot name="prefix"></slot>
<slot></slot>
<slot name="suffix"></slot>
<div :class="[':soy: absolute right-7px w-1px h-16px bg-#1f2225', style['chrome-tab-divider']]"></div>
</div>
</template>
<script setup lang="ts">
import type { PageTabProps } from '../../types';
import ChromeTabBg from './chrome-tab-bg.vue';
import style from './index.module.css';
import type { PageTabProps } from '../../types';
defineOptions({
name: 'ChromeTab'
@ -29,27 +9,50 @@ defineOptions({
defineProps<PageTabProps>();
defineSlots<Slots>();
type SlotFn = (props?: Record<string, unknown>) => any;
type Slots = {
/**
* slot
* @description the center content of the tab
* Slot
*
* The center content of the tab
*/
default?: SlotFn;
/**
* slot
* @description the left content of the tab
* Slot
*
* The left content of the tab
*/
prefix?: SlotFn;
/**
* slot
* @description the right content of the tab
* Slot
*
* The right content of the tab
*/
suffix?: SlotFn;
};
defineSlots<Slots>();
</script>
<template>
<div
class=":soy: relative inline-flex justify-center items-center gap-16px -mr-18px px-24px py-6px cursor-pointer whitespace-nowrap"
:class="[
style['chrome-tab'],
{ [style['chrome-tab_dark']]: darkMode },
{ [style['chrome-tab_active']]: active },
{ [style['chrome-tab_active_dark']]: active && darkMode }
]"
>
<div class=":soy: absolute left-0 top-0 -z-1 w-full h-full pointer-events-none" :class="[style['chrome-tab__bg']]">
<ChromeTabBg />
</div>
<slot name="prefix"></slot>
<slot></slot>
<slot name="suffix"></slot>
<div class=":soy: absolute right-7px w-1px h-16px bg-#1f2225" :class="[style['chrome-tab-divider']]"></div>
</div>
</template>
<style scoped></style>

32
packages/materials/src/libs/page-tab/icon-close.vue
View File

@ -1,3 +1,19 @@
<script setup lang="ts">
defineOptions({
name: 'IconClose'
});
const emit = defineEmits<Emits>();
interface Emits {
(e: 'click'): void;
}
function handleClick() {
emit('click');
}
</script>
<template>
<div
class=":soy: relative inline-flex justify-center items-center w-16px h-16px text-14px rd-50%"
@ -12,20 +28,4 @@
</div>
</template>
<script setup lang="ts">
defineOptions({
name: 'IconClose'
});
interface Emits {
(e: 'click'): void;
}
const emit = defineEmits<Emits>();
function handleClick() {
emit('click');
}
</script>
<style scoped></style>

3
packages/materials/src/libs/page-tab/index.module.css.d.ts vendored
View File

@ -11,4 +11,5 @@ declare const styles: {
readonly 'chrome-tab_dark': string;
readonly 'chrome-tab-divider': string;
};
export = styles;
export default styles;

55
packages/materials/src/libs/page-tab/index.vue
View File

@ -1,26 +1,12 @@
<template>
<component :is="activeTabComponent.component" :class="activeTabComponent.class" :style="cssVars" v-bind="bindProps">
<template #prefix>
<slot name="prefix"></slot>
</template>
<slot></slot>
<template #suffix>
<slot name="suffix">
<SvgIconClose v-if="closable" :class="[style['icon_close']]" @click="handleClose" />
</slot>
</template>
</component>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import type { Component } from 'vue';
import { createTabCssVars, ACTIVE_COLOR } from './shared';
import type { PageTabMode, PageTabProps } from '../../types';
import { ACTIVE_COLOR, createTabCssVars } from './shared';
import ChromeTab from './chrome-tab.vue';
import ButtonTab from './button-tab.vue';
import SvgIconClose from './icon-close.vue';
import style from './index.module.css';
import type { PageTabProps, PageTabMode } from '../../types';
defineOptions({
name: 'PageTab'
@ -33,34 +19,37 @@ const props = withDefaults(defineProps<PageTabProps>(), {
closable: true
});
const emit = defineEmits<Emits>();
defineSlots<Slots>();
interface Emits {
(e: 'close'): void;
}
const emit = defineEmits<Emits>();
type SlotFn = (props?: Record<string, unknown>) => any;
type Slots = {
/**
* slot
* @description the center content of the tab
* Slot
*
* The center content of the tab
*/
default?: SlotFn;
/**
* slot
* @description the left content of the tab
* Slot
*
* The left content of the tab
*/
prefix?: SlotFn;
/**
* slot
* @description the right content of the tab
* Slot
*
* The right content of the tab
*/
suffix?: SlotFn;
};
defineSlots<Slots>();
const activeTabComponent = computed(() => {
const { mode, chromeClass, buttonClass } = props;
@ -91,4 +80,18 @@ function handleClose() {
}
</script>
<template>
<component :is="activeTabComponent.component" :class="activeTabComponent.class" :style="cssVars" v-bind="bindProps">
<template #prefix>
<slot name="prefix"></slot>
</template>
<slot></slot>
<template #suffix>
<slot name="suffix">
<SvgIconClose v-if="closable" :class="[style['icon_close']]" @click="handleClose" />
</slot>
</template>
</component>
</template>
<style scoped></style>

6
packages/materials/src/libs/page-tab/shared.ts
View File

@ -1,9 +1,7 @@
import { addColorAlpha, transformColorWithOpacity } from '@sa/utils';
import type { PageTabCssVarsProps, PageTabCssVars } from '../../types';
import type { PageTabCssVars, PageTabCssVarsProps } from '../../types';
/**
* the active color of the tab
*/
/** The active color of the tab */
export const ACTIVE_COLOR = '#1890ff';
function createCssVars(props: PageTabCssVarsProps) {

188
packages/materials/src/types/index.ts
View File

@ -1,146 +1,156 @@
/**
* header config
*/
/** Header config */
interface AdminLayoutHeaderConfig {
/**
* whether header is visible
* Whether header is visible
*
* @default true
*/
headerVisible?: boolean;
/**
* header class
* Header class
*
* @default ''
*/
headerClass?: string;
/**
* header height
* Header height
*
* @default 56px
*/
headerHeight?: number;
}
/**
* tab config
*/
/** Tab config */
interface AdminLayoutTabConfig {
/**
* whether tab is visible
* Whether tab is visible
*
* @default true
*/
tabVisible?: boolean;
/**
* tab class
* Tab class
*
* @default ''
*/
tabClass?: string;
/**
* tab height
* Tab height
*
* @default 48px
*/
tabHeight?: number;
}
/**
* sider config
*/
/** Sider config */
interface AdminLayoutSiderConfig {
/**
* whether sider is visible
* Whether sider is visible
*
* @default true
*/
siderVisible?: boolean;
/**
* sider class
* Sider class
*
* @default ''
*/
siderClass?: string;
/**
* mobile sider class
* Mobile sider class
*
* @default ''
*/
mobileSiderClass?: string;
/**
* sider collapse status
* Sider collapse status
*
* @default false
*/
siderCollapse?: boolean;
/**
* sider width when collapse is false
* Sider width when collapse is false
*
* @default '220px'
*/
siderWidth?: number;
/**
* sider width when collapse is true
* Sider width when collapse is true
*
* @default '64px'
*/
siderCollapsedWidth?: number;
}
/**
* content config
*/
/** Content config */
export interface AdminLayoutContentConfig {
/**
* content class
* Content class
*
* @default ''
*/
contentClass?: string;
/**
* whether content is full the page
* @description if true, other elements will be hidden by `display: none`
* Whether content is full the page
*
* If true, other elements will be hidden by `display: none`
*/
fullContent?: boolean;
}
/**
* footer config
*/
/** Footer config */
export interface AdminLayoutFooterConfig {
/**
* whether footer is visible
* Whether footer is visible
*
* @default true
*/
footerVisible?: boolean;
/**
* whether footer is fixed
* Whether footer is fixed
*
* @default true
*/
fixedFooter?: boolean;
/**
* footer class
* Footer class
*
* @default ''
*/
footerClass?: string;
/**
* footer height
* Footer height
*
* @default 48px
*/
footerHeight?: number;
/**
* whether footer is on the right side
* @description when the layout is vertical, the footer is on the right side
* Whether footer is on the right side
*
* When the layout is vertical, the footer is on the right side
*/
rightFooter?: boolean;
}
/**
* layout mode
* - horizontal
* - vertical
* Layout mode
*
* - Horizontal
* - Vertical
*/
export type LayoutMode = 'horizontal' | 'vertical';
/**
* the scroll mode when content overflow
* - wrapper: the layout component's wrapper element has a scrollbar
* - content: the layout component's content element has a scrollbar
* The scroll mode when content overflow
*
* - Wrapper: the layout component's wrapper element has a scrollbar
* - Content: the layout component's content element has a scrollbar
*
* @default 'wrapper'
*/
export type LayoutScrollMode = 'wrapper' | 'content';
/**
* admin layout props
*/
/** Admin layout props */
export interface AdminLayoutProps
extends AdminLayoutHeaderConfig,
AdminLayoutTabConfig,
@ -148,52 +158,58 @@ export interface AdminLayoutProps
AdminLayoutContentConfig,
AdminLayoutFooterConfig {
/**
* layout mode
* Layout mode
*
* - {@link LayoutMode}
*/
mode?: LayoutMode;
/** is mobile layout */
/** Is mobile layout */
isMobile?: boolean;
/**
* scroll mode
* Scroll mode
*
* - {@link ScrollMode}
*/
scrollMode?: LayoutScrollMode;
/**
* the id of the scroll element of the layout
* @description it can be used to get the corresponding Dom and scroll it
* The id of the scroll element of the layout
*
* It can be used to get the corresponding Dom and scroll it
*
* @example
* use the default id by import
* ```ts
* import { adminLayoutScrollElId } from '@sa/vue-materials';
* ```
*
* @default
* ```ts
* const adminLayoutScrollElId = '__ADMIN_LAYOUT_SCROLL_EL_ID__'
* ```
* @example use the default id by import
* ```ts
* import { adminLayoutScrollElId } from '@sa/vue-materials';
* ```
*/
scrollElId?: string;
/**
* the class of the scroll element
*/
/** The class of the scroll element */
scrollElClass?: string;
/**
* the class of the scroll wrapper element
*/
/** The class of the scroll wrapper element */
scrollWrapperClass?: string;
/**
* the common class of the layout
* @description is can be used to configure the transition animation
* The common class of the layout
*
* Is can be used to configure the transition animation
*
* @default 'transition-all-300'
*/
commonClass?: string;
/**
* whether fix the header and tab
* Whether fix the header and tab
*
* @default true
*/
fixedTop?: boolean;
/**
* the max z-index of the layout
* @description the z-index of Header,Tab,Sider and Footer will not exceed this value
* The max z-index of the layout
*
* The z-index of Header,Tab,Sider and Footer will not exceed this value
*/
maxZIndex?: number;
}
@ -222,48 +238,44 @@ export type LayoutCssVars = {
};
/**
* the mode of the tab
* - button: button style
* - chrome: chrome style
* The mode of the tab
*
* - Button: button style
* - Chrome: chrome style
*
* @default chrome
*/
export type PageTabMode = 'button' | 'chrome';
export interface PageTabProps {
/**
* whether is dark mode
*/
/** Whether is dark mode */
darkMode?: boolean;
/**
* the mode of the tab
* The mode of the tab
*
* - {@link TabMode}
*/
mode?: PageTabMode;
/**
* the common class of the layout
* @description is can be used to configure the transition animation
* The common class of the layout
*
* Is can be used to configure the transition animation
*
* @default 'transition-all-300'
*/
commonClass?: string;
/**
* the class of the button tab
*/
/** The class of the button tab */
buttonClass?: string;
/**
* the class of the chrome tab
*/
/** The class of the chrome tab */
chromeClass?: string;
/**
* whether the tab is active
*/
/** Whether the tab is active */
active?: boolean;
/**
* the color of the active tab
*/
/** The color of the active tab */
activeColor?: string;
/**
* whether the tab is closable
* @description show the close icon when true
* Whether the tab is closable
*
* Show the close icon when true
*/
closable?: boolean;
}