Tabs

Basic

<script>
  let activeName = 'Apple'
</script>
<CTabs bind:activeName>
  <CTabItem name="Apple">
    <div class="i-openmoji-red-apple text-[100px]" />
      Do you want some apples?
  </CTabItem>
  <CTabItem name="Banana">
    <div class="i-openmoji-banana text-[100px]" />
      Do you want some banana?
  </CTabItem>
  <CTabItem name="Grapes">
    <div class="i-openmoji-grapes text-[100px]" />
      How about some grapes?
  </CTabItem>
</CTabs>

Custom icon

<script>
  import BananaIcon from '/src/routes/features/components/interact/tabs/BananaIcon.svelte'

  let activeName = 'Apple'
</script>
<CTabs bind:activeName>
  <CTabItem name="Apple">
    <div class="i-openmoji-red-apple text-[100px]" />
      Do you want some apples?
  </CTabItem>
  <CTabItem name="Banana" icon={BananaIcon}>
    <div class="i-openmoji-banana text-[100px]" />
      Do you want some banana?
  </CTabItem>
  <CTabItem name="Grapes">
    <div class="i-openmoji-grapes text-[100px]" />
      How about some grapes?
  </CTabItem>
</CTabs>

CTabs Props

• activeName

  string

  default:

  The current active tab name

• size

  'xs' | 'sm' | 'md' | 'lg' | 'xl'=

  default: undefined

  The size of tabs. Notice that the default value is 'md' instead of undefined

• panelPadding

  boolean

  default: true

  Determien whether the panel body has a padding or not.

• bodyStyle

  string

  default:

  Customize the body style.

CTabs Events

CTabs Slots

• default

  It is recommended to use CTabItem

CTabs Exports

CTabItem Props

• name

  string

  default: undefined

  The unique name of tab item

• title

  string

  default: undefined

  The tab title. Would use name prop if not provided

• icon

  SvelteComponent

  default: undefined

  The custom icon component

CTabItem Events

CTabItem Slots

CTabItem Exports