activities
latest
false
Importante :
A tradução automática foi aplicada parcialmente neste conteúdo.
Atividades do fluxo de trabalho
Last updated 4 de out de 2024

Ferramentas de Desenvolvedor

A propriedade Dev Tools na atividade Create Form permite que os usuários depurem seus formulários e experimentem estilos CSS. Quando habilitada, a ferramenta do desenvolvedor Dev Tools é aberta em tempo de execução.

Este tutorial mostra como experimentar estilos CSS no Dev Tools.

Importante: as personalizações adicionadas no Dev Tools são temporárias. Para aplicar permanentemente os estilos CSS ao formulário, você deve criar uma classe CSS personalizada em um componente HTML Element, onde você insere o código que você experimenta em Dev Tools.

Tutorial

Para usar as ferramentas de desenvolvimento:

  1. No painel Propriedades da atividade Criar formulário , verifique:

    1. Ferramentas de Desenvolvedor

    2. Desativar Sanitize. Esta propriedade melhora o desempenho do formulário.

  2. Adicione componentes de formulário no Form Designer. Para este exemplo, arraste e solte um componente Elemento HTML . Você usa este componente para personalizar a aparência de outros componentes de formulário

    1. Na guia Exibir do componente Elemento HTML, vá para a seção Conteúdo .

    2. Insira uma classe CSS <style>que altera a aparência de outros componentes. Escreva a tag <style> e um nome para a classe.

      Lembre-se do nome da classe CSS porque você a usará para aplicar estilos CSS a outros componentes de formulário.

    3. 2.3. Adicione propriedades à classe CSS que correspondam ao seu caso de uso Para este exemplo, adicione a propriedade background-color e defina-a como green. Veja o código CSS abaixo:
      <style> .customclass{background-color: green;} </style><style> .customclass{background-color: green;} </style>
    4. 2.4. Salve o componente.

  3. Arraste e solte um componente Campo de texto no Designer de formulário.

    1. Na aba Display , vá até o campo Custom CSS Class e insira o nome da classe CSS criada no HTML Element. Para este exemplo, digite customclass.
    2. Salve o componente e o formulário.

  4. Execute o arquivo. A janela Ferramentas de desenvolvimento é aberta.

    1. Clique no seguinte ícone docs image e, em seguida, selecione o componente Campo de texto no Renderizador de formulário. A classe CSS criada é exibida na guia Estilos das Ferramentas de Desenvolvimento. Para este exemplo, o customclass é exibido.


    2. Acesse a classe CSS criada no Dev Tools e comece a experimentar estilos CSS em tempo real. Para este exemplo, adicione uma propriedade border-style dentro de customclass e defina-a como solid.
    3. Adicione outra propriedade border-color e defina-a como deeppink.
  5. Depois de experimentar estilos CSS, você pode aplicá-los ao seu formulário permanentemente. Vá para a seção Content do componente HTML Element e adicione as propriedades que você experimentou na classe CSS.

    Para este exemplo, adicione as propriedades border-style e border-color em customclass:
    <style> .customclass{background-color: green;
      border-style: solid;
      border-color: deeppink;}
    </style><style> .customclass{background-color: green;
      border-style: solid;
      border-color: deeppink;}
    </style>
  6. Salve o componente e o formulário.

Fluxo de trabalho amostral

Para verificar o fluxo de trabalho completo ou ter uma referência futura, baixe o exemplo XAML

  • Tutorial
  • Fluxo de trabalho amostral

Esta página foi útil?

Obtenha a ajuda que você precisa
Aprendendo RPA - Cursos de automação
Fórum da comunidade da Uipath
Uipath Logo White
Confiança e segurança
© 2005-2024 UiPath. Todos os direitos reservados.