Pular para o conteúdo
Starlight
Filters

    Tabs

    Este conteúdo não está disponível em sua língua ainda.

    To create a tabbed interface use the <Tabs> and <TabItem> components. Tabs are useful for grouping equivalent information where a user only needs to see one of several options.

    Preview
    Sirius, Vega, Betelgeuse

    Import

    Section titled “Import”
    import { Tabs, TabItem } from '@astrojs/starlight/components';

    Usage

    Section titled “Usage”

    Display a tabbed interface using the <Tabs> and <TabItem> components. Each <TabItem> must have a label to display to users.

    import { Tabs, TabItem } from '@astrojs/starlight/components';
    

    <Tabs>
      <TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
      <TabItem label="Moons">Io, Europa, Ganymede</TabItem>
    </Tabs>
    Preview
    Sirius, Vega, Betelgeuse

    Sync tabs

    Section titled “Sync tabs”

    Keep multiple tab groups synchronized by adding the syncKey attribute.

    All <Tabs> on a page with the same syncKey value will display the same active label. This allows your reader to choose once (e.g. their operating system or package manager), and see their choice persisted across page navigations.

    To synchronize related tabs, add an identical syncKey property to each <Tabs> component and ensure that they all use the same <TabItem> labels:

    import { Tabs, TabItem } from '@astrojs/starlight/components';
    

    _Some stars:_
    

    <Tabs syncKey="constellations">
      <TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>
      <TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem>
    </Tabs>
    

    _Some exoplanets:_
    

    <Tabs syncKey="constellations">
      <TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
      <TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
    </Tabs>
    Preview

    Some stars:

    Bellatrix, Rigel, Betelgeuse

    Some exoplanets:

    HD 34445 b, Gliese 179 b, Wasp-82 b

    Add icons to tabs

    Section titled “Add icons to tabs”

    Include an icon in a tab item using the icon attribute set to the name of one of Starlight’s built-in icons to display an icon next to the label.

    import { Tabs, TabItem } from '@astrojs/starlight/components';
    

    <Tabs>
      <TabItem label="Stars" icon="star">
        Sirius, Vega, Betelgeuse
      </TabItem>
      <TabItem label="Moons" icon="moon">
        Io, Europa, Ganymede
      </TabItem>
    </Tabs>
    Preview

    Sirius, Vega, Betelgeuse

    <Tabs> Props

    Section titled “<Tabs> Props”

    Implementation: Tabs.astro

    The <Tabs> component groups multiple <TabItem> components together and accepts the following props:

    syncKey

    Section titled “syncKey”

    type: string

    A key used to keep multiple tab groups synchronized across multiple pages.

    <TabItem> Props

    Section titled “<TabItem> Props”

    Implementation: TabItem.astro

    A set of tabs is composed of tab items, each with the following props:

    label

    Section titled “label”

    required
    type: string

    A tab item must include a label attribute set to the text that will be displayed in the tab.

    icon

    Section titled “icon”

    type: string

    Each tab item can include an icon attribute set to the name of one of Starlight’s built-in icons to display an icon next to the label.