Tabs

Basic

Do you want some apples? 
<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>
<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>
svelte
Click fold/expand code

Custom icon

Do you want some apples? 
<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>
<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>
svelte
Click fold/expand code

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

No data

CTabs Slots

  • default

    It is recommended to use CTabItem

CTabs Exports

  • tabsKey
    any
  • activeTabNameKey
    any

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

No data

CTabItem Slots

  • default

CTabItem Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 13:04:55