示例光标样式

自定义光标效果的示例。

字符串光标

// 默认光标
<MarkdownTyperCMD 
  showCursor={true}
  cursor="|"
/>
 
// 方块光标
<MarkdownTyperCMD 
  showCursor={true}
  cursor="▋"
/>
 
// 下划线光标
<MarkdownTyperCMD 
  showCursor={true}
  cursor="_"
/>

自定义 ReactNode 光标

// 闪烁动画
const BlinkingCursor = () => (
  <span style={{
    color: '#007acc',
    animation: 'blink 1s infinite'
  }}>|</span>
);
 
<MarkdownTyperCMD 
  showCursor={true}
  cursor={<BlinkingCursor />}
/>
 
// CSS
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

彩色光标

<MarkdownTyperCMD 
  showCursor={true}
  cursor={
    <span style={{ 
      color: '#ff6b6b',
      fontWeight: 'bold'
    }}>|</span>
  }
/>

暂停时控制

// 暂停时显示光标(默认)
<MarkdownTyperCMD 
  showCursor={true}
  showCursorOnPause={true}
/>
 
// 暂停时隐藏光标
<MarkdownTyperCMD 
  showCursor={true}
  showCursorOnPause={false}
/>