pages._explore-components-structural-accordion.title

pages._explore.sections.basic-usage.title

html

<Accordion label="Basic Accordion">
    <div class="p-4">
        <Text text="This is the content inside the accordion." />
    </div>
</Accordion>

typescript

<script setup lang="ts">

</script>

pages._explore.sections.complex-usage.title

Email Notifications

Push Notifications

Privacy Mode

html

<div class="space-y-4">
    <Accordion 
        label="User Settings"
        icon="solar:settings-bold"
        :initial-state="true"
        tooltip="Click to toggle user settings"
        :font-size="16"
        :font-weight="600"
        :icon-size="24"
    >
        <div class="p-6 space-y-4">
            <div class="space-y-2">
                <Text text="Email Notifications" :weight="TextWeights.MEDIUM" />
                <Toggle v-model="emailNotifications" />
            </div>
            <div class="space-y-2">
                <Text text="Push Notifications" :weight="TextWeights.MEDIUM" />
                <Toggle v-model="pushNotifications" />
            </div>
            <div class="space-y-2">
                <Text text="Privacy Mode" :weight="TextWeights.MEDIUM" />
                <Toggle v-model="privacyMode" />
            </div>
        </div>
    </Accordion>

    <Accordion 
        label="Advanced Options"
        icon="solar:widget-bold"
        tooltip="Advanced configuration options"
    >
        <div class="p-6 space-y-4">
            <Input 
                v-model="apiEndpoint" 
                label="API Endpoint" 
                placeholder="https://api.example.com" 
            />
            <Input 
                v-model="timeout" 
                label="Request Timeout (ms)" 
                placeholder="5000" 
                type="number" 
            />
            <div class="flex gap-2">
                <BaseButton 
                    text="Test Connection" 
                    :color="BaseButtonColors.PRIMARY" 
                />
                <BaseButton 
                    text="Reset to Defaults" 
                    :color="BaseButtonColors.SURFACE_RAISED" 
                />
            </div>
        </div>
    </Accordion>

    <Accordion 
        label="Help & Documentation"
        icon="solar:question-circle-bold"
    >
        <div class="p-6">
            <Text 
                text="Find answers to common questions and detailed documentation." 
                class="mb-4" 
            />
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <Text 
                        text="Quick Start Guide" 
                        :weight="TextWeights.MEDIUM" 
                        class="mb-2" 
                    />
                    <Text 
                        text="Get started with the basics in just a few minutes." 
                        :color="TextColors.MUTED" 
                        :size="TextSizes.SM" 
                    />
                </div>
                <div>
                    <Text 
                        text="API Reference" 
                        :weight="TextWeights.MEDIUM" 
                        class="mb-2" 
                    />
                    <Text 
                        text="Complete documentation for all available APIs." 
                        :color="TextColors.MUTED" 
                        :size="TextSizes.SM" 
                    />
                </div>
            </div>
        </div>
    </Accordion>
</div>

typescript

<script setup lang="ts">
import { BaseButtonColors } from '#core-types/components/base/base-button'
import { TextWeights, TextColors, TextSizes } from '#core-types/components/presentational/text'

const emailNotifications = ref(true)
const pushNotifications = ref(false)
const privacyMode = ref(false)
const apiEndpoint = ref('https://api.example.com')
const timeout = ref('5000')
</script>

pages._explore.sections.props.title

Prop	Default	Type
itemKey	undefined	string
icon	undefined	string
label	undefined	string
initialState	false	boolean
tooltip	undefined	string
tooltipOffset	10	number
fontSize	14	number
fontWeight	500	number
iconSize	22	number

pages._explore.sections.types.title

Name	Type	Options
AccordionProps	interface	Main props interface for Accordion component

pages._explore.sections.slots.title

Slot	Type
default	Content to be displayed when accordion is expanded