xtt-ui

Appearance

Text Box 文字框 ​

文字外框

default

基础用法 ​

内部的文本无法滚动，如果想要大量文本，要使用 xtt-p 元素包裹，当有多个 xtt-p 元素时，左下角的线会转动，如果当前不是最后一个 xtt-p 元素，那么会显示一个箭头，代码可以切换到下一个 xtt-p 元素。用鼠标左键点击元素就会切换到下一个 xtt-p 元素。鼠标右键点击元素就会切换到上一个 xtt-p 元素。

a b c d e ffirstsecondthird
html
<xtt-text-box-theme-a>a b c <i>d e f</i></xtt-text-box-theme-a>
<xtt-text-box-theme-a>
	<xtt-p><xtt-text-enter>first</xtt-text-enter></xtt-p>
	<xtt-p><xtt-text-enter>second</xtt-text-enter></xtt-p>
	<xtt-p><xtt-text-enter>third</xtt-text-enter></xtt-p>
</xtt-text-box-theme-a>

skew 倾斜 ​

设置 skew 属性可以让文字框倾斜，倾斜的量是 skew 的值。不是角度值，是 px 值。

firstsecondthird
html
<xtt-text-box-theme-a skew="50">
	<xtt-p>first</xtt-p>
	<xtt-p>second</xtt-p>
	<xtt-p>third</xtt-p>
</xtt-text-box-theme-a>
<style scope>
	#skow::part(nextMark) {
		inset-inline-end: 8px;
	}
</style>