FileManager

FileManager é um navegador pronto para arquivos e pastas. Escolha se a página ao redor controla o modo de visualização; use Table quando as linhas forem dados que você define, não arquivos com comportamento de navegador.

Exemplos

Navegando em uma pasta

Pastas ordenam antes de documentos, e path fornece os segmentos do breadcrumb. onOpen recebe o arquivo selecionado; onNavigate recebe o índice do segmento, então a página controla a navegação real.

NameSizeModified
12 itemsToday
825 KBYesterday
12 KBJul 20

Visualização controlada

Defina view com onViewChange quando outro controle ou uma preferência salva for dono do modo de exibição. Use defaultView quando FileManager puder administrar essa escolha sozinho.

Substituindo ações por item

actions substitui todo o menu padrão; ela não acrescenta comandos. Retorne cada ação de que a pessoa precisa, incluindo uma destrutiva quando esse fluxo ainda precisar de exclusão.

NameSizeModified
4 itemsJul 18
239 KBJul 22

Quando usar

Use FileManager quando as pessoas precisarem encontrar, abrir e organizar arquivos em uma hierarquia de pastas.

Prefira outro componente quando:

Você define registros e colunas arbitrários — use Table, que deixa estrutura de linha e ações para sua aplicação.
As pessoas só precisam anexar arquivos a um formulário — use FileUpload.
Não há arquivos porque o recurso ainda não foi configurado — use EmptyState fora do navegador quando a mensagem específica de busca vazia dele for enganosa.

Acessibilidade

Os controles de visualização formam um role="group" chamado "View mode" por padrão. Cada botão tem nome acessível e aria-pressed, então o estado atual de lista ou grade é anunciado.
O breadcrumb é um <nav aria-label="Current folder">; cada gatilho de ação recebe o nome "Actions for <name>" por padrão. O segmento atual do breadcrumb fica desabilitado, em vez de ser um alvo de navegação.
O input de busca tem placeholder, mas não tem nome acessível. Esta é uma lacuna do componente que consumidores precisam considerar; um título ao redor não transforma o placeholder em rótulo.
Passe um objeto parcial labels para traduzir o grupo e os botões de visualização, o breadcrumb, os gatilhos de ação, os cabeçalhos da lista, os comandos padrão do menu e as contagens das pastas. labels.itemActions recebe o nome de cada arquivo e labels.itemsCount recebe a contagem; localize searchPlaceholder e emptyMessage separadamente.

API e código

Nome	Tipo	Obrigatória	Descrição
`files`	`ManagedFile[]`	—	Files and folders to display.
`path`	`string[]`	—	Breadcrumb segments for the current folder.
`view`	`'list' \| 'grid'`	—	Controlled display mode.
`defaultView`	`'list' \| 'grid'`	—	Initial display mode when uncontrolled. Default: `"list"`.
`onViewChange`	`(view: 'list' \| 'grid') => void`	—	Called after the display mode changes.
`onOpen`	`(file: ManagedFile) => void`	—	Called when a file name or grid card is opened.
`onNavigate`	`(index: number) => void`	—	Called with the selected breadcrumb segment index.
`actions`	`(file: ManagedFile) => DropdownItem[]`	—	Builds the action menu for an item, replacing the default commands.
`searchPlaceholder`	`string`	—	Placeholder shown in the file search field.
`emptyMessage`	`string`	—	Message shown when no files match the search.
`labels`	`FileManagerLabels`	—	Labels for the FileManager chrome — accessible names and visible text. Merged over the defaults, so partial objects work.
`className`	`string`	—	Class appended after the public `.lyra-fm` class.

x-data="lyraFileManager({ … })"

Opção	Tipo	Obrigatória	Descrição
`defaultView`	`'list' \| 'grid'`	—	Initial display mode. Default: `'list'`.
`defaultQuery`	`string`	—	Initial file-name filter. Default: `''`.

O componente fornece a interação; este markup é a estrutura estática de lista correspondente:

html

<div class="lyra-fm">
  <div class="lyra-fm__toolbar">
    <div class="lyra-fm__search"><input placeholder="Buscar arquivos…" /></div>
    <div class="lyra-fm__views" role="group" aria-label="View mode">
      <button class="lyra-fm__view lyra-fm__view--on" aria-label="List view" aria-pressed="true">
        Lista
      </button>
      <button class="lyra-fm__view" aria-label="Grid view" aria-pressed="false">Grade</button>
    </div>
  </div>
  <ul class="lyra-fm__list">
    <li class="lyra-fm__row">
      <button class="lyra-fm__name" type="button">
        <span class="lyra-fm__icon lyra-fm__icon--folder">Pasta</span>
        <span class="lyra-fm__label">Materiais de marca</span>
      </button>
      <span class="lyra-fm__cell">12 itens</span>
      <span class="lyra-fm__cell">Hoje</span>
      <span class="lyra-fm__actions"
        ><button class="lyra-fm__more" aria-label="Actions for Brand assets">•••</button></span
      >
    </li>
  </ul>
</div>

<lyra:file-manager> Gerado do lyra-ds/blade v0.10.0.

O comportamento vem de lyraFileManager() — instale @lyra-ds/alpine e veja a aba HTML + Alpine.

Prop	Padrão	Obrigatória	Valores de exemplo
`files`	`[]`	—	—
`path`	`[]`	—	—
`defaultView`	`'list'`	—	`grid`
`defaultQuery`	`''`	—	—
`actions`	`null`	—	—
`searchPlaceholder`	`'Search files…'`	—	—
`emptyMessage`	`'No files found.'`	—	—
`labels`	`[]`	—	—

blade

<lyra:file-manager
    :path="['Workspace', 'Design']"
    :files="[
        ['name' => 'Brand assets', 'type' => 'folder', 'items' => 12, 'updated' => '2026-03-14'],
        ['name' => 'homepage.fig', 'type' => 'file', 'size' => 4823000, 'updated' => '2026-03-16', 'shared' => true],
        ['name' => 'style-guide.pdf', 'type' => 'file', 'size' => 918000, 'updated' => '2026-03-10'],
    ]"
    default-view="list"
    search-placeholder="Search files…"
/>