Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity

Fix invisible text on numeric avatar status example (#3038)

Browse Source 
Closes #3033
This commit is contained in:
Bartosz-Do authored and GitHub committed 2026-09-12 18:06:23 +02:00
1 parent 127c56b2ae
commit 86ac4f11ab
2 files changed
+167 -124
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.changeset/fix-avatar-status-badge-text.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/docs": patch
---
Fixed the unreadable "5" badge in the avatar status docs example by adding `text-gray-100`.
docs/content/ui/components/avatar.mdx
+162 -124
View File
@@ -34,21 +34,22 @@ classnames:
- class: avatar-{size} - class: avatar-{size}
desc: From avatar-xxs to avatar-2xl; avatar-list-{size} sizes a whole list desc: From avatar-xxs to avatar-2xl; avatar-list-{size} sizes a whole list
--- ---
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro'; import Example from '@components/Example.astro'
import AvatarList from '@ui/AvatarList.astro'; import Icon from '@ui/Icon.astro'
import CodeDocs from '@components/CodeDocs.astro'; import AvatarList from '@ui/AvatarList.astro'
import CodeDocs from '@components/CodeDocs.astro'
## Default markup ## Default markup
Add the `avatar` class to a `span`. Fill it with a picture as a `background-image`, or with initials as text. Add the `avatar` class to a `span`. Fill it with a picture as a `background-image`, or with initials as text.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<span class="avatar" style="background-image: url(/static/avatars/002f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/002f.jpg)"></span>
<span class="avatar">JL</span> <span class="avatar">JL</span>
<span class="avatar" style="background-image: url(/static/avatars/004f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/004f.jpg)"></span>
</AvatarList> </AvatarList>
</Example> </Example>
## Avatar image ## Avatar image
@@ -56,11 +57,11 @@ Add the `avatar` class to a `span`. Fill it with a picture as a `background-imag
Set the picture as a `background-image` on the avatar. It's cropped to the avatar's shape and size. Set the picture as a `background-image` on the avatar. It's cropped to the avatar's shape and size.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
<span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"></span>
<span class="avatar" style="background-image: url(/static/avatars/036m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/036m.jpg)"></span>
</AvatarList> </AvatarList>
</Example> </Example>
## Initials ## Initials
@@ -68,13 +69,13 @@ Set the picture as a `background-image` on the avatar. It's cropped to the avata
When there is no picture, put the initials as text inside the avatar. When there is no picture, put the initials as text inside the avatar.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<span class="avatar">AB</span> <span class="avatar">AB</span>
<span class="avatar">CD</span> <span class="avatar">CD</span>
<span class="avatar">EF</span> <span class="avatar">EF</span>
<span class="avatar">GH</span> <span class="avatar">GH</span>
<span class="avatar">IJ</span> <span class="avatar">IJ</span>
</AvatarList> </AvatarList>
</Example> </Example>
## Avatar icons ## Avatar icons
@@ -82,11 +83,17 @@ When there is no picture, put the initials as text inside the avatar.
An [icon](/ui/components/icon) inside the avatar works as a placeholder, or for an account that isn't a person, such as a system user. An [icon](/ui/components/icon) inside the avatar works as a placeholder, or for an account that isn't a person, such as a system user.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<span class="avatar"><Icon name="user" /></span> <span class="avatar">
<span class="avatar"><Icon name="plus" /></span> <Icon name="user" />
<span class="avatar"><Icon name="settings" /></span> </span>
</AvatarList> <span class="avatar">
<Icon name="plus" />
</span>
<span class="avatar">
<Icon name="settings" />
</span>
</AvatarList>
</Example> </Example>
## Avatar initials color ## Avatar initials color
@@ -94,13 +101,13 @@ An [icon](/ui/components/icon) inside the avatar works as a placeholder, or for
Set the background with a `bg-*` class from the [color palette](/ui/base/colors). It's most useful with initials. Set the background with a `bg-*` class from the [color palette](/ui/base/colors). It's most useful with initials.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<span class="avatar bg-green-lt">AB</span> <span class="avatar bg-green-lt">AB</span>
<span class="avatar bg-red-lt">CD</span> <span class="avatar bg-red-lt">CD</span>
<span class="avatar bg-yellow-lt">EF</span> <span class="avatar bg-yellow-lt">EF</span>
<span class="avatar bg-primary-lt">GH</span> <span class="avatar bg-primary-lt">GH</span>
<span class="avatar bg-purple-lt">IJ</span> <span class="avatar bg-purple-lt">IJ</span>
</AvatarList> </AvatarList>
</Example> </Example>
## Avatar size ## Avatar size
@@ -108,13 +115,13 @@ Set the background with a `bg-*` class from the [color palette](/ui/base/colors)
Add a size class from `avatar-xxs` to `avatar-2xl`. The names follow the usual Bootstrap pattern. Add a size class from `avatar-xxs` to `avatar-2xl`. The names follow the usual Bootstrap pattern.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span>
<span class="avatar avatar-lg" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-lg" style="background-image: url(/static/avatars/000m.jpg)"></span>
<span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span>
<span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span>
<span class="avatar avatar-xs" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-xs" style="background-image: url(/static/avatars/000m.jpg)"></span>
</AvatarList> </AvatarList>
</Example> </Example>
## Avatar status ## Avatar status
@@ -122,22 +129,25 @@ Add a size class from `avatar-xxs` to `avatar-2xl`. The names follow the usual B
Add a [status indicator](/ui/components/status) to show whether a user is online, or a small count such as unread messages. Add a [status indicator](/ui/components/status) to show whether a user is online, or a small count such as unread messages.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<span class="avatar" style="background-image: url(/static/avatars/018m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/018m.jpg)"></span>
<span class="avatar" style="background-image: url(/static/avatars/015m.jpg)"> <span class="avatar" style="background-image: url(/static/avatars/015m.jpg)">
<span class="badge bg-danger"></span> <span class="badge bg-danger"></span>
</span> </span>
<span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)">
<span class="badge bg-success"></span> <span class="badge bg-success"></span>
</span> </span>
<span class="avatar"> <span class="badge bg-warning"></span> SA </span> <span class="avatar">
<span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> {' '}
<span class="badge bg-info"></span> <span class="badge bg-warning"></span> SA{' '}
</span> </span>
<span class="avatar" style="background-image: url(/static/avatars/048m.jpg)"> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)">
<span class="badge bg-gray-500">5</span> <span class="badge bg-info"></span>
</span> </span>
</AvatarList> <span class="avatar" style="background-image: url(/static/avatars/048m.jpg)">
<span class="badge bg-gray-500 text-gray-100">5</span>
</span>
</AvatarList>
</Example> </Example>
## Avatar shape ## Avatar shape
@@ -145,21 +155,21 @@ Add a [status indicator](/ui/components/status) to show whether a user is online
An avatar is a circle by default. Add `avatar-square` to give it the same rounded corners as the rest of the interface - the usual choice when the avatar stands for a company, a project or an app rather than a person. An avatar is a circle by default. Add `avatar-square` to give it the same rounded corners as the rest of the interface - the usual choice when the avatar stands for a company, a project or an app rather than a person.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<span class="avatar" style="background-image: url(/static/avatars/019m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/019m.jpg)"></span>
<span class="avatar avatar-square" style="background-image: url(/static/avatars/039f.jpg)"></span> <span class="avatar avatar-square" style="background-image: url(/static/avatars/039f.jpg)"></span>
<span class="avatar avatar-square bg-primary text-white">TB</span> <span class="avatar avatar-square bg-primary text-white">TB</span>
<span class="avatar avatar-square bg-green-lt">AA</span> <span class="avatar avatar-square bg-green-lt">AA</span>
</AvatarList> </AvatarList>
</Example> </Example>
For any other radius use the Bootstrap utilities. `rounded-0` gives sharp corners, and `rounded-3` a larger radius than `avatar-square`. For any other radius use the Bootstrap utilities. `rounded-0` gives sharp corners, and `rounded-3` a larger radius than `avatar-square`.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<span class="avatar rounded-0" style="background-image: url(/static/avatars/043f.jpg)"></span> <span class="avatar rounded-0" style="background-image: url(/static/avatars/043f.jpg)"></span>
<span class="avatar rounded-3" style="background-image: url(/static/avatars/044f.jpg)"></span> <span class="avatar rounded-3" style="background-image: url(/static/avatars/044f.jpg)"></span>
</AvatarList> </AvatarList>
</Example> </Example>
## Avatar brand ## Avatar brand
@@ -167,14 +177,14 @@ For any other radius use the Bootstrap utilities. `rounded-0` gives sharp corner
Add a `avatar-brand` element inside an avatar to mark where the account comes from. It sits in the bottom corner and keeps its own background, so a brand logo stays readable over any photo. Add a `avatar-brand` element inside an avatar to mark where the account comes from. It sits in the bottom corner and keeps its own background, so a brand logo stays readable over any photo.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"> <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)">
<span class="avatar-brand" style="background-image: url(/static/brands/github.svg)"></span> <span class="avatar-brand" style="background-image: url(/static/brands/github.svg)"></span>
</span> </span>
<span class="avatar" style="background-image: url(/static/avatars/002m.jpg)"> <span class="avatar" style="background-image: url(/static/avatars/002m.jpg)">
<span class="avatar-brand" style="background-image: url(/static/brands/google.svg)"></span> <span class="avatar-brand" style="background-image: url(/static/brands/google.svg)"></span>
</span> </span>
</AvatarList> </AvatarList>
</Example> </Example>
## Avatar on a cover ## Avatar on a cover
@@ -182,16 +192,16 @@ Add a `avatar-brand` element inside an avatar to mark where the account comes fr
Add `avatar-cover` to pull an avatar halfway over the element above it and draw a ring in the card background color. Use it for a profile picture that overlaps a cover image. Add `avatar-cover` to pull an avatar halfway over the element above it and draw a ring in the card background color. Use it for a profile picture that overlaps a cover image.
<Example> <Example>
<div class="card" style="max-width: 20rem"> <div class="card" style="max-width: 20rem">
<div class="card-body p-0"> <div class="card-body p-0">
<div class="bg-primary-lt" style="height: 5rem"></div> <div class="bg-primary-lt" style="height: 5rem"></div>
<div class="text-center p-3"> <div class="text-center p-3">
<span class="avatar avatar-xl avatar-cover rounded-circle mb-3" style="background-image: url(/static/avatars/039f.jpg)"></span> <span class="avatar avatar-xl avatar-cover rounded-circle mb-3" style="background-image: url(/static/avatars/039f.jpg)"></span>
<div class="fw-medium">Paweł Kuna</div> <div class="fw-medium">Paweł Kuna</div>
<div class="text-secondary">UI Designer</div> <div class="text-secondary">UI Designer</div>
</div>
</div> </div>
</div> </div>
</div>
</Example> </Example>
## Avatar upload ## Avatar upload
@@ -201,11 +211,17 @@ Use the `avatar-upload` class together with `avatar` to show an empty avatar slo
Put an icon inside to show the action. The variant is often used as a link or a button. Put an icon inside to show the action. The variant is often used as a link or a button.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<a href="#" class="avatar avatar-upload" aria-label="Upload photo"><Icon name="plus" /></a> <a href="#" class="avatar avatar-upload" aria-label="Upload photo">
<a href="#" class="avatar avatar-upload rounded" aria-label="Upload photo"><Icon name="plus" /></a> <Icon name="plus" />
<a href="#" class="avatar avatar-upload rounded-0" aria-label="Take photo"><Icon name="camera" /></a> </a>
</AvatarList> <a href="#" class="avatar avatar-upload rounded" aria-label="Upload photo">
<Icon name="plus" />
</a>
<a href="#" class="avatar avatar-upload rounded-0" aria-label="Take photo">
<Icon name="camera" />
</a>
</AvatarList>
</Example> </Example>
## Avatar upload size ## Avatar upload size
@@ -213,13 +229,23 @@ Put an icon inside to show the action. The variant is often used as a link or a
The upload avatar uses the same size classes as a normal avatar, from `avatar-xxs` to `avatar-2xl`. The upload avatar uses the same size classes as a normal avatar, from `avatar-xxs` to `avatar-2xl`.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<a href="#" class="avatar avatar-upload avatar-2xl rounded" aria-label="Upload photo"><Icon name="plus" /></a> <a href="#" class="avatar avatar-upload avatar-2xl rounded" aria-label="Upload photo">
<a href="#" class="avatar avatar-upload avatar-xl rounded" aria-label="Upload photo"><Icon name="plus" /></a> <Icon name="plus" />
<a href="#" class="avatar avatar-upload avatar-lg rounded" aria-label="Upload photo"><Icon name="plus" /></a> </a>
<a href="#" class="avatar avatar-upload rounded" aria-label="Upload photo"><Icon name="plus" /></a> <a href="#" class="avatar avatar-upload avatar-xl rounded" aria-label="Upload photo">
<a href="#" class="avatar avatar-upload avatar-sm rounded" aria-label="Upload photo"><Icon name="plus" /></a> <Icon name="plus" />
</AvatarList> </a>
<a href="#" class="avatar avatar-upload avatar-lg rounded" aria-label="Upload photo">
<Icon name="plus" />
</a>
<a href="#" class="avatar avatar-upload rounded" aria-label="Upload photo">
<Icon name="plus" />
</a>
<a href="#" class="avatar avatar-upload avatar-sm rounded" aria-label="Upload photo">
<Icon name="plus" />
</a>
</AvatarList>
</Example> </Example>
## Avatar upload text ## Avatar upload text
@@ -227,16 +253,16 @@ The upload avatar uses the same size classes as a normal avatar, from `avatar-xx
Add a short label under the icon with the `avatar-upload-text` class. The content is stacked in a column, so use this only in the larger sizes. The text is shown in uppercase, like all avatar text. Add a short label under the icon with the `avatar-upload-text` class. The content is stacked in a column, so use this only in the larger sizes. The text is shown in uppercase, like all avatar text.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<a href="#" class="avatar avatar-upload avatar-xl rounded"> <a href="#" class="avatar avatar-upload avatar-xl rounded">
<Icon name="plus" /> <Icon name="plus" />
<span class="avatar-upload-text">Upload</span> <span class="avatar-upload-text">Upload</span>
</a> </a>
<a href="#" class="avatar avatar-upload avatar-2xl rounded"> <a href="#" class="avatar avatar-upload avatar-2xl rounded">
<Icon name="camera" /> <Icon name="camera" />
<span class="avatar-upload-text">Add photo</span> <span class="avatar-upload-text">Add photo</span>
</a> </a>
</AvatarList> </AvatarList>
</Example> </Example>
## Avatar upload in a form ## Avatar upload in a form
@@ -244,18 +270,20 @@ Add a short label under the icon with the `avatar-upload-text` class. The conten
To pick a real file, use a `label` with the upload classes and connect it to a hidden file input. Add `cursor-pointer`, because the pointer cursor is only set for links. To pick a real file, use a `label` with the upload classes and connect it to a hidden file input. Add `cursor-pointer`, because the pointer cursor is only set for links.
<Example> <Example>
<div class="row align-items-end" style="width: 100%;"> <div class="row align-items-end" style="width: 100%;">
<div class="col-auto"> <div class="col-auto">
<label for="avatar-file" class="avatar avatar-upload avatar-lg rounded cursor-pointer"> <label for="avatar-file" class="avatar avatar-upload avatar-lg rounded cursor-pointer">
<Icon name="plus" /> <Icon name="plus" />
</label> </label>
<input type="file" id="avatar-file" class="visually-hidden" accept="image/*" /> <input type="file" id="avatar-file" class="visually-hidden" accept="image/*" />
</div>
<div class="col">
<label class="form-label" for="avatar-file">
Avatar
</label>
<div class="text-secondary">Click to upload a new avatar</div>
</div>
</div> </div>
<div class="col">
<label class="form-label" for="avatar-file">Avatar</label>
<div class="text-secondary">Click to upload a new avatar</div>
</div>
</div>
</Example> </Example>
## Avatar list ## Avatar list
@@ -263,13 +291,13 @@ To pick a real file, use a `label` with the upload classes and connect it to a h
Put several avatars in an `.avatar-list` container. It keeps consistent spacing between them and wraps them when there isn't enough space. Put several avatars in an `.avatar-list` container. It keeps consistent spacing between them and wraps them when there isn't enough space.
<Example centered> <Example centered>
<AvatarList> <AvatarList>
<span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span>
<span class="avatar rounded">JL</span> <span class="avatar rounded">JL</span>
<span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span>
<span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span>
<span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span>
</AvatarList> </AvatarList>
</Example> </Example>
## Stacked list ## Stacked list
@@ -277,11 +305,21 @@ Put several avatars in an `.avatar-list` container. It keeps consistent spacing
Add `avatar-list-stacked` to overlap the avatars, which fits a long list of participants into a small space. Add `avatar-list-stacked` to overlap the avatars, which fits a long list of participants into a small space.
<Example centered> <Example centered>
<AvatarList stacked={true}> <span class="avatar">EB</span> <span class="avatar" style="background-image: url(/static/avatars/026m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/028m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/030m.jpg)"></span> <span class="avatar">+8</span> </AvatarList> <AvatarList stacked={true}>
{' '}
<span class="avatar">EB</span> <span class="avatar" style="background-image: url(/static/avatars/026m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/028m.jpg)"></span>{' '}
<span class="avatar" style="background-image: url(/static/avatars/030m.jpg)"></span> <span class="avatar">+8</span>{' '}
</AvatarList>
</Example> </Example>
<Example centered> <Example centered>
<AvatarList stacked={true}> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/035m.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/027f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/036f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle">SA</span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/034f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/043f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/039f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/020m.jpg)" ></span> </AvatarList> <AvatarList stacked={true}>
{' '}
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/035m.jpg)"></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/027f.jpg)"></span>{' '}
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/036f.jpg)"></span> <span class="avatar avatar-sm rounded-circle">SA</span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/034f.jpg)"></span>{' '}
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/043f.jpg)"></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/039f.jpg)"></span>{' '}
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/020m.jpg)"></span>{' '}
</AvatarList>
</Example> </Example>
## Accessibility ## Accessibility