kopia lustrzana https://github.com/shoelace-style/shoelace
update alt attrib
Cory LaViska
rodzic
4de5f180b6
commit
d803ffcf95
|
|
@ -7,14 +7,14 @@ Avatars are used to represent a person or object.
|
|||
Like [images](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), you should always provide `alt` text for avatars as alternate text for assistive devices.
|
||||
|
||||
```html preview
|
||||
<sl-avatar alt="User avatar"></sl-avatar>
|
||||
<sl-avatar label="User avatar"></sl-avatar>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlAvatar alt="User avatar" />
|
||||
<SlAvatar label="User avatar" />
|
||||
);
|
||||
```
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ To use an image for the avatar, set the `image` and `alt` attributes. This will
|
|||
```html preview
|
||||
<sl-avatar
|
||||
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
|
||||
alt="Avatar of a gray tabby kitten looking down"
|
||||
label="Avatar of a gray tabby kitten looking down"
|
||||
></sl-avatar>
|
||||
```
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
|
|||
const App = () => (
|
||||
<SlAvatar
|
||||
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
|
||||
alt="Avatar of a gray tabby kitten looking down"
|
||||
label="Avatar of a gray tabby kitten looking down"
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
|
@ -47,14 +47,14 @@ const App = () => (
|
|||
When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.
|
||||
|
||||
```html preview
|
||||
<sl-avatar initials="SL" alt="Avatar with initials: SL"></sl-avatar>
|
||||
<sl-avatar initials="SL" label="Avatar with initials: SL"></sl-avatar>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlAvatar initials="SL" alt="Avatar with initials: SL" />
|
||||
<SlAvatar initials="SL" label="Avatar with initials: SL" />
|
||||
);
|
||||
```
|
||||
|
||||
|
|
@ -63,15 +63,15 @@ const App = () => (
|
|||
When no image or initials are set, an icon will be shown. The default avatar shows a generic "user" icon, but you can customize this with the `icon` slot.
|
||||
|
||||
```html preview
|
||||
<sl-avatar alt="Avatar with an image icon">
|
||||
<sl-avatar label="Avatar with an image icon">
|
||||
<sl-icon slot="icon" name="image"></sl-icon>
|
||||
</sl-avatar>
|
||||
|
||||
<sl-avatar alt="Avatar with an archive icon">
|
||||
<sl-avatar label="Avatar with an archive icon">
|
||||
<sl-icon slot="icon" name="archive"></sl-icon>
|
||||
</sl-avatar>
|
||||
|
||||
<sl-avatar alt="Avatar with a briefcase icon">
|
||||
<sl-avatar label="Avatar with a briefcase icon">
|
||||
<sl-icon slot="icon" name="briefcase"></sl-icon>
|
||||
</sl-avatar>
|
||||
```
|
||||
|
|
@ -81,15 +81,15 @@ import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
|||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlAvatar alt="Avatar with an image icon">
|
||||
<SlAvatar label="Avatar with an image icon">
|
||||
<SlIcon slot="icon" name="image" />
|
||||
</SlAvatar>
|
||||
|
||||
<SlAvatar alt="Avatar with an archive icon">
|
||||
<SlAvatar label="Avatar with an archive icon">
|
||||
<SlIcon slot="icon" name="archive" />
|
||||
</SlAvatar>
|
||||
|
||||
<SlAvatar alt="Avatar with a briefcase icon">
|
||||
<SlAvatar label="Avatar with a briefcase icon">
|
||||
<SlIcon slot="icon" name="briefcase" />
|
||||
</SlAvatar>
|
||||
</>
|
||||
|
|
@ -101,9 +101,9 @@ const App = () => (
|
|||
Avatars can be shaped using the `shape` attribute.
|
||||
|
||||
```html preview
|
||||
<sl-avatar shape="square" alt="Square avatar"></sl-avatar>
|
||||
<sl-avatar shape="rounded" alt="Rounded avatar"></sl-avatar>
|
||||
<sl-avatar shape="circle" alt="Circle avatar"></sl-avatar>
|
||||
<sl-avatar shape="square" label="Square avatar"></sl-avatar>
|
||||
<sl-avatar shape="rounded" label="Rounded avatar"></sl-avatar>
|
||||
<sl-avatar shape="circle" label="Circle avatar"></sl-avatar>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
|
|
@ -111,9 +111,9 @@ import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
|||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlAvatar shape="square" alt="Square avatar" />
|
||||
<SlAvatar shape="rounded" alt="Rounded avatar" />
|
||||
<SlAvatar shape="circle" alt="Circle avatar" />
|
||||
<SlAvatar shape="square" label="Square avatar" />
|
||||
<SlAvatar shape="rounded" label="Rounded avatar" />
|
||||
<SlAvatar shape="circle" label="Circle avatar" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
|
@ -126,22 +126,22 @@ You can group avatars with a few lines of CSS.
|
|||
<div class="avatar-group">
|
||||
<sl-avatar
|
||||
image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
|
||||
alt="Avatar 1 of 4"
|
||||
label="Avatar 1 of 4"
|
||||
></sl-avatar>
|
||||
|
||||
<sl-avatar
|
||||
image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
|
||||
alt="Avatar 2 of 4"
|
||||
label="Avatar 2 of 4"
|
||||
></sl-avatar>
|
||||
|
||||
<sl-avatar
|
||||
image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
|
||||
alt="Avatar 3 of 4"
|
||||
label="Avatar 3 of 4"
|
||||
></sl-avatar>
|
||||
|
||||
<sl-avatar
|
||||
image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
|
||||
alt="Avatar 4 of 4"
|
||||
label="Avatar 4 of 4"
|
||||
></sl-avatar>
|
||||
</div>
|
||||
|
||||
|
|
@ -174,22 +174,22 @@ const App = () => (
|
|||
<div className="avatar-group">
|
||||
<SlAvatar
|
||||
image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
|
||||
alt="Avatar 1 of 4"
|
||||
label="Avatar 1 of 4"
|
||||
/>
|
||||
|
||||
<SlAvatar
|
||||
image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
|
||||
alt="Avatar 2 of 4"
|
||||
label="Avatar 2 of 4"
|
||||
/>
|
||||
|
||||
<SlAvatar
|
||||
image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
|
||||
alt="Avatar 3 of 4"
|
||||
label="Avatar 3 of 4"
|
||||
/>
|
||||
|
||||
<SlAvatar
|
||||
image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
|
||||
alt="Avatar 4 of 4"
|
||||
label="Avatar 4 of 4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue