MenuEditor

MenuEditor edita uma lista de itens de menu, como o menu do cabeçalho ou o do rodapé. Cada item tem um texto e um endereço. A lista tem os botões «Subir», «Descer» e «Remover», e um formulário no fim para adicionar um item novo.

Quando usar

Use quando a tela precisar editar a ordem e os destinos de um menu de navegação. Cada menu é um MenuEditor com um id próprio, e uma tela pode ter mais de um. Para um formulário comum, use FormView.

Regras de exibição:

• Cada item mostra o endereço atual. Se o destino sumiu, o item pode trazer um warning com o motivo, que aparece sob o endereço (ui/panel/menu-editor.ts:14 e :50).
• O formulário de adição tem «Texto do link» (obrigatório), «Destino» com a opção «Escolha…» e, quando o destino é «Endereço externo», o campo de endereço com a dica de que ele começa com http:// ou https:// (ui/panel/menu-editor.ts:59, :69, :77 e :80).
• Com max, o formulário dá lugar ao aviso «Limite de N itens atingido.» (ui/panel/menu-editor.ts:101).
• Um menu sem itens diz «Nenhum item neste menu ainda.» (ui/panel/menu-editor.ts:98).

Onde aparece no painel

A tela Aparência e menus (/painel/aparencia) monta um MenuEditor por menu do site, em panel/screens/site/aparencia.ts:63. Cada menu é salvo na rota /painel/aparencia/menus/:menu.

Variantes e propriedades

MenuEditor

Pasta: ui/panel

Variantes

Id	Variante	Tom
menu-editor-light	header-and-footer	light
menu-editor-dark	header-and-footer	dark

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
id	string	Sim	Id of the section and prefix of the field ids; two editors on one screen MUST pass distinct ids.
title	string	Sim	—
hint	string	Não	—
action	string	Sim	Target of every POST form (`acao` = `subir`, `descer`, `remover` with `index` and the `href` the item had when the page loaded, or `adicionar`).
csrf	string	Sim	—
items	readonly MenuEditorItem[]	Sim	—
max	number	Não	Most items the menu takes; at the limit the add form gives way to a notice.
destinations	readonly PanelFieldOption[]	Sim	What a new item can lead to (the screen builds the list; `url` is the one that reads the address field).
values	{ readonly label?: string; readonly destino?: string; readonly url?: string; }	Não	What was submitted, shown again after a refusal.
errors	Readonly<Record<string, string>>	Não	Messages by field name (`label`, `destino`, `url`); the `form` key is the message of the whole form.

Captura

A primeira variante do catálogo, o menu de cabeçalho e rodapé, em 1280 px:

A mesma variante em 360 px:

Origem

• ui/panel/menu-editor.ts: MenuEditor, MenuEditorItem e MenuEditorProps.
• ui/panel/menu-editor.gallery.ts: as variantes do catálogo.
• panel/screens/site/aparencia.ts: a tela que monta os menus.