сделать отзывчивой группу кнопок дизайна ясности

Как сделать группу кнопок ясности дизайна отзывчивой, как кнопка ясности?

это фактическое поведение группы кнопок ясности:

это фактическое поведение группы кнопок ясности:

а вот поведение кнопки нормальной четкости:

поведение кнопки нормальной четкости

Как видите, ширина кнопки уменьшена, а текст переполняется многоточием.

Как я могу добавить те же свойства в группу кнопок?

моя зависимость:

"@angular/animations": "^9.0.5",
"@angular/common": "^9.0.5",
"@angular/compiler": "^9.0.5",
"@angular/core": "^9.0.5",
"@angular/forms": "^9.0.5",
"@angular/platform-browser": "^9.0.5",
"@angular/platform-browser-dynamic": "^9.0.5",
"@angular/router": "^9.0.5",
"@clr/angular": "^2.3.8",
"@clr/icons": "^2.3.8",
"@clr/ui": "^2.3.8",

button css responsive vmware-clarity buttongroup
person Solinas3000    schedule 24.03.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, я нашел решение

поместите эти правила css в группу кнопок

.btn-group {
  display: flex;
}

и на ваш лейбл

label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

это должно быть нормальным поведением, но в любом случае это работает

person Solinas3000    schedule 24.03.2020
comment
Причина, по которой мы этого не делаем, заключается в том, что такой скрытый текст является нарушением доступности. Пользователи должны иметь возможность видеть все содержимое элемента для правильного доступа к параметрам, особенно в интерактивном элементе, таком как кнопка. - person Jeremy Wilken; 24.03.2020