终端 | Magic UI - Magic UI 组件库

在...中打开

✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating app/globals.css
✔ Installing dependencies.
ℹ Updated 1 file:- lib/utils.ts

安装

用法

import {
  AnimatedSpan,
  Terminal,
  TypingAnimation,
} from "@/components/magicui/terminal";

<Terminal>
  <TypingAnimation>
    <AnimatedSpan>Hello, world!</AnimatedSpan>
    <TypingAnimation>MagicUI is awesome!</TypingAnimation>
  </TypingAnimation>
</Terminal>

属性

终端

属性	类型	默认值	描述
`children`	`ReactNode`	`-`	将在终端中打字显示的内容。
`className`	`string`	`-`	用于样式的自定义 CSS 类。

AnimatedSpan

属性	类型	默认值	描述
`children`	`ReactNode`	`-`	将要动画显示的内容。
`延迟`	`number`	`0`	动画开始前的延迟（毫秒）。
`className`	`string`	`-`	用于样式的自定义 CSS 类。

TypingAnimation

属性	类型	默认值	描述
`children`	`ReactNode`	`-`	将要动画显示的内容。
`延迟`	`number`	`0`	动画开始前的延迟（毫秒）。
`className`	`string`	`-`	用于样式的自定义 CSS 类。
`持续时间`	`number`	`100`	每个字符打字时的持续时间（毫秒）。
`as`	`React.ElementType`	`"span"`	要渲染的组件类型。