Кастомизация кнопки Button

Вопросы и проблемы
#1

Jmix version: 2.4.0 Jmix Studio plugin version: 2.4.0-242 IntelliJ version: IntelliJ IDEA 2024.2.4

Здравствуйте!
Есть задача сделать стартовый экран с большими кастомными кнопками, экран создаю с помощью студио типа blank, добавляю formLayout и в него уже добавляю кнопки (взял этот контейнер, потому что некоторые нужно будет скрывать в зависимости от ролей, а остальные должны при этом двигаться к верху). Для теста выглядит примерно так:

<layout>
        <formLayout>
            <button id="createDocButton" 
                    classNames="start-test-create-button" 
                    text="Создать документ"/>    
        </formLayout>
    </layout>

Подключаю css в проект:

@import url('start-view.css');

Добавляю в start-view.css:

.start-test-create-button {
    position: relative;
    width: 400px;
    height: 200px;
}

Теперь нужно взять надпись в этой кнопке и сместить её в левый нижний угол, при этом подредактировав шрифт, размер шрифта, цвет и т.п.

АИ-бот предлагает сделать следующее решение:

.start-test-create-button::after {
    content: "Создать документ";
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 5px;
    color: white;
}

Но кнопка не реагирует на эти настройки. Частично помогло через следующие методом подгонки:

.start-test-create-button::part(label) {
    color: white;
    font-size: 26px;
    margin-left: -500px;
    margin-bottom: -100px;
}

Но, насколько я понимаю, это не привязка к плоскостям кнопки, а просто двигаешь саму надпись, что при масштабировании браузера приведёт к сдвигам надписи. Судя по консоли разработчика в браузере, есть некий элемент div class="vaadin-button-container", в котором лежит элемент span этого лейбла. Но у меня никак не получилось настроить его через start-view.css.

Подскажите рабочее решение, чтобы можно было двигать label и привязывать его к границам кнопки.

тест проект: проект
(Не обращайте внимание на charts, тот же использовал просто).

#2

Здравствуйте, @nakls.

Да, лейбл находится внутри div class="vaadin-button-container", который и определяет положение его элементов - выравнивание в центре. Т.к. это элемент находится в Shadow DOM и не является ни part, ни slot, то для определения его стилей нужно создать специальный CSS файл для компонента кнопки, в котором CSS селектор для вложенного элемента div class="vaadin-button-container" будет работать. Об этом можно почитать в документации Vaddin.

Для решения вашей задачи:

  • Создать файл vaadin-button.css в директории frontend/themes/testCharts/components и определять стили для кнопки здесь вместо start-view.css
  • Определить стили для кнопки с классом start-test-create-button следующим образом:
    :host(.start-test-create-button) {
   position: relative;
   height: 200px;
   background-color: black;
}

:host(.start-test-create-button)::part(label) {
    color: white;
    font-size: 26px;
}

:host(.start-test-create-button) > div.vaadin-button-container {
    justify-content: start; /** определяет горизонтальное выравнивание дочерних элементов **/
    align-items: start; /** определяет вертикальное выравнивание дочерних элементов**/
}

С уважением,
Мария.

#3

Спасибо! Помогло, надписи подвинулись.

Не понял нужно ли делать это:

Disable Pre-Compiled Frontend Bundle
The loading of shadow DOM stylesheets from the components sub-folder isn’t compatible with the pre-compiled frontend bundle. To use this mechanism for loading shadow DOM styles, you need to disable the pre-compiled bundle.

И судя по всему на свойства из этого файла не работает hot deploy, приходилось перезапускать приложение.

Возможно мне стоит подумать о том чтобы поменять сам элемент кнопки на другой и также обрабатывать его нажатие. Только пришла эта мысль)