Pulso-angular-design-system NPM

pulso-accordion
pulso-button
pulso-form-field
pulso-icon
pulso-mat-icon
pulso-option
pulso-select
pulso-switch

Componente: pulso-button

O componente pulso-button é um botão versátil com várias opções de cor e estilo para diferentes casos de uso.

Atributos:
- [pulso-button]: Define os estilos básicos para o botão. Pode ser personalizado ainda mais usando atributos adicionais.
Atributos Adicionais:
- [color="primary"]: Aplica estilos de botão primário.
- [color="secondary"]: Aplica estilos de botão secundário.
- [color="ghost"]: Aplica estilos de botão fantasma.
- [color="conversion"]: Aplica estilos de botão de conversão.
- [color="conversion-secondary"]: Aplica estilos de botão de conversão secundário.
- [color="conversion-ghost"]: Aplica estilos de botão de conversão fantasma.
- [color="black"]: Aplica estilos de botão preto.
- [color="black-secondary"]: Aplica estilos de botão preto secundário.
- [color="black-ghost"]: Aplica estilos de botão preto fantasma.
- [color="white"]: Aplica estilos de botão branco.
- [color="white-secondary"]: Aplica estilos de botão branco secundário.
- [color="white-ghost"]: Aplica estilos de botão branco fantasma.
- [color="subscription"]: Aplica estilos de botão de assinatura.
- [color="subscription-secondary"]: Aplica estilos de botão de assinatura secundário.
- [color="subscription-ghost"]: Aplica estilos de botão de assinatura fantasma.

Exemplos de Uso:

<button pulso-button color="primary">Botão Primário</button>
<button pulso-button color="secondary">Botão Secundário</button>
<button pulso-button color="ghost">Botão Fantasma</button>
<button pulso-button color="conversion">Botão de Conversão</button>
<button pulso-button color="black">Botão Preto</button>
<button pulso-button color="white">Botão Branco</button>
<button pulso-button color="subscription">Botão de Assinatura</button>

Componente: pulso-accordion

O componente pulso-accordion é utilizado para criar uma interface de acordeão, permitindo a exibição de painéis expansíveis que podem ser abertos ou fechados individualmente.

Elementos Filhos:
- [pulso-panel-title]: Define o título de um painel do acordeon.
- [pulso-panel-description]: Define o conteúdo de um painel do acordeon.

Exemplo de Uso:

<pulso-accordion>
  <h1 pulso-panel-title>Component Content</h1>
  <div pulso-panel-description>
    <!-- Conteúdo do painel aqui -->
  </div>
</pulso-accordion>

Componente: pulso-form-field

O componente pulso-form-field encapsula campos de formulário e rótulos, fornecendo funcionalidades adicionais como texto de ajuda e rótulos fixos.

Elementos Filhos:
- <label>: Define o rótulo do campo de formulário.
- <input>: Define o campo de entrada de texto.
- <pulso-select>: Define um seletor personalizado.
Inputs:
- [helperText]: Define o texto de ajuda para o campo de formulário.
- [fixedLabel]: Determina se o rótulo deve ser fixo.

Exemplo de Uso:

<pulso-form-field [helperText]="helperText" [fixedLabel]="true">
  <label for="username">Hello, Course App</label>
  <input value="admin" minlength="5" type="text" autocomplete="new-password" required />
</pulso-form-field>

Componente: pulso-switch

O componente pulso-switch representa um interruptor de alternância, permitindo seleção binária de ligar/desligar.

Inputs:
- [disabled]: Determina se o switch está desativado.
[checked]: Determina se o switch está inicialmente marcado.

Exemplo de Uso:

<pulso-switch [disabled]="true" [checked]="true"> </pulso-switch>

Componente: pulso-select

O componente pulso-select é utilizado para criar um seletor personalizado, que permite aos usuários escolher uma opção de uma lista suspensa.

Inputs:
- [formControl]: Define o controle de formulário associado ao seletor.
- [selectSearch]: Configurações para pesquisa dentro do seletor.
Elementos Filhos:
- <pulso-option>: Define uma opção dentro do seletor.
Exemplo de Uso:

<pulso-form-field placeholder="Selecione um tipo">
  <label for="select"> Type </label>
  <pulso-select [formControl]="control" [selectSearch]="{ isServer: false }">
    <pulso-option [value]="null">Selecione uma opção</pulso-option>
    <!-- Outras opções aqui -->
  </pulso-select>
</pulso-form-field>

Componente: pulso-option

O componente pulso-option é utilizado dentro de um seletor para definir uma opção que pode ser selecionada pelo usuário.

Inputs:
- [value]: Define o valor associado à opção.
- [disabled]: Define se o campo está habilitado ou não.

Exemplo de Uso:

<pulso-option [value]="1">Option 1</pulso-option>

Componente: pulso-icon

O componente pulso-icon é utilizado para exibir ícones dentro de outros componentes ou diretamente no conteúdo da página.

Elementos Filhos:
- O nome do ícone desejado.
Exemplo de Uso:
```
<pulso-icon>rdicon-default</pulso-icon>
```

Componente: pulso-mat-icon

O componente pulso-mat-icon é utilizado para exibir ícones do material dentro de outros componentes ou diretamente no conteúdo da página.

Elementos Filhos:
- O nome do ícone desejado.
Exemplo de Uso:
```
<pulso-mat-icon>remove</pulso-mat-icon>
```

Serviço: PulsoToastService

O serviço PulsoToastService é responsável por exibir mensagens de toast na aplicação.

Métodos:
- show(message, title, duration, iconName, className): Exibe uma mensagem de toast com os parâmetros fornecidos.
- Métodos semelhantes estão disponíveis para exibir mensagens informativas, de aviso e de erro.

Exemplo de Uso:

pulsoToastService.success("Sucesso", "Operação realizada com sucesso", 3000);

Módulo Pulso

O módulo PulsoModule é responsável por agrupar e fornecer os componentes e serviços essenciais do framework Pulso para integração em projetos Angular.

Exemplo de Uso

Configurações

Para utilizar o método forRoot e fornecer as configurações do Pulso, é necessário fornecer um objeto PulsoSettings que contenha as seguintes propriedades:

export interface PulsoSettings {
  toast?: {
    duration: number;
    position: "top" | "bottom";
  };
  formField?: {
    fixedLabel?: boolean;
    size?: "small" | "medium" | "large";
  };
  token: BrandsWithTr;
}

toast: Configurações para mensagens de toast, como duração e posição.
- duration: Duração da mensagem de toast em milissegundos.
- position: Posição da mensagem de toast na tela.
formField: Configurações para campos de formulário, como rótulos fixos e tamanho.
- fixedLabel: Determina se os rótulos dos campos de formulário devem ser fixos.
- size: Define o tamanho dos campos de formulário.
token: Define o tema do Pulso a ser aplicado.

import { PulsoModule } from "@raiadrogasil/@pulso-angular";

@NgModule({
  imports: [
    PulsoModule.forRoot({
      token: "raia", // Escolha do tema
      toast: {
        duration: 3000,
        position: "bottom",
      },
      fixedLabel: true,
      // Outras configurações do Pulso
    }),
  ],
})
export class AppModule {}

No seu arquivo angular.json, adicione o arquivo de estilos do Pulso ao array de estilos do seu projeto:

    "build": {
            "styles": [
              "src/styles.scss",
              "./node_modules/pulso-angular-components/styles/styles.scss"
            ]
            }

Este é um exemplo básico de como importar e configurar o módulo PulsoModule em um módulo Angular. Certifique-se de substituir as configurações pelo tema desejado e outras personalizações necessárias para o seu projeto.

  static forRoot(settings: PulsoSettings): ModuleWithProviders<PulsoModule>

ModuleWithProviders: Utilizado para importar o módulo principal com as configurações específicas do Pulso. Recebe como parâmetro um objeto PulsoSettings que contém as configurações do toast, rótulos fixos e tema.

  static async choseTokenTheme(token: BrandsWithTr):void

Método para definir o tema com base no token fornecido. Este método é usado internamente para aplicar o tema do Pulso.

  static forChildren(): ModuleWithProviders<PulsoModule>

Utilizado para importar o módulo Pulso em módulos secundários.

@raiadrogasil/pulso-icons @raiadrogasil/pulso-tokens tslib

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago