docs/astro/src/content/docs/reference/elements/text.mdx
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro'; import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro'; import Link from '@slint/common-files/src/components/Link.astro';
// text-example.slint
export component TextExample inherits Window {
// Text colored red.
Text {
x:0; y:0;
text: "Hello World";
color: red;
}
// This paragraph breaks into multiple lines of text.
Text {
x:0; y: 30px;
text: "This paragraph breaks into multiple lines of text";
wrap: word-wrap;
width: 150px;
height: 100%;
}
}
A Text element for displaying text.
By default, the min-width, min-height, preferred-width, and preferred-height
of a Text element are set to fit the full text as if it were displayed on a single line
(unless the text contains explicit line breaks).
However, if the wrap property is set to word-wrap, and/or if the overflow property is set to elide,
the min-width is reduced to zero, allowing the text to wrap or be elided,
while the preferred-width and preferred-height remain unchanged.
:::note[Note]
Make sure the font is loaded before using it in a Text element.
See <Link type="FontHandling" /> for more.
:::
</SlintProperty>
Text {
text: "BOLD";
color: black;
font-size: 30pt;
font-weight: FontWeight.extra-bold;
}
Text {
text: "This paragraph breaks into multiple lines of text";
font-size: 20pt;
wrap: word-wrap;
width: 180px;
}
Text {
text: "Style";
stroke-width: 2px;
stroke: #3586f4;
stroke-style: center;
font-size: 60px;
color: white;
}
By default, Text elements have the following accessibility properties set:
accessible-role: text;accessible-label: text;