RevisionDiff
RevisionDiff compara duas revisões de um texto. Cada linha é uma parte (um título, um parágrafo, uma lista) e diz se ela ficou igual, foi adicionada, foi removida ou foi alterada. As colunas mostram a revisão mais antiga e a mais nova.
Quando usar
Seção intitulada “Quando usar”Use quando a tela precisar mostrar o que mudou entre duas versões de um registro. Quem monta as linhas decide o que é uma parte e o que é uma mudança: o componente só desenha o que recebe (ui/panel/revision-diff.ts:9). Cada linha traz o rótulo da parte, o texto antigo (before) e o texto novo (after). Uma parte adicionada não tem before; uma removida não tem after.
Regras de exibição:
- A mudança é dita em texto: «adicionado», «removido» ou «alterado» (
ui/panel/revision-diff.ts:36a:38), depois do rótulo da parte. - Uma parte removida aparece riscada, com «−» e «Removido:» para leitores de tela. Uma adicionada aparece sublinhada, com «+» e «Adicionado:» (
ui/panel/revision-diff.ts:63e:67). - Todo o texto é escapado.
Onde aparece no painel
Seção intitulada “Onde aparece no painel”A tela Comparar revisões (/painel/posts/comparar/:id) monta o componente em modules/posts/screens/compare.ts:38. O título da tela é «Comparar revisões de» seguido do título do post (modules/posts/screens/compare.ts:59).
Variantes e propriedades
Seção intitulada “Variantes e propriedades”RevisionDiff
Pasta: ui/panel
Variantes
| Id | Variante | Tom |
|---|---|---|
revision-diff-comparar-light | comparar | light |
Propriedades
| Propriedade | Tipo | Obrigatória | Descrição |
|---|---|---|---|
id | string | Não | Prefix of the ids, for two diffs on one page. Default `revisao`. |
caption | string | Sim | Heading of the region, e.g. «Mudanças da revisão v1 para a v2». |
beforeTitle | string | Sim | Title of the left column (the older revision). |
afterTitle | string | Sim | Title of the right column (the newer revision). |
rows | readonly RevisionDiffRow[] | Sim | — |
Captura
Seção intitulada “Captura”A primeira variante do catálogo, a comparação de duas revisões, em 1280 px:
A mesma variante em 360 px:
ui/panel/revision-diff.ts:RevisionDiff,RevisionDiffRoweRevisionChange.ui/panel/revision-diff.gallery.ts: as variantes do catálogo.modules/posts/screens/compare.ts: a tela Comparar revisões.