TextRotate 文本轮播

循环展示多个选项的动画文本。

导入

import { TextRotate } from 'asterui'

示例

基础

带有多种语言的简单轮播文本。

</>

HelloSalutHolaCiaoHallo

import { TextRotate } from 'asterui'

function App() {
  return (
      <TextRotate
        items={['Hello', 'Salut', 'Hola', 'Ciao', 'Hallo']}
        className="text-4xl font-bold"
      />
    )
}

export default App

居中

居中对齐的轮播文本。

</>

Build fasterShip soonerScale easilySleep better

import { TextRotate } from 'asterui'

function App() {
  return (
      <TextRotate
        items={[
          'Build faster',
          'Ship sooner',
          'Scale easily',
          'Sleep better',
        ]}
        centered
        className="text-3xl font-semibold text-primary"
      />
    )
}

export default App

样式项目

每个项目可以有自定义样式。

</>

CreativeInnovativeDynamicPowerful

import { TextRotate } from 'asterui'

function App() {
  return (
      <TextRotate
        items={[
          <span className="text-primary">Creative</span>,
          <span className="text-secondary">Innovative</span>,
          <span className="text-accent">Dynamic</span>,
          <span className="text-success">Powerful</span>,
        ]}
        className="text-5xl font-black"
      />
    )
}

export default App

自定义持续时间

6 秒周期的更快轮播。

</>

BLAZINGFAST ▶︎▶︎

import { TextRotate } from 'asterui'

function App() {
  return (
      <TextRotate
        items={[
          'BLAZING',
          <span className="font-bold italic px-2">FAST ▶︎▶︎</span>,
        ]}
        duration={6000}
        centered
        className="text-7xl"
      />
    )
}

export default App

API

属性	描述	类型	默认值
items	要轮播的文本项目(最多 6 个)	React.ReactNode[]	-
duration	动画持续时间(毫秒)	6000 | 9000 | 12000 | 15000 | 18000	10000
centered	水平居中文本	boolean	false
className	额外的 CSS 类	string	-
data-testid	用于测试的测试 ID	string	-

可访问性

• 悬停时动画暂停,以便更轻松地阅读
• 支持减少动作偏好
• 文本在所有动画状态下都保持可读