Types

@use-pattern/types

O componente UseTypes gerencia seletores de opções do tipo Rádio Button.

Conteúdo

1. Instalar
2. Utilizar
3. Aprender
4. Contribuir

Instalar

Instale a partir do npm:

npm install @use-pattern/types --save

Utilizar

• npm — para instalar @use-pattern/types
• github — para fazer download do código fonte

Aprender

src/app/app.component.ts

import {Component} from '@angular/core';
import {UseTypesInterface} from '@use-pattern/types';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  //Titulo do componente
  public title: string = 'Tipo';
    
  // Lista de opções de tipos
  public listTypes: Array<UseTypesInterface> = [
    {option: 'Mantas', value: 'mantas'},
    {option: 'Almofadas', value: 'almofadas'},
    {option: 'Capas de Almofadas', value: 'capas de almofadas'},
    {option: 'Porta Travesseiro', value: 'porta travesseiro', disabled: true},
    {option: 'Peseira', value: 'peseira'},
    {option: 'Jogo Americano', value: 'jogo americano'}
  ];

  //Evento disparado sempre que um item for selecionado
  public onChangeType(item): void {
    console.log('onChangeType', item);
  }
}

UseTypesInterface

  {
    option: string;
    value: string;
    disabled?: boolean;
  }

src/app/app.template.html

<use-types #type
           [title]="title"
           [listItems]="listTypes"
           [selectedItem]="{option: 'Capas de Almofadas', value: 'capas de almofadas'}"
           (change)="onChangeType($event)"
></use-types>

<div class="selected">
  Item Selecionado: {{type.selectedItem?.value}}
</div>

src/styles.scss

Estrutura de estilo para personalização do componente

.use-types {
  .title{
  }
  .grid {
    .mat-radio-group {
      .mat-radio-button {
      }
    }
  }
}

*Utiliza !important para forçar a sobrposição das configurações de estilos.

Propriedades públicas

| Propriedade | Descrição | Tipo | | ----------------- | --------------------------------------------------------------------------------- | :------: | | title | Título do componente | string | | listItems | Lista de items | UseTypesInterface | | selectedItem | Item selecionado | UseTypesInterface |

Eventos

| Propriedade | Descrição | Tipo | | ----------------- | --------------------------------------------------------------------------------- | :------: | | (change)onChangeType | Evento disparado sempre que um item for selecionado | UseTypesInterface |

Contribuir

Contibuições são sempre muito bem vindas! As contribuições não precisam serem somente através de desenvolvimentos de códigos, qualquer ajuda com ideias, sugestões, melhorias na documentação ou doações para os desenvolvedores são sempre muito apreciadas!

Participe da comunidade Projeto que Vale e colabore da forma que achar melhor.

Licença

MIT License

Copyright (c) 2018 PROJETO QUE VALE

É concedida permissão, gratuitamente, a qualquer pessoa que obtenha uma cópia deste software e dos arquivos de documentação associados (o "Software"), para negociar o Software sem restrições, incluindo, sem limitação, os direitos de uso, cópia, modificação e fusão , publicar, distribuir, sublicenciar e / ou vender cópias do Software, e permitir que as pessoas a quem o Software é fornecido o façam, sujeitas às seguintes condições:

O aviso de copyright acima e este aviso de permissão devem ser incluídos em todas as cópias ou partes substanciais do Software.

O SOFTWARE É FORNECIDO "NO ESTADO EM QUE SE ENCONTRA", SEM NENHUM TIPO DE GARANTIA, EXPRESSA OU IMPLÍCITA, INCLUINDO, MAS NÃO SE LIMITANDO ÀS GARANTIAS DE COMERCIALIZAÇÃO, ADEQUAÇÃO A UM FIM ESPECÍFICO E NÃO VIOLAÇÃO. EM NENHUMA CIRCUNSTÂNCIA, OS AUTORES OU PROPRIETÁRIOS DE DIREITOS DE AUTOR PODERÃO SER RESPONSABILIZADOS POR QUAISQUER REIVINDICAÇÕES, DANOS OU OUTRAS RESPONSABILIDADES, QUER EM ACÇÃO DE CONTRATO, DELITO OU DE OUTRA FORMA, DECORRENTES DE, OU EM CONEXÃO COM O SOFTWARE OU O USO OU OUTRAS NEGOCIAÇÕES NO PROGRAMAS.