diff --git a/projects/demo/src/modules/components/segmented/examples/3/index.html b/projects/demo/src/modules/components/segmented/examples/3/index.html
index 0989662dea18..b3ea7a56f3ce 100644
--- a/projects/demo/src/modules/components/segmented/examples/3/index.html
+++ b/projects/demo/src/modules/components/segmented/examples/3/index.html
@@ -18,7 +18,10 @@
-
+
diff --git a/projects/kit/components/segmented/segmented.component.ts b/projects/kit/components/segmented/segmented.component.ts
index e0e95a9642fe..3cc6bdd40a26 100644
--- a/projects/kit/components/segmented/segmented.component.ts
+++ b/projects/kit/components/segmented/segmented.component.ts
@@ -61,23 +61,21 @@ export class TuiSegmented implements OnChanges {
this.refresh();
}
- private get left(): number {
- const element = this.activeElement;
-
- return tuiIsHTMLElement(element) ? element.offsetLeft : 0;
- }
-
- private get width(): number {
- return this.activeElement?.clientWidth || 0;
- }
-
private get activeElement(): Element | null {
return this.el.children.item(this.activeItemIndex);
}
- // TODO: Switch to HostBinding signals in Angular 17+
private refresh(): void {
- this.el.style.setProperty('--t-left', tuiPx(this.left));
- this.el.style.setProperty('--t-width', tuiPx(this.width));
+ const el = this.activeElement;
+
+ if (!tuiIsHTMLElement(el)) {
+ return;
+ }
+
+ const {clientWidth = 0, offsetLeft = 0, offsetTop = 0} = el;
+
+ this.el.style.setProperty('--t-top', tuiPx(offsetTop));
+ this.el.style.setProperty('--t-left', tuiPx(offsetLeft));
+ this.el.style.setProperty('--t-width', tuiPx(clientWidth));
}
}
diff --git a/projects/kit/components/segmented/segmented.style.less b/projects/kit/components/segmented/segmented.style.less
index 3fcf549d8d0b..fea6da3ba07b 100644
--- a/projects/kit/components/segmented/segmented.style.less
+++ b/projects/kit/components/segmented/segmented.style.less
@@ -12,13 +12,13 @@ tui-segmented {
--t-padding: 0.625rem;
--t-gap: 0.5rem;
--t-margin: -0.125rem;
+ --t-height: var(--tui-height-s);
- block-size: var(--tui-height-s);
font: var(--tui-font-text-s);
border-radius: var(--tui-radius-s);
- & > *::before,
- & > *::after,
+ > *::before,
+ > *::after,
tui-icon {
font-size: 1rem;
}
@@ -28,8 +28,8 @@ tui-segmented {
--t-padding: 0.875rem;
--t-gap: 1rem;
--t-margin: -0.375rem;
+ --t-height: var(--tui-height-m);
- block-size: var(--tui-height-m);
font: var(--tui-font-text-m);
border-radius: var(--tui-radius-s);
}
@@ -38,8 +38,8 @@ tui-segmented {
--t-padding: 1.125rem;
--t-gap: 1rem;
--t-margin: -0.375rem;
+ --t-height: var(--tui-height-l);
- block-size: var(--tui-height-l);
font: var(--tui-font-text-l);
border-radius: var(--tui-radius-m);
border-width: 0.25rem;
@@ -60,6 +60,7 @@ tui-segmented {
display: flex;
align-items: center;
justify-content: center;
+ block-size: var(--t-height);
white-space: nowrap;
gap: var(--t-gap);
margin: 0;
@@ -70,7 +71,7 @@ tui-segmented {
font: inherit;
border-radius: inherit;
- & > *,
+ > *,
&::before,
&::after {
margin: 0 var(--t-margin);
@@ -97,12 +98,13 @@ tui-segmented {
}
&::before {
- .transition(~'left, width');
+ .transition(~'top, left, width');
content: '';
position: absolute;
left: var(--t-left);
- block-size: 100%;
+ top: var(--t-top);
+ block-size: var(--t-height);
inline-size: var(--t-width);
border-radius: inherit;
background: currentColor;