显示侧边栏

页头

适用于你的应用的全宽顶部导航布局。

<head>    <!-- ... -->    @fluxAppearance</head><body class="min-h-screen bg-white dark:bg-zinc-800">    <flux:header container class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />        <flux:brand href="#" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc." class="max-lg:hidden dark:hidden" />        <flux:brand href="#" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc." class="max-lg:hidden! hidden dark:flex" />        <flux:navbar class="-mb-px max-lg:hidden">            <flux:navbar.item icon="home" href="#" current>Home</flux:navbar.item>            <flux:navbar.item icon="inbox" badge="12" href="#">Inbox</flux:navbar.item>            <flux:navbar.item icon="document-text" href="#">Documents</flux:navbar.item>            <flux:navbar.item icon="calendar" href="#">Calendar</flux:navbar.item>            <flux:separator vertical variant="subtle" class="my-2"/>            <flux:dropdown class="max-lg:hidden">                <flux:navbar.item icon:trailing="chevron-down">Favorites</flux:navbar.item>                <flux:navmenu>                    <flux:navmenu.item href="#">Marketing site</flux:navmenu.item>                    <flux:navmenu.item href="#">Android app</flux:navmenu.item>                    <flux:navmenu.item href="#">Brand guidelines</flux:navmenu.item>                </flux:navmenu>            </flux:dropdown>        </flux:navbar>        <flux:spacer />        <flux:navbar class="me-4">            <flux:navbar.item icon="magnifying-glass" href="#" label="Search" />            <flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="#" label="Settings" />            <flux:navbar.item class="max-lg:hidden" icon="information-circle" href="#" label="Help" />        </flux:navbar>        <flux:dropdown position="top" align="start">            <flux:profile avatar="https://fluxui.dev/img/demo/user.png" />            <flux:menu>                <flux:menu.radio.group>                    <flux:menu.radio checked>Olivia Martin</flux:menu.radio>                    <flux:menu.radio>Truly Delta</flux:menu.radio>                </flux:menu.radio.group>                <flux:menu.separator />                <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>            </flux:menu>        </flux:dropdown>    </flux:header>    <flux:sidebar sticky collapsible="mobile" class="lg:hidden bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700">        <flux:sidebar.header>            <flux:sidebar.brand                href="#"                logo="https://fluxui.dev/img/demo/logo.png"                logo:dark="https://fluxui.dev/img/demo/dark-mode-logo.png"                name="Acme Inc."            />            <flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2" />        </flux:sidebar.header>        <flux:sidebar.nav>            <flux:sidebar.item icon="home" href="#" current>Home</flux:sidebar.item>            <flux:sidebar.item icon="inbox" badge="12" href="#">Inbox</flux:sidebar.item>            <flux:sidebar.item icon="document-text" href="#">Documents</flux:sidebar.item>            <flux:sidebar.item icon="calendar" href="#">Calendar</flux:sidebar.item>            <flux:sidebar.group expandable heading="Favorites" class="grid">                <flux:sidebar.item href="#">Marketing site</flux:sidebar.item>                <flux:sidebar.item href="#">Android app</flux:sidebar.item>                <flux:sidebar.item href="#">Brand guidelines</flux:sidebar.item>            </flux:sidebar.group>        </flux:sidebar.nav>        <flux:sidebar.spacer />        <flux:sidebar.nav>            <flux:sidebar.item icon="cog-6-tooth" href="#">Settings</flux:sidebar.item>            <flux:sidebar.item icon="information-circle" href="#">Help</flux:sidebar.item>        </flux:sidebar.nav>    </flux:sidebar>    <flux:main container>        <flux:heading size="xl" level="1">Good afternoon, Olivia</flux:heading>        <flux:text class="mt-2 mb-6 text-base">Here's what's new today</flux:text>        <flux:separator variant="subtle" />    </flux:main>    @fluxScripts</body>

次级侧边栏

使用侧边栏作为二级导航。

全屏

<head>    <!-- ... -->    @fluxAppearance</head><body class="min-h-screen bg-white dark:bg-zinc-800">    <flux:header container class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" />        <flux:brand href="#" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc." class="max-lg:hidden dark:hidden" />        <flux:brand href="#" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc." class="max-lg:hidden! hidden dark:flex" />        <flux:navbar class="-mb-px max-lg:hidden">            <flux:navbar.item icon="home" href="#" current>Home</flux:navbar.item>            <flux:navbar.item icon="inbox" badge="12" href="#">Inbox</flux:navbar.item>            <flux:navbar.item icon="document-text" href="#">Documents</flux:navbar.item>            <flux:navbar.item icon="calendar" href="#">Calendar</flux:navbar.item>            <flux:separator vertical variant="subtle" class="my-2"/>            <flux:dropdown class="max-lg:hidden">                <flux:navbar.item icon:trailing="chevron-down">Favorites</flux:navbar.item>                <flux:navmenu>                    <flux:navmenu.item href="#">Marketing site</flux:navmenu.item>                    <flux:navmenu.item href="#">Android app</flux:navmenu.item>                    <flux:navmenu.item href="#">Brand guidelines</flux:navmenu.item>                </flux:navmenu>            </flux:dropdown>        </flux:navbar>        <flux:spacer />        <flux:navbar class="me-4">            <flux:navbar.item icon="magnifying-glass" href="#" label="Search" />            <flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="#" label="Settings" />            <flux:navbar.item class="max-lg:hidden" icon="information-circle" href="#" label="Help" />        </flux:navbar>        <flux:dropdown position="top" align="start">            <flux:profile avatar="https://fluxui.dev/img/demo/user.png" />            <flux:menu>                <flux:menu.radio.group>                    <flux:menu.radio checked>Olivia Martin</flux:menu.radio>                    <flux:menu.radio>Truly Delta</flux:menu.radio>                </flux:menu.radio.group>                <flux:menu.separator />                <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>            </flux:menu>        </flux:dropdown>    </flux:header>    <flux:sidebar sticky collapsible="mobile" class="lg:hidden bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700">        <flux:sidebar.header>            <flux:sidebar.brand                href="#"                logo="https://fluxui.dev/img/demo/logo.png"                logo:dark="https://fluxui.dev/img/demo/dark-mode-logo.png"                name="Acme Inc."            />            <flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2" />        </flux:sidebar.header>        <flux:sidebar.nav>            <flux:sidebar.item icon="home" href="#" current>Home</flux:sidebar.item>            <flux:sidebar.item icon="inbox" badge="12" href="#">Inbox</flux:sidebar.item>            <flux:sidebar.item icon="document-text" href="#">Documents</flux:sidebar.item>            <flux:sidebar.item icon="calendar" href="#">Calendar</flux:sidebar.item>            <flux:sidebar.group expandable heading="Favorites" class="grid">                <flux:sidebar.item href="#">Marketing site</flux:sidebar.item>                <flux:sidebar.item href="#">Android app</flux:sidebar.item>                <flux:sidebar.item href="#">Brand guidelines</flux:sidebar.item>            </flux:sidebar.group>        </flux:sidebar.nav>        <flux:sidebar.spacer />        <flux:sidebar.nav>            <flux:sidebar.item icon="cog-6-tooth" href="#">Settings</flux:sidebar.item>            <flux:sidebar.item icon="information-circle" href="#">Help</flux:sidebar.item>        </flux:sidebar.nav>    </flux:sidebar>    <flux:main container>        <div class="flex max-md:flex-col items-start">            <div class="w-full md:w-[220px] pb-4 me-10">                <flux:navlist>                    <flux:navlist.item href="#" current>Dashboard</flux:navlist.item>                    <flux:navlist.item href="#" badge="32">Orders</flux:navlist.item>                    <flux:navlist.item href="#">Catalog</flux:navlist.item>                    <flux:navlist.item href="#">Payments</flux:navlist.item>                    <flux:navlist.item href="#">Customers</flux:navlist.item>                    <flux:navlist.item href="#">Billing</flux:navlist.item>                    <flux:navlist.item href="#">Quotes</flux:navlist.item>                    <flux:navlist.item href="#">Configuration</flux:navlist.item>                </flux:navlist>            </div>            <flux:separator class="md:hidden" />            <div class="flex-1 max-md:pt-6 self-stretch">                <flux:heading size="xl" level="1">Good afternoon, Olivia</flux:heading>                <flux:text class="mb-6 mt-2 text-base">Here's what's new today</flux:text>                <flux:separator variant="subtle" />            </div>        </div>    </flux:main>    @fluxScripts</body>

参考

flux:header

属性	描述
sticky	启用后，滚动时使页头保持吸附（sticky）。
container	启用后，将页头内容限制在容器宽度内。

插槽	描述
default	在页头中显示的内容，通常包括品牌、导航和用户资料等元素。

CSS	描述
class	应用到页头的附加 CSS 类。常见用法：bg-zinc-50、border-b、sticky 等。

flux:sidebar.toggle

属性	描述
icon	切换按钮上显示的图标（例如：bars-2、x-mark）。
inset	切换按钮的位置（例如：left）。

CSS	描述
class	应用到切换按钮的附加 CSS 类。常见用法：使用 lg:hidden 仅在移动端显示。

flux:main

属性	描述
container	启用后，将主内容限制在容器宽度内。

插槽	描述
default	在主内容区域中显示的内容。

页头

次级侧边栏

相关组件

参考

flux:header

flux:sidebar.toggle

flux:main