Types
@use-pattern/types
O componente UseTypes gerencia seletores de opções do tipo Rádio Button.
Conteúdo
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.