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

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

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»