Open cs-clarence opened 10 months ago
Workaround:
// get the ref of your Tabs.Root
let root: HTMLDivElement;
onMount(() => {
const list = root!.querySelector<HTMLElement>(
".tabs__list",
)!;
const indicator = root!.querySelector<HTMLElement>(
".tabs__indicator",
)!;
const handleResize: ResizeObserverCallback = debounce(() => {
const selected = root!.querySelector<HTMLElement>(
`.tabs__item[data-selected]`,
)!;
indicator.style.width = `${selected.clientWidth}px`;
indicator.style.transform = `translateX(${selected.offsetLeft}px)`;
}, 100);
const ro = new ResizeObserver(handleResize);
ro.observe(list);
return () => {
ro.unobserve(list);
};
});
Describe the bug A clear and concise description of what the bug is.
To Reproduce Steps to reproduce the behavior:
Expected behavior The tab indicator should follow the tab item above it when resizing the window