Как реализовать компонент Tabs?

Middle
246 просмотров
AFK Offer AI

Структура: TabList (кнопки) + TabPanels (контент). Активная вкладка по state/index. Accessibility: role="tablist" на контейнере, role="tab" на кнопках, role="tabpanel" на панелях. aria-selected на активном табе. aria-controls/aria-labelledby связывают таб и панель. Keyboard: ArrowLeft/Right переключают табы, Home/End — первый/последний. Два подхода: все панели в DOM (display:none для скрытых) или рендер только активной. Первый лучше для SEO и сохранения состояния. Lazy loading тяжёлых панелей.

Следующий вопрос

Что такое dynamic import?