// text-example.slintexport 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%; }}用于显示文本的 Text 元素。
默认情况下,Text 元素的 min-width、min-height、preferred-width 和 preferred-height 设置为适应完整文本,就好像文本显示在单行中一样 (除非文本包含显式的换行符)。 然而,如果将 wrap 属性设置为 word-wrap,和/或将 overflow 属性设置为 elide, 则 min-width 会减小为零,从而允许文本换行或被省略, 而 preferred-width 和 preferred-height 保持不变。
属性
color
brush default: <depends on theme>
文本的颜色。
Text { text: "Hello"; color: #3586f4; font-size: 40pt;}
font-family
string default: ""
选择用于渲染文本的字体系列的名称。
Text { text: "CoMiC!"; color: black; font-size: 40pt; font-family: "Comic Sans MS";}
Note
请确保在 Text 元素中使用字体之前先加载该字体。 更多内容请参阅 字体处理。
font-size
length default: 0px
文本的字体大小。
Text { text: "Big"; color: black; font-size: 70pt;}
font-weight
int default: 0
字体的字重。值的范围从 100(最细)到 900(最粗)。400 是正常字重。使用 FontWeight 命名空间中的预定义常量。
Text { text: "BOLD"; color: black; font-size: 30pt; font-weight: FontWeight.extra-bold;}
font-italic
bool default: false
字体外观是否应绘制为斜体。
Text { text: "Italic"; color: black; font-italic: true; font-size: 40pt;}
font-metrics
struct FontMetrics (out) default: a struct with all default values
缩放至该元素所使用的字体像素大小的字体设计度量。
FontMetrics
用于保存指定像素大小下字体度量的结构体。
ascent(length):基线到字体中最高字形顶部的距离。descent(length):基线到字体中最高字形底部的距离。通常为负值。x_height(length):基线到字体中最高字形水平中点的距离,如果字体未指定则为 0。cap_height(length):基线到字体中常规大写字形顶部的距离,如果字体未指定则为 0。
horizontal-alignment
enum TextHorizontalAlignment default: the first enum value
Text { x: 0; text: "Hello"; color: black; font-size: 40pt; horizontal-alignment: left;}
TextHorizontalAlignment
此枚举描述了 Text 或 StyledText 元素沿水平轴的不同对齐方式。
start:文本将与包含框的起始边缘对齐。根据文本方向的不同,这可以是左对齐或右对齐。end:文本将与包含框的结束边缘对齐。根据文本方向的不同,这可以是左对齐或右对齐。left:文本将与包含框的左边缘对齐。center:文本将在包含框内水平居中。right:文本将与包含框的右边缘对齐。
letter-spacing
length default: 0px
字间距允许更改字形之间的间距。正值会增加间距,负值会减小距离。
Text { text: "Spaced!"; color: black; font-size: 30pt; letter-spacing: 4px;}
overflow
enum TextOverflow default: the first enum value
当文本超出可用空间时,文本应如何表现。
TextOverflow
此枚举描述了当文本过宽而无法适应 Text 或 StyledText 元素宽度时文本的显示方式。
clip:文本将被简单地裁剪。elide:文本将被省略显示为…。
text
string default: ""
渲染的文本。
vertical-alignment
enum TextVerticalAlignment default: the first enum value
文本的垂直对齐方式。
TextVerticalAlignment
此枚举描述了 Text 或 StyledText 元素沿垂直轴的不同对齐方式。
top:文本将与包含框的顶部对齐。center:文本将在包含框内垂直居中。bottom:文本将与包含框的底部对齐。
wrap
enum TextWrap default: the first enum value
Text { text: "This paragraph breaks into multiple lines of text"; font-size: 20pt; wrap: word-wrap; width: 180px;}
TextWrap
此枚举描述了当文本过宽而无法适应 Text 或 StyledText 元素宽度时文本的换行方式。
no-wrap:文本不会换行,而是会溢出。word-wrap:文本将尽可能在单词边界处换行,对于非常长的单词则可能在任意位置换行。char-wrap:文本将在任何字符处换行。目前仅 Qt 和软件渲染器支持。
stroke
brush default: a transparent brush
用于文本轮廓的画刷。
Text { text: "Stroke"; stroke-width: 2px; stroke: darkblue; stroke-style: center; font-size: 80px; color: lightblue;}
stroke-width
length default: 0px
文本轮廓的宽度。如果宽度为零,则将渲染为 1 个物理像素的细线描边。
stroke-style
enum TextStrokeStyle default: the first enum value
Text { text: "Style"; stroke-width: 2px; stroke: #3586f4; stroke-style: center; font-size: 60px; color: white;}
TextStrokeStyle
此枚举描述了 Text 或 StyledText 元素中文本描边相对于字形边缘的位置。
outside:描边的内边缘位于文本的外边缘处。center:描边的中心线位于文本的外边缘处,如 Adobe Illustrator 中所示。
可访问性
默认情况下,Text 元素具有以下可访问性属性:
accessible-role: text;accessible-label: text;