pages._explore-components-structural-layout.title

pages._explore.sections.basic-usage.title

Header Navigation

Main content areaThis is where your page content goes.

html

<Layout :type="LayoutTypes.VERTICAL">
    <template #navigation>
        <div class="bg-primary text-white p-4">
            <Text text="Header Navigation" :weight="TextWeights.BOLD" />
        </div>
    </template>
    <div class="p-6">
        <Text text="Main content area" />
        <Text text="This is where your page content goes." />
    </div>
</Layout>

typescript

<script setup lang="ts">
import { LayoutTypes } from '#core-types/components/structural/layout'
import { TextWeights } from '#core-types/components/presentational/text'
</script>

pages._explore.sections.complex-usage.title

My Application

Layout Component Demo

Vertical LayoutNavigation appears at the top of the page, main content flows below.

Horizontal LayoutNavigation appears as a fixed sidebar on the left, main content fills the remaining space.

Sample Page ContentThis is sample content paragraph 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.This is sample content paragraph 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.This is sample content paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.This is sample content paragraph 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.This is sample content paragraph 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.This is sample content paragraph 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.This is sample content paragraph 7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.This is sample content paragraph 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.This is sample content paragraph 9. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.This is sample content paragraph 10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

html

<div class="h-96 border border-gray-300 rounded overflow-hidden">
    <Layout :type="layoutType">
        <template #navigation>
            <div v-if="layoutType === LayoutTypes.VERTICAL" class="bg-primary text-white p-4 flex items-center justify-between">
                <Text text="My Application" :weight="TextWeights.BOLD" />
            </div>
            <Sidebar 
                v-else
                :nav-items="sidebarNavItems"
                :active-item="activeSidebarItem"
                @item-clicked="fnHandleSidebarClick"
            />
        </template>
        
        <Content :scrollbar="true">
            <div class="p-6 space-y-6">
                <div>
                    <Text 
                        text="Layout Component Demo" 
                        :size="TextSizes.XL2" 
                        :weight="TextWeights.BOLD" 
                        class="mb-4" 
                    />
                    <Text 
                        text="This demonstrates both vertical and horizontal layout types. Switch between them using the buttons above." 
                        :color="TextColors.MUTED"
                        class="mb-6"
                    />
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="p-4 border rounded">
                        <Text 
                            text="Vertical Layout" 
                            :weight="TextWeights.BOLD" 
                            class="mb-2" 
                        />
                        <Text 
                            text="Navigation appears at the top of the page, main content flows below." 
                            :size="TextSizes.SM" 
                        />
                    </div>
                    <div class="p-4 border rounded">
                        <Text 
                            text="Horizontal Layout" 
                            :weight="TextWeights.BOLD" 
                            class="mb-2" 
                        />
                        <Text 
                            text="Navigation appears as a fixed sidebar on the left, main content fills the remaining space." 
                            :size="TextSizes.SM" 
                        />
                    </div>
                </div>

                <div class="space-y-4">
                    <Text 
                        text="Sample Page Content" 
                        :size="TextSizes.LG" 
                        :weight="TextWeights.BOLD" 
                    />
                    <Text 
                        v-for="i in 10" 
                        :key="i"
                        :text="`This is sample content paragraph ${i}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`"
                        class="mb-3"
                    />
                </div>
            </div>
        </Content>
    </Layout>
</div>

typescript

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

const layoutType = ref(LayoutTypes.VERTICAL)
const activeSidebarItem = ref('dashboard')

const sidebarNavItems = ref([
    { id: 'dashboard', icon: 'solar:home-bold', label: 'Dashboard' },
    { id: 'users', icon: 'solar:users-group-two-rounded-bold', label: 'Users' },
    { id: 'settings', icon: 'solar:settings-bold', label: 'Settings' },
    { id: 'help', icon: 'solar:question-circle-bold', label: 'Help' }
])

const fnHandleSidebarClick = (item) => {
    activeSidebarItem.value = item.id
}
</script>

pages._explore.sections.props.title

Prop	Default	Type
type	LayoutTypes.HORIZONTAL	LayoutTypes

pages._explore.sections.types.title

Name	Type	Options
LayoutTypes	enum	HORIZONTAL \| VERTICAL
LayoutProps	interface	Main props interface for Layout component

pages._explore.sections.slots.title

Slot	Type
navigation	Navigation content (header or sidebar)
default	Main page content