mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
52 lines
1.6 KiB
Plaintext
52 lines
1.6 KiB
Plaintext
---
|
|
// 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">
|
|
<h2 class="card-title">${tab}</h2>
|
|
<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>
|