Используйте полную ширину для компонентов SelectButton и ButtonGroup PrimeVue. ⇐ CSS

[Anonymous]

У меня есть следующая страница в приложении Vue 3, и на небольших экранах я хочу, чтобы компоненты SelectButton и ButtonGroup использовали полную ширину. Родительские компоненты используют полную ширину, однако внутренние кнопки должны растягиваться, чтобы равномерно использовать все доступное пространство. Я пробовал переопределить слоты, но в итоге сломал весь стиль. Мне бы также хотелось, чтобы компонент SelectButton был поднят.
Я использую PrimeVue V3 с PrimeFlex

Код: Выделить всё

import { ref, computed } from 'vue';
import SelectButton from 'primevue/selectbutton';
import ButtonGroup from 'primevue/buttongroup';
import Button from 'primevue/button';

const ptSelected = ref("");

const ptSelectOptions = computed(() => [
{ name: '1', value: 'allPractitioner' },
{ name: '2', value: 'onlyWorking' },
{ name: '3', value: 'selected' }
]);

На большом экране:


На маленьком экране (мкм или меньше) каждый элемент должен располагаться в отдельных строках и использовать всю ширину. Что касается компонента ButtonGroup, шевроны должны оставаться небольшими, но две другие кнопки должны занимать все пространство



Подробнее здесь: https://stackoverflow.com/questions/791 ... components