@cw-ui/avatar

Atomic Design System for React

Usage no npm install needed!

<script type="module">
  import cwUiAvatar from 'https://cdn.skypack.dev/@cw-ui/avatar';
</script>

README

@cw-ui/avatat

This package can change any time. Please only use if you are the ETC.Digital team.

Introdução

O componente Avatar é usado para representar usuários e apenas deve ser usados para usuários.

Exemplo

import Avatar from "@cw-ui/avatar"

const AvatarExample: FC = () => {
  return <Alert name="Jorge Luiz" size={40}/>
}

API

requerido

  • name: O nome que será usado para gerar as iniciais
  • size: O número em pixel que define a altura e a largura do componente.

opcionais

  • isSolid: Define se a aparencia do componte será em tom sólido ou "pastel"

  • color: Define a cor do componente. Se a cor não foi definida, uma cor aleatória será escolhida.

    • opçōs: "green", "red", "blue", "gray", "orange", "teal", "yellow" e "purple"

  • apparence: A aparencia do componente.

    • circle é a opçāo padrāo. Define o arredondamento em 50%.
    • card para exibição fora de uma caixa delimitada
    • inline para exibição do alera sem bordas

  • marginLeft: espaçamento a esquerda

  • marginRight: espaçamento a direita

  • src: caminho da imagem, caso exista

  • testId: valor usado em testes E2E