Explorer

Palette

Collapsible

Headline

Usage

Svelte

<Explorer palette="tone">
    <ExplorerGroup label="Getting started">
        {#snippet icon()}
            <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 icon()}
            <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`
icon	`Snippet`	`undefined`
collapsible	`boolean`	`true`
headline	`boolean`	`true`
open	`boolean`	`true`
children	`Snippet`	`required`

Prop label

Type string

Default required

Prop icon

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`
icon	`Snippet`	`undefined`
active	`boolean`	`false`
naked	`boolean`	`false`
onclick	`() => void`	`undefined`

Prop label

Type string

Default required

Prop href

Type string

Default undefined

Prop icon

Type Snippet

Default undefined

Prop active

Type boolean

Default false

Prop naked

Type boolean

Default false

Prop onclick

Type () => void

Default undefined