Element

Элементы, которые можно использовать в 2д контексте - на экране, или в Container3D.

backdropFilter

Устанавливает фильтр для фона элемента. Фильтр применяется к фону элемента, а не к самому элементу. Поддерживается только blur, который позволяет размыть фон элемента.

Element backdropFilter(String filter);

el.backdropFilter("blur(10)");
el.backdropFilter("blur(sin(age) * 10 + 10)");

background

Устанавливает цвет фона элемента.

Element background(int color);

el.background(0x88888888);
el.background(IntColor.BLACK);

backgroundGradient

Устанавливает градиент на фон элемента. Градиент рисуется сверху вниз.

Element backgroundGradient(int color1, int color2);

el.backgroundGradient(0xff0000ff, 0xff00ffff);

backgroundImage

Устанавливает изображение на фон элемента. Если также задан background, то цвет изображения будет изменен.

Element backgroundImage(String path);
Element backgroundImage(GraphenResource image);

el.backgroundImage("https://i.imgur.com/91jsciR.jpeg");
el.backgroundImage(Textures.SOME_IMAGE);

backgroundImage9Slice

Фоновое изображение будет разделено на 9 частей, что позволит растягивать его по краям, сохраняя при этом пропорции углов. Это позволяет избежать искажения изображения при изменении размеров элемента. https://create.roblox.com/docs/ui/9-slice.

Element backgroundImage9Slice(NineSlice slice);
new NineSlice(left, top, right, bottom);
new NineSlice(left, top, right, bottom, scale);

el.backgroundImage9Slice(new NineSlice(10, 10, 10, 10));
el.backgroundImage9Slice(new NineSlice(10, 10, 10, 10, 0.5f));

color

Устанавливает цвет контента элемента (текст, изображение). Влияет только на контент, фон живет своей жизнью.

Element color(int color);

el.color(0xff0000ff);
el.color(IntColor.RED);

duration

Время жизни элемента в миллисекундах. По умолчанию -1, что означает, что элемент будет жить вечно.

Element duration(int millis);

el.duration(2000);

executeEveryTick

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

executeEveryTick(String expr);

el.executeEveryTick("if (!focus) $menuOpen = false");

flowAlign

Устанавливает выравнивание элемента в Layout.FLOW. По умолчанию - FlowAlign.START.

Element flowAlign(FlowAlign align);

el.flowAlign(FlowAlign.MIDDLE);

focusable

Переопределяет стандартное поведение фокуса элемента.

В фокусе может быть только один элемент. Фокус получается при клике на элемент. По умолчанию элемент может быть взят в фокус только если у него есть обрабочики FOCUS_IN, FOCUS_OUT, MOUSE_CLICK_LEFT, MOUSE_CLICK_RIGHT, MOUSE_PRESS или в любых его выражениях используется переменная focus.

Element focusable(boolean focusable);

el.focusable(true);

el.marginTop("focus ? 5 : 10");
// el.focusable(true); // не нужно

height

Устанавливает высоту элемента. Переменная auto может использоваться как стандартное значение.

Element height(float value);
Element height(String expr);

el.height(100);
el.height("50%");
el.height("min(100%, auto)");
el.height("ch + py"); // стандартная высота элемента == auto

id

Устанавливает id элемента. Он должен быть уникальным в пределах контейнера, в котором находится элемент.

Если id начинается с #, то он будет глобальным и будет храниться в ближнем контейнере, который имеет флаг contentRoot. Обращаться к нему можно будет по этому id из любого дочернего элемента этого контейнера.

Element id(String id);

el.id("my_id");
el.id("#my_global_id");

margin

Устанавливает отступы элемента от края контейнера или других элементов. Также может использоваться для абсолютного позиционирования элемента если указан position.

Element margin(float value);
Element margin(String expr);
Element margin(float left, float top, float right, float bottom);
Element margin(String left, String top, String right, String bottom);
Element marginLeft(float value);
Element marginLeft(String expr);
Element marginTop(float value);
Element marginTop(String expr);
Element marginRight(float value);
Element marginRight(String expr);
Element marginBottom(float value);
Element marginBottom(String expr);

el.margin(10);
el.margin("10%");
el.margin(10, 0, 10, 0);

on

Устанавливает обработчик события элемента. Стандартные события определены енумом Trigger, но также можно использовать произвольные выражения. Событие будет вызвано как только значение выражения изменится с ложного (0) на истинное (!= 0).

Клики мышкой

Для обработки обычного клика, используйте Trigger.MOUSE_CLICK_LEFT или Trigger.MOUSE_CLICK_RIGHT. Они вызываются при отпускании кнопки мыши над элементом.

Порядок ивентов при клике:

• Trigger.MOUSE_PRESS - вызывается при нажатии кнопки мыши над элементом
• Trigger.MOUSE_RELEASE - вызывается при отпускании кнопки, независимо от того над элементом или нет
• * Trigger.MOUSE_CLICK_LEFT и Trigger.MOUSE_CLICK_RIGHT - вызывается только если мышка была отпущена над элементом

JsonObject data = new JsonObject();
data.put("plugin", "my_plugin");
data.put("action", "some_button_clicked");
el.on(Trigger.MOUSE_CLICK_LEFT, new Edit().callback(data));

Для анимации при клике мышкой, используйте Trigger.MOUSE_PRESS и Trigger.MOUSE_RELEASE.

Анимации

Для упрощения создания анимаций и реакций на зеркальные события, к примеру, изменение скейла при наведении мыши, может автоматически генерироваться обработчик зеркальный заданному. Данные для возврата будут браться из текущего состояния элемента.

Зеркальные события:

• Trigger#MOUSE_IN - Trigger.MOUSE_OUT
• Trigger.VISIBLE_IN - Trigger.VISIBLE_OUT
• Trigger.FOCUS_IN - Trigger.FOCUS_OUT
• Trigger.MOUSE_PRESS - Trigger.MOUSE_RELEASE

Чтобы отключить это поведение, нужно добавить пустой эдит на событие on(Trigger.MOUSE_OUT, new Edit())

Element on(Trigger trigger, Edit edit);
Element on(String expr, Edit edit);

JsonObject callback = new JsonObject();
callback.put("key", "value");
// Отправка коллбека по клику
el.on(Trigger.MOUSE_CLICK_LEFT, new Edit().callback(callback));


// При ховере анимируем цвет фона, он вернется назад при уходе мыши
el.on(Trigger.MOUSE_IN, new Edit().transition(300).background(0xff0000ff));
// этот триггер будет сгенерирован автоматически, поэтому его можно не указывать
//el.on(Trigger.MOUSE_OUT, new Edit().transition(300).background(0xffffffff));


// Навсегда меняет цвет при активации фокуса
el.on(Trigger.FOCUS_IN, new Edit().background(0xff0000ff));
el.on(Trigger.FOCUS_OUT, new Edit()); // нужен чтобы отключить автоматический откат


// Мигаем каждые 4 секунды
el.on("floor(mod(age, 4)) == 0", new Edit()
    .transition(300)
    .opacity(0)
    .next(new Edit()
        .delay(300)
        .transition(300)
        .opacity(1))
);

opacity

Устанавливает прозрачность элемента. Значение от 0 до 1. Прозрачность применяется как к самому элементу, так и ко всем дочерним элементам.

Element opacity(float value);
Element opacity(String expr);

el.opacity(0.5f);
el.opacity("0.5 + 0.5*sin(age)");

order

Устанавливает порядок отрисовки элемента. Внутри одного контейнера элементы отрисовываются в порядке увеличения order. Если order одинаковый, то элементы отрисовываются в порядке добавления в контейнер. По умолчанию order равен 0. Значение должно быть в пределах от -127 до 127.

Element order(int value);

el.order(10);
el.order(-10);

padding

Устанавливает внутренние отступы элемента. Они входят в размер элемента, поэтому если элемент имеет фиксированный размер, то padding будет уменьшать размер контента.

Element padding(float value);
Element padding(String expr);
Element padding(float left, float top, float right, float bottom);
Element padding(String left, String top, String right, String bottom);
Element paddingLeft(float value);
Element paddingLeft(String expr);
Element paddingTop(float value);
Element paddingTop(String expr);
Element paddingRight(float value);
Element paddingRight(String expr);
Element paddingBottom(float value);
Element paddingBottom(String expr);

el.padding(10);
el.padding("10%");
el.padding(10, 0, 10, 0);

position

Устанавливает привязку элемента к краям контейнера. При использовании в Layout.FLOW элемент больше не занимает место в потоке, а привязывается к указанному краю. При использовании в Layout.TEXTERIA все то же самое.

Element position(Position position);

el.position(Position.CENTER);

rotate

Устанавливает угол поворота элемента в градусах.

Element rotate(float value);
Element rotate(String expr);

el.rotate(45);
el.rotate("age * 10");

scale

Устанавливает масштаб элемента. Масштаб применяется как к самому элементу, так и ко всем дочерним элементам.

Element scale(float value);
Element scale(String expr);
Element scale(float x, float y);
Element scale(String x, String y);

el.scale(2);
el.scale("min(1, age * 0.1)"); // плавно вырастает до 1

size

Устанавливает размер элемента. Сокращение для width и height. Переменная auto может использоваться как стандартное значение.

Element size(float value);
Element size(String expr);
Element size(float width, float height);
Element size(String width, String height);

el.size(100);
el.size("100%");
el.size(100, 50);

visibility

Устанавливает условие видимости элемента. Если условие истинно, элемент будет виден, иначе - скрыт. При изменении состояния видимости триггерятся ивенты Trigger.VISIBLE_IN и Trigger.VISIBLE_OUT.

Element visibility(String expr);

el.visibility("hover(my_id)");
el.visibility("hover(dropdown_button) || (visible && hover)");

width

Устанавливает ширину элемента. Переменная auto может использоваться как стандартное значение.

Element width(float value);
Element width(String expr);

el.width(100);
el.width("50%");
el.width("min(100, auto)");
el.width("cw + px"); // стандартная ширина элемента == auto