UNPKG

@yandex/ui

Version:

Yandex UI components

github.com/bem/yandex-ui

96 lines (74 loc) • 13.9 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
# Image <a href='https://github.yandex-team.ru/search-interfaces/frontend/tree/master/packages/lego-components/src/Image' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Исходники]/[Github ][green]/badge.svg' /></a> <a href='https://search.yandex-team.ru/stsearch?text=Image.ts&facet.queue=ISL&facet.type=bug&facet.status=128' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Известные проблемы]/[Startrek][blue]/badge.svg' /></a> <!-- description:start --> Компонент для красивой загрузки картинок - Пока загружается картинка, пользователь будет видеть `<stub/>` - После загрузки картинки она будет плавно отображена поверх `<stub/>` - После плавного показана картинки `<stub/>` будет удалён из `DOM` - Если картинка загружается из кэша, то пользователь увидит сразу картинку без показа `<stub/>` - Если картинку не удалось загрузить, то покажется стандартная картинка из свойства `fallback` <!-- description:end --> ## Пример использования ```ts // src/App.ts import React from 'react' import { Image } from '@yandex-lego/components/Image/desktop' // Использование компонента в вашем приложении const App = () => ( <Image src="https://yastatic.net/lego/_/Kx6F6RQnQFitm0qRxX7vpvfP0K0.png" src2x="https://yastatic.net/lego/_/Kx6F6RQnQFitm0qRxX7vpvfP0K0.png" alt="Alternative text" /> ) ``` ## Примеры ### Ширина, высота и скругления изображения Чтобы задать ширину, высоту и скругления изображения, используйте свойства `width`, `height` и `borderRadius`. {{%story::desktop:content-image-desktop--width-and-height%}} ### Адаптивное изображение Изображение для ретины — `src2x`. Чтобы более гибко настроить адаптивные изображения, используйте свойства `sizes` и `srcSet`. {{%story::desktop:content-image-desktop--sizes-and-srcset%}} ### Заглушки для изображений Компонент состоит из трех частей: ```html <container> <img/> <stub/> </container> ``` ```typescript jsx import React from 'react'; import { Image } from '@yandex-lego/components/Image/desktop'; const App: React.FC = () => { return ( <Image className="my-image" stub={<MyImageStub/>} /> ); }; ``` {{%story::desktop:content-image-desktop--load-error-stub%}} ## Свойства <!-- props:start --> | Свойство | Тип | Описание | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | innerRef? | `RefObject<HTMLImageElement>` | Ссылка на корневой DOM-элемент компонента | | src? | `string` | Ссылка на изображение | | srcSet? | `string` | Набор источников для создания [адаптивных изображений](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). Подробнее об атрибуте `srcSet` в документации [MDN web docs](https://developer.mozilla.org/ru/docs/Web/HTML/Element/img#attr-srcset) | | sizes? | `string` | Набор размеров для создания [адаптивных изображений](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). Подробнее об атрибуте `sizes` в документации [MDN web docs](https://developer.mozilla.org/ru/docs/Web/HTML/Element/img#attr-sizes) | | src2x? | `string` | URL картинки для экранов с высокой плотностью пикселей = srcSet: "url 2x". srcSet имеет приоритет. | | fallbackSrc? | `string` | Ссылка на изображение при неудачной загрузке | | className? | `string` | Дополнительный класс | | imageClassName? | `string` | Дополнительный класс для изображения | | stub? | `string \| number \| false \| true \| {} \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)> \| ReactNodeArray \| ReactPortal` | Компонент для отображения во время загрузки картинки | | alt? | `string` | Альтернативный текст | | ariaLabel? | `string` | атрибут aria-label | | onClick? | `(event: MouseEvent<HTMLElement, MouseEvent>) => void` | обработчик клика | | loading? | `"lazy" \| "eager" \| "auto"` | атрибут [loading у изображения](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading) | | width? | `string \| number` | Ширина изображения | | height? | `string \| number` | Высота изображения | | borderRadius? | `string \| number` | Скругления изображения | <!-- props:end --> ## Смотрите также - <a href='https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images' target="_blank">Adaptive Images</a>