moonshine
moonshine copied to clipboard
moonshine-software
Tabs vertical
Добавлена функциональность для вертикального отображения Tabs Использование:
<?php
...
Tabs::make(...)->vertical();
Метод принимает может принимать замыкание(которое должно возвращать логическое значение) или логическое значение.
ЗЫ: с фронотм не огонь (((. В связи с этим не могу победить поведение при hover и ._is_active на светлой теме, применяемый стиль при вертикальном режиме перекрывают hover и ._is_active, а именное из-за border-r-transparent.
мне не очень нравится идея с collapse табов в мобильных устройствах (интуитивно не понятно что там еще пункты), давайте проголосуем
я же имел ввиду просто все стили для вертикальных табов использовать только на больших экранах а на мобильных пускай остаются горизонтальные
мне не очень нравится идея с collapse табов в мобильных устройствах (интуитивно не понятно что там еще пункты), давайте проголосуем
я же имел ввиду просто все стили для вертикальных табов использовать только на больших экранах а на мобильных пускай остаются горизонтальные
Согласен с тобой
Как вариант можно их не скрывать а оставить вертикальной портянкой, просто когда будет много табов придется листать после выбора таба к самому контенту. Ну в принципе можно сделать при клике по табу переместить к контенту таба. А мне ну прям очень нравится 😍 когда табы скрываются.
данные изменения коснуться всех пользователей админки, не думаю что все обрадуются такому решению.
Collapse табов лучше вынести в отдельный пакет, а в коробке оставить стандартные решения
Как вариант, или можно сделать активацию схолаваания активации через метод табов. Если такое устроит посмотрю реализацию.
Как вариант, или можно сделать активацию схолаваания активации через метод табов. Если такое устроит посмотрю реализацию.
Как @lee-to решит, но мое мнение, что надо оставить табы без изменений, вертикальные табы только для десктопных устройств, а табы с collapse вынести во внешний пакет
Как вариант, или можно сделать активацию схолаваания активации через метод табов. Если такое устроит посмотрю реализацию.
Как @lee-to решит, но мое мнение, что надо оставить табы без изменений, вертикальные табы только для десктопных устройств, а табы с collapse вынести во внешний пакет
Да делаем стандартно как было
Вы легких путей не ищите ))
Для вертикальных табов добавлялся класс tabs-vertical, и чтоб стили работали только для десктопа достаточно было добавить ко всем классам внутри md: или lg: (какой будет лучше смотреться)
А теперь вы сделали, что MoonShine\Decorations\Tabs отвечает еще и за визуальное представление
Если использовать только классы tailwindcss то мы можем манипулировать только разрешением экрана. В моей доработке класс применятся в зависимости от размера блока в котором расположены вкладки.
Grid::make([
Column::make([
Block::make([
Tabs::make([
Tab::make('Вкладка 1', [
ID::make('№', 'id'),
Text::make('Название', 'name'),
Text::make('Примечание', 'description'),
]),
Tab::make('Вкладка 2'),
Tab::make('Вкладка 3'),
])->vertical(fn() => true, 600),
])
])->columnSpan(3)
])
Запись экрана_20240520_091143.webm
это я понял, просто если такое делать то вынести это в js и конфигурировать уже через data используя custonAttributes. пример можно глянуть tinymce, там не все настройки в классе. каких настроек нет можно установить через data
Добрый день! Не совсем понял Вы предлагаете вообще все, что связано с вертикальным отображением вынести в data атрибуты в том числе и и методы из Tabs?. Или только ширину блока с табами? Просто на мой взгляд проще написать vertical(true,200), чем vertical()->customAttributes(['data-box-width' => 200])