Editor de Estilo

*Este conteúdo é traduzido por IA (Beta) e pode conter erros. Para ver a página em inglês, clique aqui.

O Editor de Estilo Integrado é uma ferramenta abrangente que permite criar, gerenciar e aplicar estilos de UI para experiências do Roblox através de uma combinação de tokens , folhas de design , regras de estilo e temas .

Acesse o Editor de Estilo através da aba UI (se ele não for visível, acesse-o a partir da aba Início).

Style Editor tool indicated in UI tab of Studio toolbar

Uma vez aberto, clique no botão Criar Design para gerar um conjunto de estilo de base.

Create Design button in opening dialog of Style Editor.

Tokens de estilo

Estilo tokens , definidos através de atributos de um token StyleSheet , representam variáveis de propriedade da interface que podem ser usadas em estilos e componentes; por exemplo, pode haver uma cor comum para um Frame.BackgroundColor3 , TextLabel.TextColor3 e UIStroke.Color .Tokens são comparáveis a variáveis CSS.

  1. Crie uma nova folha de estilo de token:

    1. Na coluna da esquerda do Editor de Estilo, passe o mouse sobre Tokens , clique no e selecione Novo Estilo de Token .
    2. Renomeie a nova folha para TokenSheet.
    New token sheet created in Style Editor.
  2. Com a nova folha de tokens selecionada, crie vários tokens clicando em Adicionar um Token… no painel principal.Esses tokens serão usados ao longo deste guia para ambas as regras e temas .

    Nome do TokenTipoValor
    GoldColor3#ffcc00
    MagentaColor3#ff0099
    OrangeColor3#dd6030
    OswaldFontOswald
    Rad20UDim0, 20
    RectLUDim20, 300, 0, 160
    SquareLUDim20, 200, 0, 200
    Text24número24
    Text32número32
    Tokens added to TokenSheet in Style Editor.

Folhas de design

Uma folha de estilo de design agrega regras de estilo e pode ser vinculada a DataModel para aplicar propriedades de estilo às instâncias da interface do usuário.Apenas um StyleSheet pode se aplicar a uma dada árvore, embora você possa usar temas para trocar estilos relacionados em toda a sua interface, um conceito abordado mais tarde neste guia.

Uma folha de design pré-populada chamada Folha de Estilo é criada através do botão Criar Design .Ela contém regras de classe para objetos de UI comuns como Frame e TextLabel.Ele também contém duas instâncias StyleDerive que derivam (herdam) tokens e estilos da folha de estilo base para uso em suas configurações de estilo personalizado.

Initial configuration of design sheet in Style Editor.

Uma vez que você tenha uma folha de design, você pode configurar um teste em um contêiner na tela para usar com o Editor de Estilo, ou um em um contêiner na experiência se desejar.

  1. Passe o mouse sobre StarterGui na Explorer e insira um ScreenGui.

  2. Confirme que uma nova instância StyleLink aparece sob o ScreenGui com seu conjunto de propriedades StyleSheet definido para a folha de estilo StyleSheet .

Regras estilísticas

Regras de estilo se aplicam a cada instância que corresponde à definição da regra para corresponder a características como o nome da classe, tag de instância e relações de hierarquia.Em um nível alto, a correspondência e modificação de instâncias via a definição de uma regra Selector opera através de:

  • Seletores de classe Roblox que alcançam todas as instâncias de uma classe de UI dada, por exemplo , , , etc.
  • Instância tag selecionadores que alvo específicos objetos de UI etiquetados através de .
  • Instância modificadores aplicados através de fantasma UIComponents como UICorner ou UIStroke .
  • GuiObjectestados selecionadores que correspondem a um dos quatro valores enumerados Enum.GuiState como Hover.
  • Seleção do nome da instância de acordo com o valor do objeto da interface de usuário Instance.Name.

Regra de classe

Um seletor de estilo classe alvo todos as instâncias de uma dada classe de UI.Os seguintes estilos de configuração de regra definem todos Frames com uma cor e tamanho de fundo uniformes.

  1. Na coluna da esquerda do Editor de Estilo, selecione Quadro na ramificação Elementos de UI .

    Default class style in the Style Editor.
  2. Vincule dois tokens de estilo previamente criados a duas propriedades :

    PropriedadeToken de Estilo
    BackgroundColor3$Magenta
    Size$SquareL
    1. Clique em Adicionar uma Propriedade… no painel principal e selecione a propriedade necessária.Observe que você pode digitar palavras-chave para encontrar propriedades mais rapidamente no menu suspenso.
    2. Em vez de inserir um valor estático, clique no botão e selecione Token de Link .
    3. Clique no $ que aparece no campo de valor e selecione o token associado adequado.

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with tokens in the Style Editor.
  3. Insira um novo dentro do que você criou e ligou anteriormente . Os estilos que você definiu devem ser aplicados automaticamente a ele.

    Final styled class rule in the Style Editor.

Regra de marcação

Instância tag selecionadores alvo específicos de objetos de UI etiquetados através de CollectionService.O seguinte estilo de configuração de regra etiqueta uma TextButton como ButtonPrimary com uma cor de fundo, fonte e tamanho de texto personalizados.

  1. Na coluna da esquerda do Editor de Estilo, passe o mouse sobre a folha Folha de Estilo , clique no botão e navegue até Novo Tag .

    Creation of tag rule in the Style Editor.
  2. Renomeie a nova regra de etiqueta .ButtonPrimary (note o traço inicial . ).

    Tag rule renamed in the Style Editor.
  3. Vincule três tokens de estilo previamente criados a três propriedades :

    PropriedadeToken de Estilo
    BackgroundColor3$Gold
    FontFace$Oswald
    TextSize$Text32
    1. Clique em Adicionar uma Propriedade… no painel principal e selecione a propriedade necessária.Lembre-se de que você pode digitar palavras-chave para encontrar mais rapidamente propriedades no menu suspenso.
    2. Em vez de inserir um valor estático, clique no botão e selecione Token de Link .
    3. Clique no $ que aparece no campo de valor e selecione o token associado adequado.

    Token linking workflow diagrammed in the Style Editor.
    Tag rule configured with tokens in the Style Editor.
  4. Insira um novo dentro do que você criou e ligou anteriormente e etiqueta como .Um atalho conveniente é o seguinte:

    1. Certifique-se de que o novo TextButton é selecionado no Explorer .
    2. Com a regra da etiqueta .ButtonPrimary selecionada na coluna da esquerda do Editor de Estilo, clique em Aplicar Etiqueta no painel principal.Os estilos que você definiu devem ser aplicados automaticamente ao botão.

    Tag linking workflow diagrammed in the Style Editor.
    Final styled tag rule in the Style Editor.

Modificador de UI

Seletores de modificador de instância aplicam fantasma UIComponents tal como UICorner ou UIStroke para estilizar ainda mais um objeto.O seguinte estilo de configuração de regra define um TextLabel com um tamanho de texto personalizado e cantos arredondados.

  1. Na coluna da esquerda do Editor de Estilo, selecione TextLabel na ramificação Elementos de UI .

    Default class style in the Style Editor.
  2. Vincule um token de estilo previamente criado a propriedade :

    1. Clique em Adicionar uma Propriedade... no painel principal e selecione a propriedade TextSize.Lembre-se de que você pode digitar palavras-chave para encontrar mais rapidamente propriedades no menu suspenso.
    2. Em vez de inserir um valor estático, clique no botão e selecione Token de Link .
    3. Clique no $ que aparece no campo de valor e selecione o token $Text32.

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with tokens in the Style Editor.

Uma instância pseudo é necessária para configurar e aplicar cantos arredondados a outros elementos. Para criar uma:

  1. Na coluna da esquerda, passe o mouse sobre TextLabel , clique no botão e navegue até NovoPseudo InstânciaCanto UICorner .

    Creation of a pseudo instance in the Style Editor.

    Uma nova instância pseudo UICorner aparece sob o elemento TextLabel na coluna da esquerda.

    Resulting pseudo instance in the Style Editor.
  2. Com a nova instância UICorner selecionada na coluna da esquerda, ligue um token de estilo previamente criado para a propriedade :

    1. Clique em Adicionar uma Propriedade... no painel principal e selecione a propriedade CornerRadius.
    2. Em vez de inserir um valor estático, clique no botão e selecione Token de Link .
    3. Clique no $ que aparece no campo de valor e selecione o token $Rad20.
    Pseudo instance configured with tokens in the Style Editor.
  3. Insira um novo dentro do que você criou e ligou anteriormente . Os estilos que você definiu devem ser aplicados automaticamente a ele.

    Final styled modifier rule in the Style Editor.

Regra do estado

estado seletores correspondem a um dos quatro valores de enumeração , permitindo que você configure automaticamente alterações de estilo para estados interativos.A configuração da regra a seguir cria um estado de sobreposição de -4 graus de rotação para todos ImageButtons.

  1. Na coluna da esquerda do Editor de Estilo, selecione Botão de Imagem na ramificação Elementos de UI .

    Default class style in the Style Editor.
  2. Clique no botão e navegue até Novo > GuiState > Passe o mouse .

    Creation of state rule in the Style Editor.

    Uma nova instância modificadora de estado de Passe aparece sob o elemento ImageButton na coluna da esquerda.

    Resulting state rule in the Style Editor.
  3. Com o novo modificador Passe o mouse selecionado na coluna da esquerda, clique em Adicionar uma propriedade... no painel principal e selecione Rotation.Lembre-se de que você pode digitar palavras-chave para encontrar mais rapidamente propriedades no menu suspenso.

  4. Insira -4 no campo de valor da propriedade.

    State rule configured with tokens in the Style Editor.
  5. Insira um novo dentro do que você criou e ligou anteriormente .Quando você passa o mouse sobre o botão na janela de visualização, ele deve girar 4 graus no sentido horário.

    Final styled state rule in the Style Editor.

Temas de estilo

Estilos temas consistem em conjuntos de tokens específicos que podem ser trocados, por exemplo, tokens de cores que definem um tema "leve" e "escuro".

Criação de tema

Para extensibilidade, temas são organizados em pastas.Enquanto um único diretório pode ser suficiente para a maioria dos propósitos, você tem liberdade para organizar temas em diretórios como "cores" ou "fontes" se desejar.

  1. Crie um novo diretório de tema:

    1. Na coluna da esquerda do Editor de Estilo, passe o mouse sobre Temas , clique no e selecione Novo Tema .
    2. Renomeie o novo item Pasta para Geral .
    New themes folder created in the Style Editor.
  2. Crie uma nova folha de estilo de tema:

    1. Passe o mouse sobre o novo diretório Geral , clique no botão e selecione Novo Estilo de Tema .
    2. Renomeie-o para TemaA .
    New theme created in the Style Editor.

Tokens temáticos

Uma vez que um tema é construído, você pode vincular seus tokens a várias propriedades de objeto de UI, como o BackgroundColor3 de um TextButton.Folhas de tema devem usar um conjunto comum de tokens para funcionar corretamente.

Com TemaA selecionado na coluna da esquerda do Editor de Estilo:

  1. Vincule três tokens de estilo criados anteriormente a três novos tokens de tema:

    Token do TemaToken de Estilo
    BackColor$Gold
    ButtonFont$Oswald
    ButtonTextSize$Text32
    1. Clique em Adicionar um Token... no painel principal e insira o nome do token do tema.
    2. Clique no $ que aparece no campo de valor e selecione o token de estilo associado.
    Theme configured with tokens in the Style Editor.
  2. Na coluna da esquerda do Editor de Estilo, selecione TextButton na ramificação Elementos de UI .

    Default class style in the Style Editor.
  3. Vincule os tokens do tema a três novas propriedades TextButton :

    PropriedadeToken do Tema
    BackgroundColor3$BackColor
    FontFace$ButtonFont
    TextSize$ButtonTextSize
    1. Clique em Adicionar uma Propriedade… no painel principal e selecione a propriedade necessária.
    2. Em vez de inserir um valor estático, clique no botão e selecione Token de Link .
    3. Clique no $ que aparece no campo de valor e selecione o token de tema adequado.

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with theme tokens in the Style Editor.

Duplicação de tema

Uma vez que você tem um tema geralmente estabelecido, você pode duplicá-lo e alterar vários tokens para definir um estilo de tema único.

  1. Na coluna da esquerda do Editor de Estilo, passe o mouse sobre o tema TemaA , clique no botão e selecione Duplicar .

  2. Renomeie o tema duplicado para ThemeB .

    Theme duplicated in the Style Editor.
  3. Vincule dois dos tokens do tema a dois tokens de estilo diferentes:

    Token do TemaToken de Estilo
    BackColor$Magenta
    ButtonTextSize$Text24
    1. Ao lado direito do campo de valor da propriedade, clique no botão e selecione Desligar Token .
    2. Clique em novamente e selecione Token de Link .
    3. No campo de valor, clique no $ e selecione o novo token de estilo associado.
    Theme configured with tokens in the Style Editor.

Mudança de tema

Uma vez que você tem vários temas, você pode trocar entre eles via pasta do tema, ou via um script como descrito em SetDerives() .

  1. Na coluna da esquerda do Editor de Estilo, selecione o diretório Geral na ramificação Temas .

  2. No painel principal, troque entre os temas usando os botões de rádio.

    ThemeA swapped in the Style Editor.