366 lines
12 KiB
TypeScript
366 lines
12 KiB
TypeScript
import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log, input, text, Color, Text, InputType, hlayout, GradientOrientation } from "doric";
|
|
import { title } from "./utils";
|
|
@Entry
|
|
class TextDemo extends Panel {
|
|
build(root: Group) {
|
|
scroller(
|
|
vlayout(
|
|
[
|
|
title("Text Demo"),
|
|
input({
|
|
width: 100,
|
|
height: 100,
|
|
inputType: InputType.Number,
|
|
hintText: "number"
|
|
}),
|
|
hlayout([
|
|
text({
|
|
text: "size 10",
|
|
textSize: 10,
|
|
backgroundColor: Color.GREEN
|
|
}),
|
|
text({
|
|
text: "size 25",
|
|
textSize: 25,
|
|
backgroundColor: Color.BLUE
|
|
}),
|
|
text({
|
|
text: "size 18",
|
|
textSize: 18,
|
|
backgroundColor: Color.LTGRAY,
|
|
})
|
|
], {
|
|
backgroundColor: Color.RED,
|
|
height: 50,
|
|
gravity: Gravity.CenterX,
|
|
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST).configHeight(LayoutSpec.JUST),
|
|
}),
|
|
text({
|
|
text: "This is normal text",
|
|
}),
|
|
hlayout([
|
|
text({
|
|
text: "T_B",
|
|
textSize: 80,
|
|
textColor: {
|
|
start: Color.RED,
|
|
end: Color.GREEN,
|
|
orientation: GradientOrientation.TOP_BOTTOM,
|
|
}
|
|
}),
|
|
text({
|
|
text: "TR_BL",
|
|
textSize: 80,
|
|
textColor: {
|
|
start: Color.RED,
|
|
end: Color.GREEN,
|
|
orientation: GradientOrientation.TR_BL,
|
|
}
|
|
}),
|
|
text({
|
|
text: "R_L",
|
|
textSize: 80,
|
|
textColor: {
|
|
start: Color.RED,
|
|
end: Color.GREEN,
|
|
orientation: GradientOrientation.RIGHT_LEFT,
|
|
}
|
|
}),
|
|
text({
|
|
text: "BR_TL",
|
|
textSize: 80,
|
|
textColor: {
|
|
start: Color.RED,
|
|
end: Color.GREEN,
|
|
orientation: GradientOrientation.BR_TL,
|
|
}
|
|
}),
|
|
], {
|
|
space: 20
|
|
}),
|
|
hlayout([
|
|
text({
|
|
text: "B_T",
|
|
textSize: 80,
|
|
textColor: {
|
|
start: Color.RED,
|
|
end: Color.GREEN,
|
|
orientation: GradientOrientation.BOTTOM_TOP,
|
|
}
|
|
}),
|
|
text({
|
|
text: "BL_TR",
|
|
textSize: 80,
|
|
textColor: {
|
|
start: Color.RED,
|
|
end: Color.GREEN,
|
|
orientation: GradientOrientation.BL_TR,
|
|
}
|
|
}),
|
|
text({
|
|
text: "L_R",
|
|
textSize: 80,
|
|
textColor: {
|
|
start: Color.RED,
|
|
end: Color.GREEN,
|
|
orientation: GradientOrientation.LEFT_RIGHT,
|
|
}
|
|
}),
|
|
text({
|
|
text: "TL_BR",
|
|
textSize: 80,
|
|
textColor: {
|
|
start: Color.RED,
|
|
end: Color.GREEN,
|
|
orientation: GradientOrientation.TL_BR,
|
|
}
|
|
}),
|
|
], {
|
|
space: 20
|
|
}),
|
|
text({
|
|
text: "grad",
|
|
textSize: 120,
|
|
textColor: {
|
|
colors: [Color.GREEN, Color.WHITE, Color.RED],
|
|
locations: [0, 0.5, 1],
|
|
orientation: GradientOrientation.TOP_BOTTOM
|
|
}
|
|
}),
|
|
text({
|
|
text: "This is normal text with shadow ",
|
|
textSize: 20,
|
|
shadow: {
|
|
color: Color.parse("#1DD6DE"),
|
|
offsetX: 0,
|
|
offsetY: 1,
|
|
opacity: 0.8,
|
|
radius: 3.0
|
|
}
|
|
}),
|
|
text({
|
|
text: "This is normal text",
|
|
textSize: 30,
|
|
}),
|
|
text({
|
|
text: "This is bold text",
|
|
fontStyle: "bold",
|
|
}),
|
|
text({
|
|
text: "This is bold text",
|
|
textSize: 30,
|
|
fontStyle: "bold"
|
|
}),
|
|
text({
|
|
text: "This is italic text",
|
|
fontStyle: "italic"
|
|
}),
|
|
text({
|
|
text: "This is italic text",
|
|
textSize: 30,
|
|
fontStyle: "italic"
|
|
}),
|
|
text({
|
|
text: "This is bold_italic text",
|
|
fontStyle: "bold_italic"
|
|
}),
|
|
text({
|
|
text: "This is bold_italic text",
|
|
textSize: 30,
|
|
fontStyle: "bold_italic"
|
|
}),
|
|
text({
|
|
text: "Icon Font text from \ue631 ",
|
|
textSize: 10,
|
|
font: 'iconfont'
|
|
}),
|
|
text({
|
|
text: "Icon Font text from \ue631 ",
|
|
textSize: 30,
|
|
font: 'iconfont'
|
|
}),
|
|
text({
|
|
text: "Icon Font text from res/font/ \ue631 ",
|
|
textSize: 10,
|
|
font: 'font_iconfont'
|
|
}),
|
|
text({
|
|
text: "Icon Font text from res/font/ \ue631 ",
|
|
textSize: 30,
|
|
font: 'font_iconfont.ttf'
|
|
}),
|
|
text({
|
|
text: "Icon Font text from assets/fonts/ \ue631 ",
|
|
textSize: 10,
|
|
font: 'fonts/assets_iconfont'
|
|
}),
|
|
text({
|
|
text: "Icon Font text from assets/fonts/ \ue631 ",
|
|
textSize: 30,
|
|
font: 'fonts/assets_iconfont.ttf'
|
|
}),
|
|
text({
|
|
text: "This is line Spaceing 0,\nSecond line",
|
|
maxLines: 0,
|
|
}),
|
|
text({
|
|
text: "This is line Spaceing 40,\nSecond line",
|
|
maxLines: 0,
|
|
lineSpacing: 40,
|
|
textColor: Color.RED,
|
|
textAlignment: Gravity.Right,
|
|
onClick: function () {
|
|
(this as Text).textAlignment = Gravity.Left;
|
|
(this as Text).textColor = Color.BLACK;
|
|
}
|
|
}),
|
|
text({
|
|
text: "This is strikethrough text.",
|
|
textSize: 20,
|
|
textColor: Color.RED,
|
|
strikethrough: true,
|
|
}),
|
|
text({
|
|
text: "This is underline text.",
|
|
textSize: 20,
|
|
textColor: Color.BLUE,
|
|
underline: true,
|
|
}),
|
|
text({
|
|
maxLines: 0,
|
|
maxWidth: root.width,
|
|
htmlText: `<div>
|
|
<h1>Supported tags by default</h1>
|
|
<ul>
|
|
<li>
|
|
<h2>br</h2>
|
|
<p>
|
|
To break<br/>lines<br/>in a<br/>paragraph,<br/>use the br tag.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<h2>p</h2>
|
|
<p>This is a paragraph.</p>
|
|
<p>This is a paragraph.</p>
|
|
<p>Paragraph elements are defined by p tags.</p>
|
|
<p style="color:#FF0000 text-decoration:line-through background:#eeeeee">
|
|
Support setting background color and foreground color and underline.</p>
|
|
</li>
|
|
<li>
|
|
<h2>ul</h2>
|
|
<p>An unordered list:</p>
|
|
<ul>
|
|
<li>coffee</li>
|
|
<li>tea</li>
|
|
<li>milk</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<h2>div</h2>
|
|
<h3>This is a header</h3>
|
|
<p>This is a paragraph.</p>
|
|
|
|
<div style="color:#00FF00">
|
|
<h3>This is a header</h3>
|
|
<p>This is a paragraph.</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<h2>span</h2>
|
|
<p><span style="color:#FF0000">some text.</span>some other text.</p>
|
|
</li>
|
|
<li>
|
|
<h2>strong</h2>
|
|
<strong>This text is strong</strong>
|
|
</li>
|
|
|
|
<li>
|
|
<h2>b</h2>
|
|
<p>This is plain text <b>This is bold text</b>。</p>
|
|
</li>
|
|
<li>
|
|
<h2>em</h2>
|
|
<em>This text is emphasized</em>
|
|
</li>
|
|
|
|
<li>
|
|
<h2>cite</h2>
|
|
<cite>This text is cite</cite>
|
|
</li>
|
|
<li>
|
|
<h2>dfn</h2>
|
|
<dfn>This text is dfn</dfn>
|
|
</li>
|
|
<li>
|
|
<h2>i</h2>
|
|
<i>Italic</i>
|
|
</li>
|
|
<li>
|
|
<h2>big</h2>
|
|
<big>This text is big</big>
|
|
</li>
|
|
<li>
|
|
<h2>small</h2>
|
|
<small>This text is small</small>
|
|
</li>
|
|
<li>
|
|
<h2>font</h2>
|
|
<p><font color="red" size=30>This is some text!</font></p>
|
|
<p><font color="blue">This is some text!</font></p>
|
|
<p><font color="green">This is some text!</font></p>
|
|
</li>
|
|
<li>
|
|
<h1>blockquote</h1>
|
|
Here comes a long quotation:
|
|
<blockquote>
|
|
This is a long quotation. This is a long quotation. This is a long quotation. This
|
|
is a long quotation. This is a long quotation.
|
|
</blockquote>
|
|
Please note that the browser adds line breaks before and after the blockquote element and increases the margins.
|
|
</li>
|
|
<li>
|
|
<h1>tt</h1>
|
|
</li>
|
|
<li>
|
|
<h1>a</h1>
|
|
<a href="https://m.baidu.com">Click anchor</a>
|
|
</li>
|
|
<li>
|
|
<h1>u</h1>
|
|
<u>Underline</u>
|
|
</li>
|
|
<li>
|
|
<h1>strike,s,del</h1>
|
|
<strike>This text is strike</strike>
|
|
<s>This text is s</s>
|
|
<del>This text is del</del>
|
|
</li>
|
|
|
|
<li>h1-h6</li>
|
|
<h1>h1</h1>
|
|
<h2>h2</h2>
|
|
<h3>h3</h3>
|
|
<h4>h4</h4>
|
|
<h5>h5</h5>
|
|
<h6>h6</h6>
|
|
<li>
|
|
<h1>img</h1>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
`
|
|
}),
|
|
],
|
|
{
|
|
space: 10,
|
|
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT)
|
|
}
|
|
),
|
|
{
|
|
layoutConfig: layoutConfig().most()
|
|
}
|
|
).in(root)
|
|
}
|
|
|
|
} |