Angular 用アバターコンポーネント

nuiAvatar コンポーネントは写真を表示し、写真がない場合や読み込みに失敗した場合は、その人のイニシャルを表示します。イニシャルの背景色は名前から計算されるため、同じ人はどこでも同じ色になります。

どの色相でも明度と彩度に上限を設けているため、名前やテーマにかかわらず、白いイニシャルのコントラスト比は常に 4.5:1 を上回ります。

イニシャル、写真、ステータス

src がない場合、イニシャルと色は name から決まります。status を指定すると、在席状況を示すドットが付きます。

nuiAvatarGroup は、アバターを1列に重ねて並べます。size には sm、md、lg を指定でき、shape="square" はチームやアプリに適しています。