LeCodesdocs

UIButton, UIInput и UITextArea

Три элемента, принимающие ввод пользователя. UIButton — единственный тапабельный контейнер — обработчики касаний существуют только на UIButton, UIScreen и UIWidget (см. События указателя); чтобы сделать что-либо кликабельным (карточку, строку списка, иконку), оберни это в UIButton. UIInput — однострочное текстовое поле, UITextArea — его многострочный собрат.

Обзор

TypeScript
let input: UIInput

const form = UIColumn([
  input = UIInput()
    .style({ height: 40, px: 12, borderRadius: 8, bgColor: "white", color: "black",
             placeholder: "Your name", placeholderColor: "#999" })
    .onChange(v => console.log("typing:", v)),
  UIButton([ UIText("Submit").style({ color: "white" }) ])
    .style({ height: 40, justifyContent: "center", bgColor: "#FF4032", borderRadius: 8,
             onPressed: { opacity: 0.7 }, rippleColor: "default" })
    .onClick(() => console.log("submitted:", input.value)),
]).style({ gap: 8 })

UIButton

TypeScript
UIButton(): UIButton
UIButton(children: UINodeChild[]): UIButton

Контейнер, действующий как UIRow с вертикально центрированными детьми. Полная поверхность контейнера: .append / .insert / .remove / .setContent, .style, .animateTo / .animateFrom, .onLayout. Используй flexDirection: "column" для кнопки в форме карточки.

TypeScript
button.onClick(ev => …)        // отпускание над кнопкой; ev: ClickEvent
button.onTouchStart(ev => …)   // нажатие; ev.track({...}) начинает жест перетаскивания
button.isPressed(): boolean    // true, пока палец сейчас на кнопке

События onClick / onTouchStart несут clientX / clientY / pointerId (логические px). Перетаскивания — ev.track(), claim — работают ровно как описано в События указателя.

Note

кнопки не рисуют собственного оформления — стилизуй их как любой контейнер (bgColor, borderRadius, отступы). Дай кнопке явный height: сама по себе она высотой только со свой текст.

Отклик на нажатие — по желанию

TypeScript
button.style({
  onPressed: { opacity: 0.7, bgColor: "#c22", duration: 150 },  // стиль во время нажатия
  rippleColor: "default",                                       // Android-ripple; или любой Color
})

Визуально при нажатии ничего не происходит, пока не попросишь. onPressed принимает рисуемые/базовые стили (bgColor, opacity, border*, transform, …), применяемые, пока палец внизу, плюс необязательный переход duration (мс). rippleColor — только Android и заменяет там визуал onPressed — так что установка обоих даёт ripple на Android и стиль onPressed на iOS.

Для стойкого визуального состояния, которое переключаешь сам (выбрано, отмечено, активно), а не управляемого системой, объяви класс стиля ($name) и переключай его через setClass/toggleClass — см. Классы стилей. onPressed всегда бьёт класс, пока нажато.

UIInput и UITextArea

TypeScript
UIInput(): UIInput          // однострочное поле
UITextArea(): UITextArea    // многострочное
TypeScript
input.value                          // get/set текущего текста (свойство контента, не стиль)
input.onChange(cb: (value: string) => void): this   // каждое изменение
input.onFocus(cb: () => void): this
input.onBlur(cb: () => void): this

Специфичные для инпута стили, поверх обычных стилей элемента + текста (fontSize, color, fontFamily, …):

TypeScript
input.style({
  placeholder: "Search…",
  placeholderColor: "#999",
  type: "search",                    // "text" (по умолчанию) | "password" | "search"
  onFocused: { borderColor: "#FF4032", duration: 150 },   // стиль во время фокуса (как onPressed)
})
Note

дай инпутам явный height и flexGrow: 1 (в строке) или width — инпут схлопывается до ширины своего плейсхолдера и высоты своего текста, он не растягивается как веб-<input>.

Note

события отправки нет — ни onSubmit, ни колбэка по клавише enter. Паттерн — кнопка Send/Submit UIButton рядом с полем, читающая input.value.

Подводные камни

TypeScript
// ✗ обработчик касания на обычном контейнере
UIColumn([...]).onTouchStart(cb)                 // нет такого метода — только UIButton/UIScreen/UIWidget
// ✓ оберни в UIButton
UIButton([...]).onTouchStart(cb)

// ✗ кнопка рядом с инпутом 40px сжимается до высоты своего текста
UIRow([ input.style({ height: 40 }), UIButton([icon]) ])
// ✓ дай контролам одинаковый явный height
UIRow([ input.style({ height: 40 }), UIButton([icon]).style({ height: 40 }) ])

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

← НазадТекст, изображения, видеоДальше →UIScreen · Router