40 lines
1.2 KiB
Django/Jinja
40 lines
1.2 KiB
Django/Jinja
{#css ui/Tabs/Tabs.css #}
|
|
|
|
<div class="bg-cover"
|
|
style="background-image:linear-gradient(to right, rgba(56,189,248, 0.3), rgba(37,99,235, 0.3))"
|
|
data-md-skip
|
|
></div>
|
|
|
|
<div class="horizontal-tabs" data-md-skip>
|
|
<TabGroup>
|
|
<TabSelect>
|
|
<TabOption target="select-recent">Recent</TabOption>
|
|
<TabOption target="select-popular">Popular</TabOption>
|
|
<TabOption target="select-disabled" disabled>Disabled</TabOption>
|
|
<TabOption target="select-trending">Trending</TabOption>
|
|
</TabSelect>
|
|
|
|
<TabList>
|
|
<Tab target="select-recent">Recent</Tab>
|
|
<Tab target="select-popular" selected>Popular</Tab>
|
|
<Tab target="select-disabled" disabled>Disabled</Tab>
|
|
<Tab target="select-trending">Trending</Tab>
|
|
</TabList>
|
|
|
|
<TabPanel id="select-recent">
|
|
<p>This is the tab panel for <b>"Recent"</b>.</p>
|
|
</TabPanel>
|
|
|
|
<TabPanel id="select-popular" hidden>
|
|
<p>This is the tab panel for <b>"Popular"</b>.</p>
|
|
</TabPanel>
|
|
|
|
<TabPanel id="select-disabled" hidden>
|
|
<p>This is the tab panel for "Disabled".</p>
|
|
</TabPanel>
|
|
|
|
<TabPanel id="select-trending" hidden>
|
|
<p>This is the tab panel for <b>"Trending"</b>.</p>
|
|
</TabPanel>
|
|
</TabGroup>
|
|
</div>
|