/
githubmirror
/
tabler
Обзор
Документация
Войти
/
githubmirror
/
tabler
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
dev
shared/components/cards/CardTabs.astro
51 строка
2 KB
Paweł Kuna
Narrow component prop types, remove unused props and dead code (#2838)
10 авг 2026, 00:14
Не верифицирован
10 авг 2026, 00:14
4f7beec
Код
Авторство
О чём код?
--- // Tabs/content blocks are HTML strings (different order when `bottom`). interface Props { id?: string bottom?: boolean } const { id = 'top', bottom } = Astro.props const tabs = ['Activity', 'Profile', 'Settings'] const tabsHtml = ` <!-- Cards navigation --> <ul class="nav nav-tabs${bottom ? ' nav-tabs-bottom' : ''}" role="tablist"> ${tabs.map((tab, i) => ` <li class="nav-item" role="presentation"><a href="#tab-${id}-${i + 1}" id="tab-${id}-${i + 1}-tab" class="nav-link${i === 0 ? ' active' : ''}" data-bs-toggle="tab" data-bs-target="#tab-${id}-${i + 1}" role="tab" aria-controls="tab-${id}-${i + 1}" aria-selected="${i === 0 ? 'true' : 'false'}">${tab}</a></li>`).join('\n')} </ul>` const tabsContentHtml = ` <div class="tab-content"> ${tabs .map( (tab, i) => ` <!-- Content of card #${tab} --> <div id="tab-${id}-${i + 1}" class="card tab-pane${i === 0 ? ' active show' : ''}" role="tabpanel" aria-labelledby="tab-${id}-${i + 1}-tab"> <div class="card-body"> <h3 class="card-title">${tab}</h3> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p> </div> </div>`, ) .join('\n')} </div>` --- <!-- Cards with tabs component --> <div class="card-tabs"> { bottom ? ( <Fragment> <Fragment set:html={tabsContentHtml} /> <Fragment set:html={tabsHtml} /> </Fragment> ) : ( <Fragment> <Fragment set:html={tabsHtml} /> <Fragment set:html={tabsContentHtml} /> </Fragment> ) } </div>