Skip to content

Conversation

@liweijie0812
Copy link
Collaborator

@liweijie0812 liweijie0812 commented Dec 29, 2025

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

💡 需求背景和解决方案

测试代码

import React, { useState } from 'react';
import { Timeline, Space, Radio } from 'tdesign-react';
import { TipsIcon, UserIcon, HeartIcon, HomeIcon } from 'tdesign-icons-react';

export default function LayoutTimeLine() {
  const [direction, setDirection] = useState<'left' | 'right' | 'alternate'>('left');
  const [mode, setMode] = useState<'same' | 'alternate'>('same');
  const [layout, setLayout] = useState<'vertical' | 'horizontal'>('vertical');

  return (
    <Space direction="vertical">
      <Space>
        <h4>时间轴方向</h4>
        <Radio.Group variant="default-filled" value={layout} onChange={(v) => setLayout(v as any)}>
          <Radio.Button value="vertical">垂直时间轴</Radio.Button>
          <Radio.Button value="horizontal">水平时间轴</Radio.Button>
        </Radio.Group>
      </Space>
      <Space>
        <h4>对齐方式</h4>
        <Radio.Group variant="default-filled" value={direction} onChange={(v) => setDirection(v as any)}>
          <Radio.Button value="left">左对齐</Radio.Button>
          <Radio.Button value="alternate">交错对齐</Radio.Button>
          <Radio.Button value="right">右对齐</Radio.Button>
        </Radio.Group>
      </Space>
      <Space>
        <h4>label对齐方式</h4>
        <Radio.Group variant="default-filled" value={mode} onChange={(v) => setMode(v as any)}>
          <Radio.Button value="same">同侧</Radio.Button>
          <Radio.Button value="alternate">交错</Radio.Button>
        </Radio.Group>
      </Space>
      <Timeline layout={layout} labelAlign={direction} mode={mode}>
        <Timeline.Item label="2022-01-01">事件一</Timeline.Item>
        <Timeline.Item label="2022-04-01" dot={<span>点</span>}>
          事件四
        </Timeline.Item>
        <Timeline.Item label="2022-02-01">事件二</Timeline.Item>
        <Timeline.Item label="2022-04-01" dot={<HomeIcon />}>
          事件四
        </Timeline.Item>
        <Timeline.Item label="2022-04-01" dot={<HomeIcon size="large" />}>
          事件四 large
        </Timeline.Item>
        <Timeline.Item label="2022-04-01" dot={<HomeIcon size="medium" />}>
          事件四 medium
        </Timeline.Item>
        <Timeline.Item label="2022-04-01" dot={<HomeIcon size="small" />}>
          事件四 medium
        </Timeline.Item>
        <Timeline.Item label="2022-03-01">事件三</Timeline.Item>
        <Timeline.Item label="2022-04-01">事件四</Timeline.Item>

        <Timeline.Item label="2022-04-01" dot={<HeartIcon />}>
          事件四
        </Timeline.Item>
        <Timeline.Item label="2022-02-01">事件二</Timeline.Item>
      </Timeline>
    </Space>
  );
}


样式我改不动先挂着了

📝 更新日志

  • 本条 PR 不需要纳入 Changelog

tdesign-react

@tdesign-react/chat

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@tdesign-bot
Copy link
Collaborator

tdesign-bot commented Dec 29, 2025

TDesign Component Site Preview Open

Component Preview
tdesign-react 完成
@tdesign-react/chat 完成

@pkg-pr-new
Copy link

pkg-pr-new bot commented Dec 29, 2025

  • tdesign-react-demo

    npm i https://pkg.pr.new/Tencent/tdesign-react@4048
    
    npm i https://pkg.pr.new/Tencent/tdesign-react/@tdesign-react/chat@4048
    

commit: 9dc191e

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants