core component

SDKTabs

Reusable sdktabs component.

@wrnexus/ui 0.2.674 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SDKTabs
  label="SDK languages"
  tabs="[]"
  defaultIndex="0"
/>

Legacy mount name: data-component="SDKTabs".

Props and attributes

Prop	Type	Requirement	Default
`label`	`string`	Optional	`"SDK languages"`
`tabs`	`string`	Optional	`[]`
`defaultIndex`	`number`	Optional	`0`
`class`	`string`	Optional	`""`

Slots

This component does not declare a slot.

Events

click

Source contract

Installed source: components/SDKTabs.wrn

component SDKTabs {
  props {
    label = "SDK languages"
    tabs = []
    defaultIndex = 0
    class = ""
  }
  state active = defaultIndex
  view {
        <section class="wire-sdk-tabs {class}">
        <div role="tablist" aria-label="{label}" class="wire-tabs">{#each tabs as tab, index}<button type="button" role="tab" aria-selected="{active === index}" class="wire-tab" @click="active = index">{tab.label}</button>{/each}</div>{#each tabs as tab, index}<div role="tabpanel" data-show="active === index" class="wire-sdk-tabs__panel">
        <pre>
        <code>{tab.code}</code>
        </pre>
        </div>{/each}</section>
    }
}