Пытаясь достичь чего-то в React-Semantic UI и не могу заставить его работать:
Я отображаю список сущностей (скажем, события) в вертикальном списке.
- Каждая сущность имеет массив связанных аватаров (скажем, участников).
- Для каждого события я хотел бы отобразить строку аватаров, которая точно соответствует ширине списка (таким образом, не более 1 строки аватаров для любого размера экрана), а затем иметь "+ N больше"аватар (" специальный "аватар) в конце строки.
- Каждый элемент списка сущностей размещается с использованием компонента
Grid.
Например, и в зависимости отна конечном размере аватара:
- Для мобильного дисплея: показать 2 аватара + специальный аватар (если их больше 2)
- Для дисплея планшета: показать 5 аватаров + специальный аватар (если большечем 5)
- Для отображения на рабочем столе: показать 15 аватаров + специальный аватар (если их больше 15)
Что я в основном пытаюсь сделать, это отобразить Grid.Rowдинамическое количество столбцов.Есть ли способ достичь этого без явных медиазапросов и прослушивателей событий размера окна?
Попытка с использованием функции семантической видимости устройства, но, если я правильно понимаю, потребует от меня расчета точного числа столбцов, которые вписываются вопределенного размера экрана, а затем начните использовать перестановки:
<Grid.Column only='tablet computer large screen wide screen>
Если мне нужно вычислить все вручную, возможно, лучше использовать горизонтальный List компонент?