Ваадин Диалог изменить размер программно - PullRequest
Новая
       11

Ваадин Диалог изменить размер программно

0 голосов
/ 17 марта 2020

Vaadin 14.2.0.alpha7 добавил новую функциональность в компонент Dialog (https://vaadin.com/api/platform/14.2.0.alpha7/com/vaadin/flow/component/dialog/Dialog.html), особенно доступность изменения размера. К сожалению, мне не удалось найти способ создания диалога с шириной, и мне не нужно ни устанавливать ширину программно после открытия диалога.

Вот несколько строк кода, которые я использую для описанных целей (безуспешно): 

    dialog.isResizable = true

    dialog.width = "900px"


    dialog.addOpenedChangeListener { event ->

        println("!!!opened-changed event fired")

        dialog.width = "900px"

        println("!!!dialog width = ${dialog.width}")
    }

    dialog.addResizeListener { event ->

        println("!!! on resize event width = ${dialog.width}")
    }

Когда я открываю диалоговое окно, оно появляется с его ограниченной шириной (около 500 пикселей), вызывается событие OpenedChanged и печатается, что диалоговое окно имеет ширину 900 пикселей (а его нет!), Когда я изменяю его размер вручную Событие Resize запускается и печатает, что диалоговое окно имеет ширину около 600 пикселей (после того, как я немного увеличил его вручную с помощью мыши).

Я знаю, что ранние версии Dialog имели ограниченную ширину (около 500 пикселей) в шаблонах, и существует обходной путь с импортом стилей для настройки ширины диалога. Я надеялся с новой версией увеличить ширину диалога, не касаясь шаблонов и на стороне клиента.

Есть ли способ установить ширину диалога и настроить его открытие программным способом, не касаясь шаблонов на стороне клиента?

PS Версия 14.2.0 объявлена ​​для публикации в апреле, поэтому я считаю, что этот вопрос подходит даже для его предварительной версии.

1 Ответ

1 голос
/ 17 марта 2020

Это происходит из-за настройки max-width ~ 560px, соответствующей дизайну материалов . Об этом можно узнать здесь: Размер диалога - Тема материала . (В стандартной теме Lumo это работает из коробки. Вы можете проверить это, закомментировав @Theme(value = Material::class, variant = Material.LIGHT) в MainLayout.kt)

К сожалению, поскольку стиль нацелен на часть overlay, единственный способ преодолеть это с помощью файлов стилей. С другой стороны, в текущей версии это должно быть довольно просто :)

Я создал запрос на извлечение репозитория с необходимыми изменениями. Не стесняйтесь использовать его, если хотите Сделайте так, чтобы ширина принимала значения больше 500px :)

...