Avatar
Tamanhos
Quem tem acesso
import { Avatar } from '@rivocode/ui'Quando usar
Foto de pessoa, com a inicial por trás.
A inicial não aparece de imediato: a Base UI espera um instante, para a foto que carrega rápido não piscar a letra antes.
No React Native
Traduz: o @rivocode/ui-native exporta Avatar - src remoto pela Image do core; fallback é obrigatório, porque é ele que aparece enquanto a foto baixa e se ela falhar. A API não é a mesma do web (no nativo tudo é controlado), e a tabela de paridade diz o que muda peça a peça.
API
| Prop | Tipo |
|---|---|
alt0.4.0Descricao da foto. | string |
fallback0.4.0O que aparece sem foto, ou enquanto ela carrega. | string |
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, AvatarRootState>ReactElement<unknown, stringJSXElementConstructor<any>> |
size0.4.0 | "lg""md""sm"null |
src0.4.0 | string |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.
Partes
Avatar se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.
AvatarGroup
/avatar-group.mdA fila de pessoas de um lugar: quem participa, quem assinou, quem tem acesso.
Duas decisões moram na peça para não serem tomadas cinco vezes diferentes.
A sobreposição corta a inicial: com duas letras, o avatar de cima cobre a segunda letra do de baixo e o que sobra é um borrão. A fila usa uma letra só, e faz isso sozinha em vez de pedir que quem chama saiba disso.
O excedente vira "+n" e não some. Uma fila de três com mais dez escondidos mente sobre o tamanho do grupo, e o número é justamente o que a pessoa procura ali.
| Prop | Tipo |
|---|---|
max0.5.0Quantos aparecem antes do "+n". | number |
size0.5.0O tamanho vale para a fila inteira, inclusive para o "+n". | "lg""md""sm"null |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.