vira 31.7.4 → 31.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -76,6 +76,8 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
|
|
|
76
76
|
menuIsDisabled: boolean;
|
|
77
77
|
/** Offset for the dropdown pop-up. Only used when tabs overflow into a dropdown. */
|
|
78
78
|
menuPopUpOffset: Readonly<PopUpOffset>;
|
|
79
|
+
/** When true, tabs and their container expand to fill all available horizontal space. */
|
|
80
|
+
shouldFillWidth: boolean;
|
|
79
81
|
}>, {
|
|
80
82
|
isOverflowing: boolean;
|
|
81
83
|
/** A callback to remove all internal observers. */
|
|
@@ -83,4 +85,4 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
|
|
|
83
85
|
}, {
|
|
84
86
|
/** Fires when a tab is clicked with the corresponding tab entry. */
|
|
85
87
|
tabSelect: import("element-vir").DefineEvent<Readonly<ViraTab>>;
|
|
86
|
-
}, "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right" | "vira-tabs-color-accent" | "vira-tabs-color-plain" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-overflowing", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;
|
|
88
|
+
}, "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right" | "vira-tabs-color-accent" | "vira-tabs-color-plain" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-overflowing" | "vira-tabs-fill-width", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;
|
|
@@ -66,6 +66,7 @@ export const ViraTabs = defineViraElement()({
|
|
|
66
66
|
'vira-tabs-icon-layout-vertical': ({ inputs }) => !inputs.iconLayout || inputs.iconLayout === ViraTabsIconLayout.Vertical,
|
|
67
67
|
'vira-tabs-icon-layout-horizontal': ({ inputs }) => inputs.iconLayout === ViraTabsIconLayout.Horizontal,
|
|
68
68
|
'vira-tabs-overflowing': ({ state }) => state.isOverflowing,
|
|
69
|
+
'vira-tabs-fill-width': ({ inputs }) => !!inputs.shouldFillWidth,
|
|
69
70
|
},
|
|
70
71
|
cssVars: {
|
|
71
72
|
'vira-tabs-active-color': viraFormCssVars['vira-form-accent-primary-color'].value,
|
|
@@ -129,6 +130,8 @@ export const ViraTabs = defineViraElement()({
|
|
|
129
130
|
|
|
130
131
|
&:hover {
|
|
131
132
|
color: ${cssVars['vira-tabs-inactive-hover-color'].value};
|
|
133
|
+
background-color: ${viraTheme.colors['vira-grey-on-self-small-body'].background
|
|
134
|
+
.value};
|
|
132
135
|
}
|
|
133
136
|
|
|
134
137
|
&.selected {
|
|
@@ -241,6 +244,21 @@ export const ViraTabs = defineViraElement()({
|
|
|
241
244
|
width: fit-content;
|
|
242
245
|
}
|
|
243
246
|
|
|
247
|
+
${hostClasses['vira-tabs-fill-width'].selector} {
|
|
248
|
+
& .tabs-container {
|
|
249
|
+
flex-grow: 1;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
& li {
|
|
253
|
+
flex-grow: 1;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
& .tabs-container ${ViraLink} {
|
|
257
|
+
flex-grow: 1;
|
|
258
|
+
justify-content: center;
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
244
262
|
${ViraLink} {
|
|
245
263
|
text-decoration: none;
|
|
246
264
|
}
|