Fragmento
O componente Fragmento é utilizado para renderizar o arquivo Fragmento em outra página. A ideia da utilização do Fragmento é poupar tempo e esforço, já que os fragmentos são independentes e reutilizáveis, ou seja, basta criar uma vez e utilizar sempre que for necessário no projeto.
![](/download/attachments/234654517/FragmentoLoja.png?version=1&modificationDate=1660154129000&api=v2)
Figura 1: Componente Fragmento (botão) em execução
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
---|
Fragmento | origin | Define qual arquivo Fragmento será utilizado. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão, um ID é gerado automaticamente e atribuído ao componente. |
Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para mostrar ou oculta o componente. |
Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis de selecionados. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Criando um Arquivo Fragmento
Para que o componente Fragmento funcione, primeiro temos que criar um arquivo do tipo Fragmento, é nele que estará a parte do projeto que queremos reutilizar, Como exemplo de utilização, criaremos um botão de adicionar um produto ao carrinho.
![](/download/attachments/234654517/FragmentoCriacao.png?version=2&modificationDate=1660155164000&api=v2)
Figura 2: Criando um Arquivo Fragmento
- Na estrutura de arquivos clique com o botão direito no diretório Fragmentos.
- Clique com o botão direito na pasta Web.
- Clique em Novo.
- Clique em Fragmento
- Por fim, dê um nome ao arquivo, neste exemplo demos o nome de Botão.
Agora iremos adiciona o botão no arquivo criado. É possível configurar esse botão da forma que quisermos, inclusive adicionando blocos de programação.
![](/download/attachments/234654517/FragmentoBotao.png?version=2&modificationDate=1660156973000&api=v2)
Figura 2.1: Adicionando o botão
Inserindo o componente Fragmento na view
Com o arquivo Fragmento criado, é hora de adicionar o componente Fragmento, confira na figura 3.
![](/download/attachments/234654517/FragmentoComponenteFragmentoView.png?version=3&modificationDate=1660660996000&api=v2)
Figura 3.: Adicionando o componente Fragmento
Após inserir o componente na view, é hora de selecionar o arquivo Fragmento criado anteriormente. Clique nos '...' da propriedade Fragmento (destaque 1 da figura 3.1), em seguida selecione o Fragmento que deseja utilizar (destaque 2 da figura 3.1)
![](/download/attachments/234654517/FragmentoAddForm.png?version=3&modificationDate=1660661226000&api=v2)
Figura 3.1 : Adicionando o arquivo Fragmento ao componente Fragmento
Na figura 3.2 é possível ver o que o Fragmento criador foi adicionado ao projeto.
![](/download/attachments/234654517/FragmentoResultado.png?version=1&modificationDate=1660157018000&api=v2)
Figura 3.1 : Fragmento adicionado ao projeto