Explorer

Palette

Collapsible

Headline

Naked

Usage

Svelte

<Explorer palette="tone">
    <ExplorerGroup label="Getting started">
        {#snippet leading()}
            <span class="material-symbols-outlined">rocket_launch</span>
        {/snippet}

        <ExplorerLink label="Install" href="/docs/install" />
        <ExplorerLink label="Themes" href="/docs/themes" active />
        <ExplorerLink label="Tokens" href="/docs/tokens" />
    </ExplorerGroup>

    <ExplorerGroup label="Components">
        {#snippet leading()}
            <span class="material-symbols-outlined">widgets</span>
        {/snippet}

        <ExplorerLink label="Button" href="/docs/button" />
        <ExplorerLink label="Card" href="/docs/card" />
        <ExplorerLink label="Modal" href="/docs/modal" />
    </ExplorerGroup>
</Explorer> 

API

Explorer

Prop	Type	Default
palette	`"accent" \| "tone"`	`"tone"`
aria_label	`string`	`"Explorer"`
children	`Snippet`	`required`

Prop palette

Type "accent" | "tone"

Default "tone"

Prop aria_label

Type string

Default "Explorer"

Prop children

Type Snippet

Default required

ExplorerGroup

Prop	Type	Default
label	`string`	`required`
leading	`Snippet`	`undefined`
collapsible	`boolean`	`true`
headline	`boolean`	`true`
open	`boolean`	`true`
children	`Snippet`	`required`

Prop label

Type string

Default required

Prop leading

Type Snippet

Default undefined

Prop collapsible

Type boolean

Default true

Prop headline

Type boolean

Default true

Prop open

Type boolean

Default true

Prop children

Type Snippet

Default required

ExplorerLink

Prop	Type	Default
label	`string`	`required`
href	`string`	`undefined`
leading	`Snippet`	`undefined`
active	`boolean`	`false`
naked	`boolean`	`false`
onclick	`() => void`	`undefined`

Prop label

Type string

Default required

Prop href

Type string

Default undefined

Prop leading

Type Snippet

Default undefined

Prop active

Type boolean

Default false

Prop naked

Type boolean

Default false

Prop onclick

Type () => void

Default undefined