UIW 1.3.1发布，全面兼容React 16.1.1，带来更优化的用户界面设计体验

2023-09-22 12:30:45

UIW 1.3.1 版本的新特性

1. 新增Timestamp时间戳组件

在UIW 1.3.1版本中，新增了Timestamp时间戳组件，该组件可以方便地显示当前时间或指定时间戳，并提供多种自定义选项，例如时间格式、对齐方式等。Timestamp组件非常适合用于日志记录、统计分析或其他需要显示时间戳的场景。

import { Timestamp } from 'uiw';

const App = () => {
  const now = new Date();
  return (
    <div>
      <Timestamp timestamp={now} format="YYYY-MM-DD HH:mm:ss" />
    </div>
  );
};

export default App;

2. 新增CopyToClipboard复制到剪切板组件

UIW 1.3.1版本还新增了CopyToClipboard复制到剪切板组件，该组件可以方便地将指定文本或HTML元素复制到剪切板。CopyToClipboard组件非常适合用于复制代码片段、链接或其他需要复制到剪切板的内容。

import { CopyToClipboard } from 'uiw';

const App = () => {
  const text = 'Hello, world!';
  return (
    <div>
      <CopyToClipboard text={text}>
        <button>Copy to clipboard</button>
      </CopyToClipboard>
    </div>
  );
};

export default App;

3. Card组件添加footer支持

在UIW 1.3.1版本中，Card组件增加了footer支持，这使得开发者可以在卡片底部添加额外的内容，例如按钮、链接或其他信息。Card组件的footer非常适合用于显示卡片的更多详细信息或提供操作按钮。

import { Card } from 'uiw';

const App = () => {
  return (
    <div>
      <Card title="Card with Footer" footer={<button>Button</button>}>
        <p>This is the card content.</p>
      </Card>
    </div>
  );
};

export default App;

4. 修复Carousel组件的bug

在UIW 1.3.1版本中，修复了Carousel组件的一个bug，该bug会导致在某些情况下Carousel组件无法正确显示幻灯片。修复后的Carousel组件现在可以正常工作，并提供更稳定的幻灯片切换体验。

UIW 1.3.1 版本的使用示例和最佳实践

1. 使用Timestamp组件显示当前时间

Timestamp组件可以非常方便地显示当前时间，例如在日志记录或统计分析中。我们可以使用如下代码显示当前时间：

import { Timestamp } from 'uiw';

const App = () => {
  const now = new Date();
  return (
    <div>
      <Timestamp timestamp={now} />
    </div>
  );
};

export default App;

2. 使用CopyToClipboard组件复制文本到剪切板

CopyToClipboard组件可以非常方便地将文本复制到剪切板，例如在复制代码片段或链接时。我们可以使用如下代码将文本复制到剪切板：

import { CopyToClipboard } from 'uiw';

const App = () => {
  const text = 'Hello, world!';
  return (
    <div>
      <CopyToClipboard text={text}>
        <button>Copy to clipboard</button>
      </CopyToClipboard>
    </div>
  );
};

export default App;

3. 使用Card组件添加footer

Card组件的footer可以非常方便地添加额外的内容，例如按钮、链接或其他信息。我们可以使用如下代码在Card组件中添加footer：

import { Card } from 'uiw';

const App = () => {
  return (
    <div>
      <Card title="Card with Footer" footer={<button>Button</button>}>
        <p>This is the card content.</p>
      </Card>
    </div>
  );
};

export default App;