Text

A run of text with a single style.

Styles

Apply various styles like color, font size, weight, and decoration.

Normal TextBold & BlueItalic & Red & UnderlineShadow Text

<template>
  <Column crossAxisAlignment="start" :gap="10">
    <Text data="Normal Text" />
    <Text
      data="Bold & Blue"
      :style="
        TextStyle({
          color: 'blue',
          fontWeight: 'bold',
          fontSize: 20,
        })
      "
    />
    <Text
      data="Italic & Red & Underline"
      :style="
        TextStyle({
          color: 'red',
          fontStyle: FontStyle.italic,
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.wavy,
          decorationColor: 'red',
        })
      "
    />
    <Text
      data="Shadow Text"
      :style="
        TextStyle({
          fontSize: 24,
          color: 'black',
          shadows: [
            {
              color: 'rgba(0,0,0,0.5)',
              blurRadius: 4,
              offsetX: 2,
              offsetY: 2,
            },
          ],
        })
      "
    />
  </Column>
</template>
<script setup lang="ts">
import { Text, Column, FontStyle, TextDecoration, TextDecorationStyle, TextStyle } from "fluekit";
</script>

Overflow

Handle text overflow with ellipsis or clip.

This is a very long text that should be truncated because maxLines is set to 1 and overflow is ellipsis.

This text fades out at the end because overflow is set to fade. It's a nice effect for content previews.

<template>
  <Container :width="200" color="#f0f0f0" :padding="EdgeInsets.all(10)">
    <Text
      data="This is a very long text that should be truncated because maxLines is set to 1 and overflow is ellipsis."
      :maxLines="1"
      :overflow="TextOverflow.ellipsis"
    />
  </Container>
  <div style="height: 10px"></div>
  <Container :width="200" color="#f0f0f0" :padding="EdgeInsets.all(10)">
    <Text
      data="This text fades out at the end because overflow is set to fade. It's a nice effect for content previews."
      :overflow="TextOverflow.fade"
      :softWrap="false"
    />
  </Container>
</template>

<script setup lang="ts">
import { Text, Container, TextOverflow, EdgeInsets } from "fluekit";
</script>

API

Text

Props

Name	Type	Default	Description
data	string | number	-	The text to display.
style	TextStyle	-	The style to use for this text.
textAlign	'left' | 'right' | 'center' | 'justify' | 'start' | 'end'	-	How the text should be aligned horizontally.
textDirection	'rtl' | 'ltr'	-	The directionality of the text.
softWrap	boolean	true	Whether the text should break at soft line breaks.
overflow	'clip' | 'fade' | 'ellipsis' | 'visible'	-	How visual overflow should be handled.
maxLines	number	-	An optional maximum number of lines for the text to span, wrapping if necessary.
semanticsLabel	string	-	An alternative semantics label for this text.
tag	string	'span'	The HTML tag to use for rendering.

Events

Name	Description
click	Triggered when the text is clicked.
tap	Triggered when the text is tapped.
double-tap	Triggered when the text is double tapped.
long-press	Triggered when the text is long pressed.
pan-start	Triggered when a pan gesture starts.
pan-update	Triggered when a pan gesture updates.
pan-end	Triggered when a pan gesture ends.

Slots

Name	Description
default	The content of the text (alternative to data prop).