sveltestrap
sveltestrap copied to clipboard
How do justify tab pane in sveltestrap
So I have tabs with three element
<script>
import { TabContent, TabPane } from 'sveltestrap';
</script>
<TabContent>
<TabPane tabId="alpha" tab="Alpha" active>
<h2>Alpha</h2>
</TabPane>
<TabPane tabId="bravo" tab="Bravo">
<h2>Bravo</h2>
</TabPane>
<TabPane tabId="charlie" tab="Charlie">
<h2>Charlie</h2>
</TabPane>
</TabContent>
The problem is it defaults the tab alignment to left, how do I set it to justify, I tried adding nav-justified class in TabPane but it doesn't work
<TabPane class="nav-justified" tabId="alpha" tab="Proses" active>
Last resort would be to have native html tag with bootstrap class to do it, but I was wondering if it was possible with sveltestrap
Setting a class prop on a TabPane just seems to disappear. If you set a class name on TabContent you can do it but you'll also need to create your own css for it:
<TabContent class="justify-tab-content-end">
...
:global(.justify-tab-content-end > .nav-tabs) {
justify-content: flex-end;
}