Pular para o conteúdo principal
Fabled
Docs
How-to
Personalizar um Frame em The Forge

Personalizar um Frame em The Forge

Atualizado 22 de jul. de 2026

2 min de leitura

Etapa 1: Abra o menu de criação e escolha Novo Frame

Abra The Forge. Encontre o gatilho do menu de criação na árvore do Forge (badge 1) e clique nele para revelar as opções de criação.

Selecione New Frame no menu. Isso inicia um novo modelo de exibição e abre o painel de configuração do frame.

Abra o menu de criação e escolha Novo Frame

Etapa 2: Nomeie o frame e atribua um jogo e uma categoria

Digite um nome para o seu frame no campo de nome. Escolha nomes descritivos que indiquem a finalidade do frame, como "Barra Lateral do Personagem" ou "Cartão de Item".

Escolha o jogo e a categoria de conteúdo à qual este frame pertence. Use o painel à direita para atribuir o frame a uma pasta do Forge, de modo que ele apareça junto aos elementos que o utilizarão.

Nomeie o frame e atribua um jogo e uma categoria

Etapa 3: Inspecione o contêiner raiz na tela

O Editor de Frames abre no contêiner raiz do frame. Esta é a superfície de layout de nível superior do seu modelo.

O contêiner raiz preenche a área da tela. Você constrói seu layout arrastando componentes da paleta à esquerda para dentro deste contêiner.

Inspecione o contêiner raiz na tela

Etapa 4: Arraste componentes da paleta para a tela

A paleta de componentes à esquerda lista os blocos de construção disponíveis: Text, Image, Video, Table, Icon e Container.

Arraste qualquer componente para o contêiner raiz para posicioná-lo. Você pode aninhar componentes dentro de um Container para criar layouts agrupados.

Arraste componentes da paleta para a tela

Etapa 5: Vincule propriedades de componentes a dados de elementos em tempo real

Selecione um componente na tela. Suas propriedades aparecem no painel à direita.

Use a sintaxe de expressão para vincular uma propriedade a um campo do elemento que este frame exibirá. Por exemplo, insira {{element.name}} para obter o nome do elemento, ou {{element.portrait}} para referenciar um campo de imagem de retrato.

Repita isso para cada componente na tela até que todos os campos de conteúdo estejam conectados aos dados corretos do elemento.

Vincule propriedades de componentes a dados de elementos em tempo real