대시보드 사이드바토글

모바일에서 사이드바를 전환하는 버튼입니다.

Usage

DashboardSidebarToggle 구성 요소는 DashboardNavbar 및 [DashboardSidebar](xph07xxph08x 구성 요소에 사용됩니다.

그것은 자동으로 사이드바를 토글 모바일에 표시 됩니다, ** 당신은 그것을 manually **를 추가 할 필요가 없습니다.

<template>
  <UDashboardSidebarToggle />
</template>

Button 구성 요소를 확장하므로 color, variant, size 등과 같은 속성을 전달할 수 있습니다.

<template>
  <UDashboardSidebarToggle variant="subtle" />
</template>

버튼의 기본값은 color="neutral" 및 variant="ghost"입니다.

예

x`toggle` 슬롯 내

이 구성 요소는 모바일에서 자동으로 표시되지만 DashboardNavbar 및 DashboardSidebar 구성 요소의 toggle 슬롯을 사용하여 버튼을 사용자 정의할 수 있습니다.

<template>
  <UDashboardGroup>
    <UDashboardSidebar>
      <template #toggle>
        <UDashboardSidebarToggle variant="subtle" />
      </template>
    </UDashboardSidebar>

    <slot />
  </UDashboardGroup>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar title="Home">
        <template #toggle>
          <UDashboardSidebarToggle variant="subtle" />
        </template>
      </UDashboardNavbar>
    </template>
  </UDashboardPanel>
</template>

DashboardSidebar 및 DashboardNavbar 구성 요소의 toggle-side Prop을 사용하면 지정된 측면에 버튼이 표시됩니다.

API 사용

Props (### Props)

Prop	Default	Type
`as`	`'button'`	`any` The element or component this component should render as when not a link.
`color`	`'neutral'`	`"error" \| "neutral" \| "primary" \| "secondary" \| "success" \| "info" \| "warning"`
`variant`	`'ghost'`	`"ghost" \| "solid" \| "outline" \| "soft" \| "subtle" \| "link"`
`side`	`'left'`	`"left" \| "right"` The side of the sidebar to toggle.
`autofocus`		`false \| true \| "true" \| "false"`
`disabled`		`boolean`
`name`		`string`
`type`	`'button'`	`"reset" \| "submit" \| "button"` The type of the button when not a link.
`label`		`string`
`activeColor`		`"error" \| "neutral" \| "primary" \| "secondary" \| "success" \| "info" \| "warning"`
`activeVariant`		`"ghost" \| "solid" \| "outline" \| "soft" \| "subtle" \| "link"`
`size`	`'md'`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`
`square`		`boolean` Render the button with equal padding on all sides.
`block`		`boolean` Render the button full width.
`loadingAuto`		`boolean` Set loading state automatically based on the `@click` promise state
`icon`		`any` Display an icon based on the `leading` and `trailing` props.
`avatar`		`AvatarProps` Display an avatar on the left side.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`leadingIcon`		`any` Display an icon on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`trailingIcon`		`any` Display an icon on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`ui`		`{ base?: any; }`

이 구성 요소는 모든 기본 <button> HTML 속성도 지원합니다.

Theme 주제

app.config.ts

export default defineAppConfig({
  ui: {
    dashboardSidebarToggle: {
      base: 'lg:hidden',
      variants: {
        side: {
          left: '',
          right: ''
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        dashboardSidebarToggle: {
          base: 'lg:hidden',
          variants: {
            side: {
              left: '',
              right: ''
            }
          }
        }
      }
    })
  ]
})

Changelog 파일

No recent changes

DashboardSidebarCollapse

A Button to collapse the sidebar on desktop.

DashboardToolbar

A toolbar to display under the navbar in a dashboard.