DashboardSidebar

Uso

O componente DashboardSidebar é usado para exibir uma sidebar em um layout de dashboard. Ele suporta redimensionamento por arraste, persistência de estado e se integra com DashboardGroup, DashboardPanel e DashboardNavbar.

O estado dele (tamanho, recolhido, etc.) é salvo com base nas props storage e storage-key que você fornece ao componente DashboardGroup.

Use-o dentro do slot padrão do componente DashboardGroup:

<template>
  <NDashboardGroup>
    <NDashboardSidebar />

    <slot />
  </NDashboardGroup>
</template>

Use os slots header, default e footer para personalizar a sidebar e os slots body ou content para personalizar o menu da sidebar.

Buscar...

K

Benjamin

Expandir código

Redimensionável

Use a prop resizable para tornar a sidebar redimensionável.

<template>
  <NDashboardSidebar resizable>
    <Placeholder class="h-96" />
  </NDashboardSidebar>
</template>

Recolhível

Use a prop collapsible para tornar a sidebar recolhível ao arrastar para perto da borda da tela.

<template>
  <NDashboardSidebar resizable collapsible>
    <Placeholder class="h-96" />
  </NDashboardSidebar>
</template>

Tamanho

Use as props min-size, max-size, default-size e collapsed-size para personalizar o tamanho da sidebar.

<template>
  <NDashboardSidebar
    resizable
    collapsible
    :min-size="22"
    :default-size="35"
    :max-size="40"
    :collapsed-size="0"
  >
    <Placeholder class="h-96" />
  </NDashboardSidebar>
</template>

Lado

Use a prop side para alterar o lado da sidebar. O padrão é left.

<template>
  <NDashboardSidebar side="right" resizable collapsible>
    <Placeholder class="h-96" />
  </NDashboardSidebar>
</template>

Modo

Use a prop mode para alterar o modo do menu da sidebar. O padrão é slideover.

Use o slot body para preencher o corpo do menu (abaixo do cabeçalho) ou o slot content para preencher o menu inteiro.

Alternar

Use a prop toggle para personalizar o componente DashboardSidebarToggle exibido no mobile.

Você pode passar qualquer propriedade do componente Button para personalizá-lo.

Lado do toggle

Use a prop toggle-side para alterar o lado do botão de alternância. O padrão é left.

Exemplos

Controlar o estado de abertura

Você pode controlar o estado de abertura usando a prop open ou a diretiva v-model:open.

Controlar o estado recolhido

Você pode controlar o estado recolhido usando a prop collapsed ou a diretiva v-model:collapsed.

API

Props

Slots

Tema

export default defineAppConfig({
  ui: {
    dashboardSidebar: {
      slots: {
        root: 'relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0',
        header: 'h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4',
        body: 'flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2',
        footer: 'shrink-0 flex items-center gap-1.5 px-4 py-2',
        toggle: '',
        handle: '',
        content: 'lg:hidden',
        overlay: 'lg:hidden'
      },
      variants: {
        menu: {
          true: {
            header: 'sm:px-6',
            body: 'sm:px-6',
            footer: 'sm:px-6'
          }
        },
        side: {
          left: {
            root: 'border-e border-default'
          },
          right: {
            root: ''
          }
        },
        toggleSide: {
          left: {
            toggle: ''
          },
          right: {
            toggle: 'ms-auto'
          }
        }
      }
    }
  }
})

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        dashboardSidebar: {
          slots: {
            root: 'relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0',
            header: 'h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4',
            body: 'flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2',
            footer: 'shrink-0 flex items-center gap-1.5 px-4 py-2',
            toggle: '',
            handle: '',
            content: 'lg:hidden',
            overlay: 'lg:hidden'
          },
          variants: {
            menu: {
              true: {
                header: 'sm:px-6',
                body: 'sm:px-6',
                footer: 'sm:px-6'
              }
            },
            side: {
              left: {
                root: 'border-e border-default'
              },
              right: {
                root: ''
              }
            },
            toggleSide: {
              left: {
                toggle: ''
              },
              right: {
                toggle: 'ms-auto'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog