fix(Tabs): truncate buttons content

Resolves #796
This commit is contained in:
Benjamin Canac
2023-10-12 14:37:38 +02:00
parent 3697dbeda2
commit ddbb431953
2 changed files with 2 additions and 2 deletions

View File

@@ -26,7 +26,7 @@
>
<button :class="[ui.list.tab.base, ui.list.tab.background, ui.list.tab.height, ui.list.tab.padding, ui.list.tab.size, ui.list.tab.font, ui.list.tab.rounded, ui.list.tab.shadow, selected ? ui.list.tab.active : ui.list.tab.inactive]">
<slot :item="item" :index="index" :selected="selected" :disabled="disabled">
{{ item.label }}
<span class="truncate">{{ item.label }}</span>
</slot>
</button>
</HTab>

View File

@@ -894,7 +894,7 @@ export const tabs = {
shadow: 'shadow-sm'
},
tab: {
base: 'relative inline-flex items-center justify-center flex-shrink-0 w-full whitespace-nowrap ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out',
base: 'relative inline-flex items-center justify-center flex-shrink-0 w-full ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out',
background: '',
active: 'text-gray-900 dark:text-white',
inactive: 'text-gray-500 dark:text-gray-400',