Saltar al contenido
menumenu tanreiexpand_morecontrasttranslate
tanreiexpand_more
Primeros pasosWebReactSwiftUIJetpack ComposeFlutterReact NativePreajustesTu propio sistema de diseñoUsar Tanrei con agentes de IAMarcaTokens de diseñoSistemas de diseño y personalizaciónTheme StudioColorTipografíaIconosFormaElevaciónMovimientoEstados de interacciónComportamientoDiseño de páginaAccesibilidadTextosTokens de colorTokens de la escala tipográficaTokens de formaTokens de elevaciónTokens de movimientoTokens de estadoTokens de espacio y de medidaComponentesBotónBotón de acción principalBotón segmentadoGrupo de botonesBotón con menúBarra de herramientasBotón de copiarCasilla de verificaciónBotón de opciónInterruptorChipMenúControl deslizanteCampo de control deslizanteCalendarioDateTimePickerGrupo de camposGrupo de botones de opciónGrupo de casillas de verificaciónSelectCampo de selecciónBarra de menúsSubida de archivosSelector de archivos AvanzadoZona de soltar archivosEntrada de texto AvanzadoCampo de textoCampo de chipsCampoCuadro combinado AvanzadoCampo de cuadro combinadoEntrada numérica AvanzadoCampo numéricoEntrada de color AvanzadoCampo de colorEntrada de código de un solo uso AvanzadoCampo de código de un solo usoEntrada de texto incrustada AvanzadoCuadro de redacción de chatTarjetaDivisorCapa modal AvanzadoDiálogoListaFila de listaHoja inferiorHoja lateralCarruselBloque de códigoTablaPopoverPasosAcordeónLista de descripcionesFiguraEstructura de la aplicaciónCabecera de páginaVista de árbolLínea de tiempoVista previa de imágenesTirador de tamañoMarco redimensionableÁrea de desplazamientoInsigniaIndicador de progresoMedidorContador animadoIndicador de cargaSnackbarTooltipAtajo de tecladoTagCódigo en líneaCalloutAvatarEstado vacíoGrupo de tagsEsqueletoElemento de archivoMuestraTexto en marquesinaPestañasVista de pestañasBarra de la aplicaciónBarra de navegaciónPanel de navegaciónBúsquedaEnlacePaginaciónEnlaces anterior y siguienteIndicador de pasosRuta de navegaciónTabla de contenidoTarjeta de enlaceMenú FABEstadoCómo se construye TanreiCómo contribuirLicencia y atribución
InicioPrimeros pasosSwiftUI

SwiftUI

Añade Tanrei a una aplicación de iOS o macOS con Swift Package Manager.

content_copyVer en Markdown

El paquete de Swift Tanrei proporciona vistas de SwiftUI, un entorno de tema y constantes de tokens generadas. Es compatible con iOS 17 y macOS 14 o posteriores, y está escrito para el modo de lenguaje de Swift 6.

Aún no publicado

Tanrei todavía no está en Swift Package Manager. Una plataforma se publica cuando se ha puesto al día con las especificaciones actuales, y hasta entonces la CI de SwiftUI está en pausa. «Desde el código fuente», más abajo, muestra cómo se añade el paquete desde chnotchy/tanrei; «Cuando se publique» muestra cómo se instalará entonces.

Instalación

Desde el código fuente

Hoy no se compila

El paquete de SwiftUI todavía no se ha puesto al día con las especificaciones y los tokens actuales: su código fuente se escribió para una versión anterior del código de tokens generado y no compila con el de hoy. Su CI está en pausa hasta que se ponga al día, y la página de estado marca sus componentes como rezagados. Los pasos siguientes muestran cómo se añade a una aplicación; funcionarán cuando el paquete se haya puesto al día.

Clona el repositorio junto a tu aplicación y añade el clon como paquete local: en Xcode, File → Add Package Dependencies… → Add Local… y elige la carpeta que contiene Package.swift, o en tu propio Package.swift:

dependencies: [
  .package(path: "../tanrei")
],
targets: [
  .target(name: "App", dependencies: [.product(name: "Tanrei", package: "tanrei")])
]

.package(url: "https://github.com/chnotchy/tanrei", branch: "main") sigue al repositorio en lugar de a un clon local.

Cuando se publique

En Xcode, elige File → Add Package Dependencies… e introduce la URL del repositorio, o añádela a Package.swift:

dependencies: [
  .package(url: "https://github.com/chnotchy/tanrei", from: "<version>")
],
targets: [
  .target(name: "App", dependencies: [.product(name: "Tanrei", package: "tanrei")])
]

El manifiesto del paquete está en la raíz del repositorio porque Swift Package Manager resuelve desde ahí las dependencias de Git. Las versiones de Swift se etiquetarán con versiones semánticas sin prefijo.

Uso

import SwiftUI
import Tanrei

struct DeployView: View {
  @State private var isDeploying = false

  var body: some View {
    TanreiButton("Desplegar", variant: .filled, action: { isDeploying = true })
      .disabled(isDeploying)
  }
}

action: es el click de la especificación; un cierre final es el slot icon: (TanreiButton("Desplegar", action: deploy) { Image(systemName: "arrow.up") }). No hay un parámetro disabled. Tanrei sigue el entorno .disabled(_:) del propio SwiftUI, de modo que deshabilitar un contenedor deshabilita los botones que contiene, igual que ocurriría con un control del sistema.

Tema y contraste

De forma predeterminada, Tanrei sigue el esquema de color del sistema y el ajuste de accesibilidad Aumentar contraste. Puedes anular cualquiera de los dos con el modificador de tema:

ContentView()
  .tanreiTheme(TanreiTheme(appearance: .dark, contrast: .high))

Fuentes

La escala tipográfica usa Inter (Noto Sans JP para el japonés, Roboto Mono para el código) cuando las fuentes están registradas en tu aplicación y, si no, recurre a la fuente del sistema. Los estilos de texto se nombran por nivel y se encuentran en el sistema que lleva el entorno (@Environment(\.tanreiSystem) private var system): .tanreiTextStyle(system.typescale.heading2) para el título de una sección, system.typescale.body para el texto corrido, system.typescale.label para un control; además, se adaptan a Dynamic Type. .tanreiTextStyle(system.typescale.heading1, emphasized: true) suma al peso el paso de énfasis de la familia de títulos. Las esquinas siguen system.shape.cornerSmoothing: .circular en 0, y la esquina .continuous del sistema operativo para cualquier valor superior a 0.