vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored TabMenu

pull/5677/head
Cagatay Civici 2024-04-09 17:03:17 +03:00
parent 2e57ae9a6e
commit 014dc680f0
2 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/lib/tabmenu/style/TabMenuStyle.js
View File

@ -2,17 +2,17 @@ import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: 'p-tabmenu p-component', root: 'p-tabmenu p-component',
menu: 'p-tabmenu-nav p-reset', menu: 'p-tabmenu-tablist',
menuitem: ({ instance, index, item }) => [ menuitem: ({ instance, index, item }) => [
'p-tabmenuitem', 'p-tabmenu-item',
{ {
'p-highlight': instance.d_activeIndex === index, 'p-tabmenu-item-active': instance.d_activeIndex === index,
'p-disabled': instance.disabled(item) 'p-disabled': instance.disabled(item)
} }
], ],
action: 'p-menuitem-link', action: 'p-tabmenu-item-link',
icon: 'p-menuitem-icon', icon: 'p-tabmenu-item-icon',
label: 'p-menuitem-text', label: 'p-tabmenu-item-label',
inkbar: 'p-tabmenu-ink-bar' inkbar: 'p-tabmenu-ink-bar'
}; };

15
components/lib/themes/primeone/base/tabmenu/index.js
View File

@ -4,7 +4,7 @@ export default {
overflow-x: auto; overflow-x: auto;
} }
.p-tabmenu-nav { .p-tabmenu-tablist {
display: flex; display: flex;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -16,7 +16,7 @@ export default {
position: relative; position: relative;
} }
.p-tabmenuitem .p-menuitem-link { .p-tabmenu-item-link {
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
display: flex; display: flex;
@ -37,24 +37,23 @@ export default {
outline-color: transparent; outline-color: transparent;
} }
.p-tabmenuitem .p-menuitem-link:focus-visible { .p-tabmenu-item-link:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -1px; outline-offset: -1px;
} }
.p-tabmenuitem .p-menuitem-icon { .p-tabmenu-item-icon {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.p-tabmenu-nav .p-menuitem-text { .p-tabmenu-item-label {
line-height: 1; line-height: 1;
} }
.p-tabmenu-item:not(.p-tabmenu-item-active):not(.p-disabled):hover .p-tabmenu-item-link {
.p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
color: ${dt('tabmenu.header.hover.color')}; color: ${dt('tabmenu.header.hover.color')};
} }
.p-tabmenuitem.p-highlight .p-menuitem-link { .p-tabmenu-item-active .p-tabmenu-item-link {
color: ${dt('tabmenu.header.active.border.color')}; color: ${dt('tabmenu.header.active.border.color')};
} }