Text Rotate 文本轮播
Text Rotate 继续专注于轮播结构本身:使用 Rue 当前的视觉和 daisyUI 的 text-rotate class 用法。
# Text Rotate
Rotates through 3 words, in 10 seconds
# Using items array
Pass an array of items and let TextRotate render the inner structure for you
# Rotating 6 words
Big font size, horizontally centered
# Rotating words in a sentence
Different colors for each word
# Rotating 3 words with custom duration
Big font size, horizontally centered, 6 seconds duration instead of 10 seconds
# Custom line height
In case you have a tall font or need more vertical spacing between lines
# Semantic items
Items inherit Typography.Text / Typography.Link semantics, so tone and emphasis stay consistent
items 会自动复用 Typography 的语义属性,所以轮播词条和正文排版可以保持同一套表达。
API
Text Rotate 现在只保持和轮播结构直接相关的 API;排版语义统一由 Typography 组件承担。
根组件负责 children 和 items 两种模式的切换,并承接根节点、内部包裹层和统一项样式。
数据项负责单词条的内容和语义修饰;普通项走 Typography.Text,带 href 的项走 Typography.Link。
TextRotate
根组件负责维持 daisyUI 的 text-rotate 结构,同时决定走基础 children 还是数据驱动的 items 模式。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 根节点标签,可在 inline 的 span 和 block 的 div 之间切换。 | 'span' | 'div' | 'span' |
children | 直接传入 daisyUI 原生 text-rotate 结构。 | any | - |
items | 通过数据项数组生成轮播内容;传入后优先于 children。 | ReadonlyArray<TextRotateItem> | - |
innerClassName / innerStyle | 作用于内部包裹层,常用于设置对齐方式与局部样式。 | string / any | - |
itemClassName / itemStyle | 为 items 渲染出的每一项补充统一类名和样式。 | string / any | - |
className / style | 补充根节点样式,常用于字号、颜色和 duration 类。 | string / any | - |
TextRotateItem
items 数组中的单项既可以是普通文本,也可以组织成带链接和语义修饰的轮播项。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
key | 自定义列表 key,未传时回退为当前索引。 | string | number | - |
text / children | 单项内容,优先读取 children,再回退到 text。 | any | - |
href / target / rel | 声明后会按 Typography.Link 渲染该项。 | string | - |
as | 非链接项输出标签,适合在行内文本和块级文本之间切换。 | 'span' | 'div' | 'p' | 'span' |
type | 语义色调,支持 default、secondary、success、warning、danger。 | TextRotateTone | 'default' |
disabled / mark / code / keyboard / underline / delete / strong / italic | 单项文本修饰能力,与 Typography.Text / Typography.Link 的布尔语义属性保持一致。 | boolean | false |