-
Notifications
You must be signed in to change notification settings - Fork 198
[Feature]: Сделать свойства компонентов раскладки адаптивными #8932
Copy link
Copy link
Open
Description
- caused by [RFC] Адаптивные свойства компонентов раскладки #8838
- relates to [Feature]: поддержка DESKTOP брейкпойнта в хуке useAdaptivityConditionalRender #6896
Компоненты
Помимо новых свойств из #8871:
-
directiongapnoWrapalignjustifyreverse
-
aligncolumnsgapminColWidth
-
sizepaddingdirectionalign
-
size
Брейкпоинты
Для свойств выше нужно расширить количество брейкпоинтов, а также внести новое именование.
| Новое именование | Значение | const BREAKPOINTS |
const MEDIA_QUERIES |
ViewWidth |
|---|---|---|---|---|
| initial | 0px | SMALL_MOBILE |
||
| mobile | 320px | MOBILE |
||
| smallTable | 768px | SMALL_TABLET |
SMALL_TABLET_PLUS |
SMALL_TABLET |
| table | 1024px | TABLET |
TABLET |
|
| desktop | 1280px | DESKTOP |
DESKTOP_PLUS |
DESKTOP |
| * compact | (pointer: fine) and (min-width: 768px), (max-height: 414.9px); | |||
| * regular | (pointer: coarse) and (min-height: 415px), (pointer: none) and (min-height: 415px), (max-width: 767.9px) and (min-height: 415px); |
*
Тогда придётся реагировать на контекст
AdaptivityProviderКейс, который нужно проверить
<Flex padding={{ compact: 's', regular: 'm' }} />
В колонках 3-5 примерные сопоставления с тем, что уже сейчас есть. Используются для:
Требование
- Mobile First
- контекст
AdaptivityProviderучитывать пока не будем
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
🔜 To do