center text label of tabbox tabs

This commit is contained in:
milan 2024-09-13 21:33:49 +02:00
parent 3107a10bdf
commit e5058b8715
3 changed files with 16 additions and 3 deletions

View File

@ -402,7 +402,10 @@ export class Et2Tabs extends Et2InputWidget(SlTabGroup) implements et2_IResizeab
}, this); }, this);
// Set tab label // Set tab label
tab.flagDiv.appendChild(document.createTextNode(tab.label)); const node = document.createElement("span")
node.appendChild(document.createTextNode(tab.label));
node.classList.add("tabLabel")
tab.flagDiv.appendChild(node);
if(tab.tabNode && tab.tabNode.children.length) if(tab.tabNode && tab.tabNode.children.length)
{ {

View File

@ -7181,6 +7181,12 @@ img.et2_button_icon[src*="svg"]:hover {
.sl-theme-dark et2-tabbox et2-tab[active]::part(base) { .sl-theme-dark et2-tabbox et2-tab[active]::part(base) {
border-color: var(--sl-color-neutral-900); border-color: var(--sl-color-neutral-900);
} }
:root et2-tabbox .tabLabel,
:host et2-tabbox .tabLabel,
.sl-theme-light et2-tabbox .tabLabel,
.sl-theme-dark et2-tabbox .tabLabel {
max-height: 1em;
}
:root et2-tabbox et2-tab-panel, :root et2-tabbox et2-tab-panel,
:host et2-tabbox et2-tab-panel, :host et2-tabbox et2-tab-panel,
.sl-theme-light et2-tabbox et2-tab-panel, .sl-theme-light et2-tabbox et2-tab-panel,

View File

@ -16,7 +16,6 @@
et2-tabbox { et2-tabbox {
--track-width: 0px; --track-width: 0px;
&::part(tabs) { &::part(tabs) {
padding-bottom: var(--sl-spacing-x-small); padding-bottom: var(--sl-spacing-x-small);
padding-top: var(--sl-spacing-medium); padding-top: var(--sl-spacing-medium);
@ -29,6 +28,8 @@
border-color: var(--sl-color-neutral-300); border-color: var(--sl-color-neutral-300);
border-radius: var(--sl-border-radius-pill); border-radius: var(--sl-border-radius-pill);
} }
} }
et2-tab[active] { et2-tab[active] {
@ -37,6 +38,9 @@
} }
} }
.tabLabel {
max-height: 1em;
}
et2-tab-panel{ et2-tab-panel{
border: 1px solid var(--sl-color-neutral-300); border: 1px solid var(--sl-color-neutral-300);
border-radius: var(--sl-border-radius-medium); border-radius: var(--sl-border-radius-medium);