Componente criado para adicionar os ícones gratuitos do Font Awesome no Power Apps Canvas.
- Importando o componente
- Propriedades de entrada
- Propriedades de saída
- Configuração inicial
- Utilizando em múltiplos componentes de imagem
| Nome de exibição | Propriedade | Descrição | Tipo de Dados | Default |
|---|---|---|---|---|
| Icon Style | IconStyle | Categoria de estilo da fonte | Texto | "" |
| Icon Name | IconName | Nome do ícone a ser usado | Texto | "" |
| Hex Color | HexColor | Valor hexadecimal da cor do ícone | Texto | "" |
| Cursor Type | CursorType | Tipo de cursor no mouseover | Número | 0 |
| OnSelect | OnSelect | Funções a serem executadas ao clicar no ícone | Função | "" |
| Nome de exibição | Propriedade | Descrição | Tipo de Dados | Default |
|---|---|---|---|---|
| Styles | Styles | Enum para ser usado na propriedade de entrada "Icon Style" | Registro | ver registro |
| Style Source | StyleSource | Texto com a fonte-face usada conforme a seleção do estilo (implícito) | Texto | "" |
| Version | Version | Exibe a versão do Font Awesome que está sendo usada | Texto | "fontawesome-free-6.4.0-desktop" |
| Cursor Types | CursorTypes | Enum para ser usado na propriedade de entrada "Cursor Type" | Registro | ver registro |
| Icons | Icons | Enum para ser usado na propriedade de entrada "Icon Name" | Registro | ver registro |
| Image | Image | Retorna a imagem do ícone configurado no componente, para ser usado em componentes de imagem no Power Apps | Imagem | "" |
| RenderIcon | RenderIcon | Retorna o ícone para ser usado em vários componentes de imagem, configurando os parâmetros individualmente | Booleano | false |
- O componente inicialmente ficará vazio, até que as propriedades necessárias sejam configuradas.
- As propriedades principais deverão ser preenchidas para visualizar o ícone. São elas: Icon Style e Icon Name.
- Icon Style indica o estilo de ícone entre as categorias filtradas no site Font Awesome. Na versão gratuita, são 3 tipos:
- Brands
- Regular
- Solid
Para facilitar a utilização, o componente possui uma propriedade de saída Styles, que é um Enum com todos os tipos possíveis para serem escolhidos. Exemplo:
Self.Styles.Brands
- Icon_Name indica qual é o ícone que será exibido na tela. Qualquer ícone listado como gratuito até a versão indicada no componente pode ser utilizado. Para facilitar o uso, o componente possui uma propriedade de saída Icons, que é um Enum com todos os nomes dos ícones possíveis. São mais de 2000 ícones e estão dividos pelos estilos já mencionados.
Self.Icons.Brands.facebook
OBS.: é necessário que o Icon Style e o Icon Name sejam da mesma categoria, mesmo estilo, como no nosso exemplo acima, Brands. Se o estilo for alterado para Regular, por exemplo, é necessário também alterar no Icon name a referência do estilo.
-
A propriedade Hex Color pode ser preenchida para alterar a cor do ícone. Passe um valor em hexadecimal. Exemplo: "#0000ff".
-
A propriedade Cursor Type indica o tipo do cursor do mouse quando ele passar sobre o ícone. Por padrão, o valor é 0, indicando que o componente é clicável. A outra opção é -1, indicando o cursor normal. Para facilitar o uso, o componente possui uma propriedade de saída CursorTypes, que é um Enum com todos os tipos possíveis para serem escolhidos. Exemplo:
Self.CursorTypes.Pointer
- A propriedade OnSelect é uma propriedade de comportamento. Indica qual função deverá ser executada ao clicar no componente. Apesar do tipo estar marcado como booleano, essa propriedade aceitará as funções que forem passadas nela.
Por padrão, o componente exibe o ícone logo após a configuração inicial ser realizada. Desse jeito, cada ícone utilizado precisa ser um componente novo. O problema disso é que existem controles no Power Apps que não aceitam componentes dentro deles, como os Formulários, por exemplo.
Para contornar isso, o componente possui uma propriedade de saída RenderIcon que retorna o código SVG da imagem de acordo com os parâmetros passados.
IMPORTANTE.: para funcionar, é necessário que ao menos 1 componente esteja criado na tela, sem parametrização, pois este será usado apenas como referência para os componentes de imagem que criados.
- Primeiramente, criamos o ícone na tela, sem nenhuma parametrização.
- O componente criado será usado como referência para os componentes de imagem que criarmos. No componente de imagem, vamos utilizar a propriedade de saída RenderIcon do componente referenciado.
A propriedade RenderIcon possui 3 parâmetros:
- IconStyle
- IconName
- HexColor
Com o componente sendo usado apenas como referência, podemos criar quantos componentes de imagem quisermos, apenas passando os parâmetros para a referência.
