button

Компонент button позволяет пользователю запускать действие.

XML-элемент

button

Java-класс

JmixButton

Основы

ДЕМО

Кнопка может отображать текст, значок или оба элемента. Всплывающая подсказка задаётся атрибутом title.

<button id="helloButton"
        text="Say hello!"
        title="Click me!"/>
<button id="saveButton1"
        text="Save"
        icon="ARCHIVE"/>
<button id="saveButton2"
        title="Save"
        icon="ARCHIVE"/>

Использование Action

ДЕМО

Используйте атрибут action, чтобы связать кнопку с существующим действие. Кнопка автоматически отображает текст действия, значок, включенное и видимое состояния и вызывает действие при нажатии.

Для действия экрана укажите в action его идентификатор. Для действия другого компонента используйте формат <componentId>.<actionId>.

<actions>
    <action id="someAction"
            text="Click me!"/>
</actions>
<layout>
    <button action="someAction"/>
</layout>

Кнопка с программным действием

ДЕМО

Действие можно создать в Java и назначить кнопке методом setAction(). Оно задаёт текст кнопки и операцию, которая выполняется при нажатии.

XML
<button id="buttonAction"/>
Java
@ViewComponent
protected JmixButton buttonAction;

@Autowired
protected Notifications notifications;

@Subscribe
protected void onInit(InitEvent event) {
    buttonAction.setAction(
            new BaseAction("action")
                    .withText("Click me!")
                    .withHandler(actionPerformedEvent -> notifications.show("Action performed"))
    );
}

Кнопка с изображением

ДЕМО

Значок кнопки может быть компонентом, например image. В следующем примере загружается изображение и присваивается его кнопке с помощью метода setIcon().

XML
<button id="logoButton" themeNames="icon"/>
Java
private static final String LOGO_SRC_PATH = "/META-INF/resources/icons/jmix-logo.png";
@ViewComponent
private JmixButton logoButton;
@Subscribe
public void onInit(InitEvent event) {
    Image logo = new Image(DownloadHandler.forClassResource(getClass(), LOGO_SRC_PATH), "jmix-logo");
    logo.setWidth("100px");
    logoButton.setIcon(logo);
}

Варианты

ДЕМО

Используйте атрибут themeNames, чтобы применить один или несколько вариантов темы.

Вариант Описание Поддерживается в

primary

Применяет основной стиль кнопки.

Aura, Lumo

success

Применяет стиль успеха.

Aura, Lumo

warning

Применяет стиль предупреждения.

Aura, Lumo

error

Применяет стиль ошибки.

Aura, Lumo

contrast

Применяет контрастный стиль.

Lumo

large

Увеличивает размер кнопки.

Aura, Lumo

small

Уменьшает размер кнопки.

Aura, Lumo

icon

Уменьшает отступы вокруг значка.

Aura, Lumo

tertiary

Применяет стиль кнопки с меньшим визуальным акцентом.

Aura, Lumo

tertiary-inline

Применяет встроенный стиль кнопки для использования внутри текстового содержимого.

Lumo

Атрибуты

button имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

action

Связывает кнопку с действием экрана или компонента. См. Кнопка с декларативным действием.

—

disableOnClick

Отключает кнопку сразу после нажатия, чтобы предотвратить повторную отправку. Чтобы снова включить кнопку, вызовите setEnabled(true).

false

icon

Устанавливает значок, отображаемый кнопкой.

—

iconAfterText

Помещает значок после текста кнопки.

false

whiteSpace

Управляет обработкой пробелов и разрывов строк в тексте кнопки.

NORMAL

button имеет следующие общие атрибуты:

id - alignSelf - ariaLabel - ariaLabelledBy - autofocus - classNames - css - enabled - focusShortcut - height - maxHeight - maxWidth - minHeight - minWidth - tabIndex - text - themeNames - title - visible - width

Обработчики

button имеет следующие уникальные обработчики:

Имя Описание

clickListener

Запускается, когда пользователь нажимает кнопку. Чтобы зарегистрировать обработчик программно, используйте метод addClickListener().

doubleClickListener

Запускается, когда пользователь дважды нажимает кнопку в течение короткого интервала.

singleClickListener

Запускается после небольшой задержки, когда определяется, что щелчок не является частью двойного щелчка.

button имеет следующие общие обработчики:

AttachEvent - BlurEvent - DetachEvent - FocusEvent

Элементы

Компонент button может содержать следующие вложенные элементы: icon, prefix and suffix, и tooltip.

Смотрите также