eskiueskiu-lang/ui
Componentes y APIs
De qué está hecha una app: los elementos que dibuja, los hooks que guardan su estado y los servicios del teléfono y del navegador. Cada uno funciona en iOS, Android y la web.
Layout
Los contenedores reciben su contenido como un bloque, y cada elemento recibe un Style. La guía →
Column(Style, block)Hijos de arriba abajo.Row(Style, block)Hijos de izquierda a derecha.Scroll(Style, block)Una columna cuyo contenido se desplaza cuando es más alto que el espacio que tiene.Pressable(Style, on_press, block)Una columna que responde a un toque en cualquier parte.Scope(name, Key, block)El scope propio de un componente: su estado, su identidad y su nombre en los diagnósticos.StyleTamaño, flexbox, colores, gradientes lineales, bordes, radio, sombra, un blur de vidrio esmerilado, un archivo de fuente de los assets, transformaciones y transiciones.Texto, botones y entrada
El texto, los botones y los controles son los de la plataforma, con su accesibilidad. La guía →
Text, TextWithTexto, copiado al recibirlo.Button, ButtonWithUn botón con título.TextInput(Input, on_change)Un campo de texto controlado, que avisa cada edición y, si se pide, el foco.Switch(Style, value, on_change)Un interruptor controlado.Slider(Style, value, min, max, on_change)Un slider controlado en pasos enteros: UISlider, SeekBar o un input de rango.Medios y listas
Las listas montan solo las filas cerca de lo visible, así que un millón de filas cuesta lo que una pantalla. La guía →
Image(Style, source)Una imagen desde una URL, los assets de la app o un archivo; con pixelated escala el pixel art sin suavizado.ActivityIndicator(Style, animating)El indicador de actividad de la plataforma.FlatList(Style, count, height, render)Una lista virtual de filas de altura fija.SectionList(Style, sizes, header, height, render)Lo mismo, en secciones con encabezados.RefreshControl(refreshing, on_refresh)Jalar para actualizar en el scroll o la lista que le sigue.Overlays
Capas sobre la pantalla. Atrás en Android, Escape en la web y un toque afuera las cierran. La guía →
Modal(visible, on_request_close, block)Contenido sobre toda la pantalla, con un fondo oscurecido.Overlay(visible, on_dismiss, block)La misma capa sin oscurecer, para contenido junto a algo.Alert(title, message, buttons, on_choice)La alerta de la plataforma.Movimiento y gestos
Las transformaciones se dibujan, no cambian el layout, y la plataforma las anima. La guía →
translate_x, translate_y, scale, rotateMueven, escalan y giran el elemento dibujado.transition_ms, easingAniman los cambios de la opacidad, las transformaciones y los colores; una de las curvas es un resorte.use_animated(target, ms, easing)Un número en camino a un nuevo valor.use_animated_then, use_repeat, use_sequenceUna animación que avisa cuando termina, una que se repite (también de ida y vuelta) y keyframes uno tras otro.use_frame(running, fn(Tick))Código en cada frame del display, con el tiempo desde el anterior, para juegos y dibujo.ui_on_long_press(fn())Una presión larga sobre el siguiente elemento.ui_on_pan(fn(Pan))Un arrastre sobre el siguiente elemento, con su distancia y su velocidad.ui_on_hover(fn(bool))Un puntero sobre el siguiente elemento.ui_on_layout(fn(Frame))El marco del siguiente elemento, en su padre y en la ventana.Estado
Un bloque registra las señales que lee y vuelve a correr cuando una cambia. La guía →
use_signal<T>(initial)Estado que el scope conserva mientras está montado.use_memo<T>(compute)Un valor derivado, calculado al leerlo.use_effect(callback), on_cleanupTrabajo después de un commit, con su limpieza.use_string(initial)Estado de texto, con conteo de referencias.signal_new<T>(initial)Una señal del modelo que ningún scope posee.use_interval, use_timeoutTemporizadores con el reloj de la plataforma.ErrorBoundary(fallback, block)Si un render adentro lanza una excepción, muestra el fallback en su lugar, hasta ui_boundary_reset.ui_on_error(handler)Recibe cada error que el runtime atrapa: en renders, handlers y efectos.Navegación
Una pila de rutas: pantallas en el teléfono, URLs e historial en la web. La guía →
router_new(root)Una pila de rutas, del modelo de la app.Navigator(router, screen)La pila como pantallas; las de abajo siguen montadas.push, back, replace, resetCambian la pila.route_param(pattern, route, index)Un parámetro de la ruta para su pantalla, que dura mientras la ruta está en la pila.route_match(pattern, route, params)"/places/:id" contra una ruta.use_back(handler)Toma el botón o gesto de atrás mientras está montado.ui_link(), ui_open_url(url)El link con que se abrió la app, y abrir uno.El sistema
Un nombre en todas las plataformas, respondido por el servicio de cada plataforma. La guía →
ui_platform()iOS, Android, la web o macOS.ui_color_scheme()Claro u oscuro, como el sistema.ui_screen_reader(), ui_reduce_motion(), ui_font_scale()Los ajustes de accesibilidad.ui_locale(), ui_is_rtl()El idioma y su dirección.ui_insets(), ui_window(), ui_is_active()El área segura y el teclado, la ventana, el primer plano.StatusBar(style, hidden)La barra de estado del sistema.ui_fetch(request, on_result)HTTP con la red de la plataforma.ui_storage_get, set, removeValores pequeños que sobreviven a la app.ui_data_dir()El directorio de datos de la app, para archivos.ui_share(text, url)La hoja para compartir del sistema.ui_clipboard_set, ui_clipboard_getCopiar y pegar.ui_haptic(kind)Vibraciones de selección, impacto y notificación.ui_announce(text)Lee un texto en voz alta con el lector de pantalla.ui_keyboard_dismiss()Oculta el teclado en pantalla.use_app_state(fn(bool))Avisa cuando la app pasa a segundo plano y cuando regresa.ui_app_version(), ui_config(key)La versión y el build, y valores de [env] en ui.toml, con [env.release] para las tiendas.ui_splash_hold(), ui_splash_hide()Mantiene la pantalla de arranque mientras cargan las fuentes o el estado guardado.use_cached_file(url)Un archivo remoto descargado una sola vez a la caché de la app, como ruta.ui_asset_path(name)Un archivo de los assets de la app como ruta, para paquetes que leen archivos.ui_open_settings()La página de la app en los ajustes del sistema, después de negar un permiso.Código nativo
Código por plataforma en native/, llamado con funciones extern. La guía →
NativeView(Style, type, on_event)Una vista que la app registró en cada host.ui_native_prop(name, value)Una prop con nombre para el NativeView que le sigue.use_native_event(channel, handler)Los eventos de un módulo nativo mientras está montado.ui.tomlFrameworks, permisos, entradas del plist, bibliotecas de Maven y paquetes de Swift.Paquetes
Paquetes para apps de ui: servicios de la plataforma con su código nativo y sus permisos, y dibujo. La guía →
location: use_location(precise)Dónde está el dispositivo, con CoreLocation, LocationManager y la geolocalización del navegador.location_distance(a, b)La distancia entre dos posiciones sobre la superficie de la Tierra.notifications: notification_schedule(id, title, body, seconds)Una notificación local, que se muestra también con la app cerrada; use_notification_opened recibe la que el usuario abre.camera: CameraView, camera_captureLa cámara en vivo, y lo que muestra como foto.camera: camera_pick_photo, camera_take_photoLa galería y la cámara del sistema.barcode: BarcodeScanner(Style, formats, scanning, on_code)Códigos QR y de barras leídos en vivo con la cámara.pedometer: use_steps(), use_steps_between(from, to)Pasos caminados, en vivo y entre dos momentos, también los que se dieron con la app cerrada.securestore: secure_set, secure_get, secure_removeSecretos pequeños en el Keychain y el Android Keystore.svg: Svg(Style, svg)Dibujos SVG escalados a su caja y teñidos con el color del estilo.canvas: CanvasView(Style, running, draw)Un canvas 2D dibujado en cada frame: sprites, celdas de un atlas y pixel art, en la GPU en teléfonos.ui-package-templateUn paquete para empezar: código nativo en cada plataforma, pruebas y un ejemplo.El kit
import <ui/kit>: componentes con tema hechos con los elementos de arriba, claros y oscuros. La guía →
Title, Heading, Body, Secondary, CaptionTexto en la escala tipográfica del tema.Card, Badge, Avatar, SeparatorSuperficies, etiquetas e imágenes.KitButton, TextField, CheckboxBotones en variantes, campos y checkboxes.RadioGroup, SegmentedControl, TabBarUna opción entre varias.NavBar, Toolbar, ListItemBarras y filas.Collapsible, AccordionSecciones que se abren y se cierran.ProgressBarUn progreso que avanza a su nuevo valor.Popover, DropdownMenu, Select, TooltipPaneles y menús junto a lo que los abrió.Calendar, DatePicker, ColorPickerElegir un día o un color.kit_toast, ToastHostUn mensaje breve abajo.SwipeToDeleteUna fila que el usuario quita arrastrándola.kit_light, kit_dark, kit_follow_systemLos temas.