sveltestrap icon indicating copy to clipboard operation
sveltestrap copied to clipboard

How do justify tab pane in sveltestrap

Open maulana020716 opened this issue 2 years ago • 1 comments

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

maulana020716 avatar Dec 29 '22 10:12 maulana020716

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;
}

remcoder avatar Jul 17 '23 15:07 remcoder