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

[Anonymous]

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

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

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' }
]);

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

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


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