TextStyle

Defines the color, font_weight and font_size of a text.

Fields

• foreground (brush): Defines the color of the text. (default value: black)
• font_size (length): Defines the font size of the text. (default value: 0)
• font_weight (int): Defines the font weight of the text. (default value: 0)

TextBase

The TextBase represents the base for text elements that can be styled by using TextStyle. It inherits the Text element.

Properties

• style (in TextStyle): Used to set color, font_weight and font_size of the text.
• color (in brush): The color of the text. (default value: depends on the style)
• font_family (in string): The name of the font family selected for rendering the text.
• font_size (in length): The font size of the text.
• font_weight (in int): The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.
• font_italic (in bool): Whether or not the font face should be drawn italicized or not. (default value: false)
• horizontal_alignment (in enum TextHorizontalAlignment): The horizontal alignment of the text.
• letter_spacing (in length): The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing and a negative value decreases the distance. (default value: 0)
• overflow (in enum TextOverflow): What happens when the text overflows (default value: clip).
• text (in string): The text rendered.
• vertical_alignment (in enum TextVerticalAlignment): The vertical alignment of the text.
• wrap (in enum TextWrap): The way the text wraps (default value: no_wrap).
• stroke (in brush): The brush used for the text outline (default value: transparent).
• stroke_width (in length): The width of the text outline. If the width is zero, then a hairline stroke (1 physical pixel) will be rendered.
• stroke_style (in enum TextStrokeStyle): The style/alignment of the text outline (default value: outside).

Example

import { TextBase } from "@vivi/foundation.slint";

export component MyText inherits TextBase {
    style: {
        foreground: black,
        font_size: 12px,
        font_weight: 300
    };
}

export component Example inherits Window {
    width: 200px;
    height: 100px;

    MyText {
        text: "hello world";
    }
}