--- title: "Text" slug: "text" category: "Mini Widgets" reactComponent: "ArcWidgetText" reactTier: "mini" reactSince: "0.1.0-alpha.5" reactExample: "text.tsx" locale: "es" hosts: "vue" --- # Text ## AI Defaults (read first) - **Function name**: `arcCustomText`. - **value**: The text content. Supports NinoxScript expressions. - **Use for type consistency**: When `if/else` mixes text and widget, wrap the text branch in `arcCustomText({value: ...})`. - **fontSize**, **fontColor**, **fontWeight**: Direct properties (not nested). - **truncate**: `true` enables ellipsis when the text exceeds the container width (set an explicit `width`). - **No uniqueId needed** for simple text display. # Text ![](https://framerusercontent.com/images/QPDhVJgrgK68jBZ7OahdkAomXYQ.png) ## Código de aplicación ```javascript arcCustomText({ uniqueId: " + Nr, embedded: true, width: "", height: "", alignY: "", alignX: "", fontSize: "", fontWeight: "", fontColor: "", lineHeight: "", textWrap: "", textScroll: "", textAlign: "", textDirection: "horizontal", textDecoration: { type: "", style: "", color: "", thickness: "" }, truncate: "", value: "" }) ``` ### uniqueId El *** **uniqueId* lo asignas individualmente, debe ser único. La razón: si muestras varios customText con distintos settings en tu interfaz, los estilos no se sobrescriben entre sí. ```javascript uniqueId: Nr, // Ninox-Feld uniqueId: "Aufgabe Beschreibung", // Text in " ``` ### embedded El parámetro ***embedded*** lo usas cuando el texto ***no*** está dentro de otro widget. Por defecto está establecido en true. ```javascript embedded: false, // ermöglicht den Standalone Einsatz des Widgets (nicht eingebettet in anderen Widgets) embedded: true, // wenn Text eingebettet in anderes Widget embedded: "", // default: true ``` ### width En ***with*** defines qué ancho debe tener el contenedor de tu customText. ```javascript width: "100%", // Prozent-Werte oder "80px" Pixel-Werte width: "auto", // witdh passt sich an Inhalt an width: "", // default: 100% ``` ### height En ***height*** defines qué altura debe tener el contenedor de tu customText. ```javascript height: "100%", // Prozent Werte height: "100px", // Pixel Werte height: "", // default: auto ``` ### alignY El parámetro ***alignY*** lo usas para determinar si el contenedor del customText en el eje Y debe estar arriba, abajo o centrado. ```javascript alignY: "bottom", // top, bottom, center alignY: "", // default: top ``` ### alignX El parámetro ***alignX*** lo usas para determinar si el contenedor del customText en el eje X debe estar a la izquierda, a la derecha o centrado. ```javascript alignX: "right", // left, right, center alignX: "", // default: left ``` ### fontSize Con ***fontSize*** determinas el tamaño de fuente de tu texto. ```javascript fontSize: "12px", // Pixel Werte fontSize: "", // default: 12px ``` ### fontWeight En*** fontWeight*** puedes definir el grosor de tu fuente. ```javascript fontWeight: "normal", // CSS-Values (bold, lighter etc.) fontWeight: "800", // Zahl 100-800 in 100er Schritten (400=normal, 800=bold) fontWeight: "", // default: normal/400 ``` ### fontColor Con*** fontColor*** defines el color de fuente de tu customText. ```javascript fontColor: "#000000", // HEX Werte fontColor: "rgb(77,166,255)", // RGB Werte fontColor: "", // default: #000 ``` ### lineHeight Con*** lineHeight ***determinas el espacio entre las líneas de texto. ```javascript lineHeight: "5px", // fixe line-height in px, pt, cm etc. lineHeight: "1.5", // punkt-getrennte Zahl, multipliziert mit font-size lineHeight: "150%", // line-height in Prozent von font-size lineHeight: "", // default: normal ``` ### textWrap Con textWrap determinas cómo debe saltar de línea tu texto. Puedes usar los valores CSS habituales para white-space. ```javascript textWrap: "normal", // automatischer Zeilenumbruch, wenn verfügbaren Platz überschritten textWrap: "nowrap", // Text bleibt in einer Zeile, auch wenn verfügbarer Platz überschritten textWrap: "pre", // Text wird genau so angezeigt wie im HTML-Code, mit Leerzeichen und Zeilenumbrüchen textWrap: "pre-wrap", // Text wird umgebrochen, wenn verfügbarer Platz überschritten, behält Leerzeichen und Zeilenumbrüche bei textWrap: "pre-line", // Text wird wie "pre-wrap" behandelt, aber behält normale Zeilenumbrüche bei und entfernt zusätzliche Leerzeichen textWrap: "", // default: normal ``` ### textScroll Con ***textScroll*** puedes establecer con true o false si el texto, cuando necesita más espacio del que ofrece el contenedor (determinado con width y height), debe ser scrollable o cortarse. ```javascript textScroll: true, // Der Text wird scrollbar, wenn er den Container überschreitet. textScroll: false, // Der Text wird abgeschnitten, wenn er den Container überschreitet. textScroll: "", // default: true ``` ### textAlign En ***textAlign*** determinas cómo debe alinearse el texto: a la izquierda, a la derecha, centrado o justificado a lo ancho de la línea. ```javascript textAlign: "right", // left, right, center textAlign: "justify", // streckt den Text so, dass jede Linie dieselbe Breite hat (wie zB in Zeitungen) textAlign: "", // left ``` ### textDirection Con el parámetro ***textDirection*** puedes determinar si el texto debe orientarse en horizontal o en vertical. ```javascript textDirection: "vertical", // vertical, horizontal textDirection: "", // horizontal ``` ### textDecoration En ***textDecorationSettings*** puedes usar el parámetro type para subrayar o tachar tu texto, o crear una línea sobre él, o también tanto debajo como encima del texto. Además, puedes personalizar esta línea con style, color y thickness. ```javascript textDecoration: { type: "", style: "", color: "", thickness: "" } ``` El parámetro ***type*** determina el tipo de línea o su posición. ```javascript type: "none", // keine Linie type: "overline", // Linie oberhalb des Textes type: "line-throug", // Text wird durchgestrichen type: "underline", // Text wird unterstrichen type: "overline underline", // Erzeugt eine Linie ober- und unterhalb des Textes type: "", // default: keine Linie ``` El parámetro ***style*** determina el estilo de la línea. ```javascript style: "solid", // gerade Linie style: "double", // doppelte Linie style: "dotted", // gepunktete Linie style: "dashed", // gestrichelte Linie style: "wavy", // gewellte Linie style: "", // default: solid ``` El parámetro ***color*** determina el color de la línea. ```javascript color: "#fff", // hex-code Farben color: "rgb(249, 201, 36)", // rgb() Farben color: "", // default: #000 ``` El parámetro ***thickness*** determina el grosor de la línea. ```javascript thickness: "7px", // thickness: "", // default: 1px ``` ### truncate Con ***truncate*** puedes cortar texto largo con ellipsis (`…`) cuando es más ancho que el contenedor (típicamente con `width` fijo). ```javascript truncate: true, // Text wird einzeilig abgeschnitten mit Ellipsis truncate: false, // kein Truncate (default) truncate: ", // default: false ``` ### value En ***value*** introduces el valor que debe mostrarse como customText. Puede ser texto escrito directamente entre comillas o un campo de Ninox. Si no es un campo de texto de Ninox, recuerda incluir el valor dentro de *text()*. ```javascript value: "Dies ist mein customText.", // manuell eingefügter Text value: Beschreibung, // Ninox Wert value: "", // gibst du keinen value ein, wird nichts ausgegeben ``` #### Consejo para columnas estrechas: En la customTable ahora puedes usar customText para mostrar los títulos de columna en vertical, ahorrando así espacio en celdas que, por ejemplo, solo contienen un checkbox, y dando en consecuencia más espacio a los elementos que lo necesitan💡 ![](https://framerusercontent.com/images/IzGhHmFNjffftaps5KTEwHMzwSc.png) --- ## Idea de función: resaltado tipo rotulador (Handwritten Highlight) 💡 **Ampliación planeada:** dotar al texto de un efecto realista de «marcador de texto» (como resaltado a mano). Referencia: [CodePen](https://codepen.io/vii120/pen/KwMBaaY) — variantes: amarillo, verde, rosa con `conic-gradient` + `linear-gradient`.