# time_river

**Repository Path**: CorvusYe/time_river

## Basic Information

- **Project Name**: time_river
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-04
- **Last Updated**: 2024-02-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## time_river

时间的长河。用于展示时间与事件进度的库。目前还比较简陋，持续更新中，欢迎测试，期待共建。

### 如何使用：

```shell
ohpm install time_river
```

### 示例

#### 运行效果
[![demo.jpg](https://gitee.com/CorvusYe/time_river/raw/main/library/screenshots/demo.jpg)](https://gitee.com/CorvusYe/time_river/blob/main/library/screenshots/demo.jpg)

#### 代码
```extendtypescript
import { TimeRiver } from 'time_river'
import { TimeRange, TimeRiverOptions, Plan } from 'time_river/index.d';
import display from '@ohos.display';

// Copyright (c) 2024- All time_river authors. All rights reserved.
//
// This source code is licensed under Apache 2.0 License.

@Entry
@Component
struct Index {
  @State options: TimeRiverOptions = {
    onTimeChanged: (t: TimeRange) => {
      console.info(JSON.stringify(t))
    },
    onItemClick: (p: Plan) => {
      console.info(JSON.stringify(p))
    }
  }
  @State plan: Array<Plan> = [{
    range: [{
      startTime: new Date().getTime(),
      endTime: new Date().getTime() + 3600000,
    }],
    title: "Hello World"
  }, {
    range: [{
      startTime: new Date().getTime() + Math.floor(3600000 * 1.5),
      endTime: new Date().getTime() + 3600000 * 2,
    }],
    title: "鸿蒙元程序开发"
  }, {
    range: [{
      startTime: new Date().getTime() + 3600000 * 3,
      endTime: new Date().getTime() + Math.floor(3600000 * 4.1),
    }],
    title: "鸿蒙元程序开发"
  }];
  
  build() {
    Row() {
      TimeRiver({
        data: $plan,
        // screenWidth: display.getDefaultDisplaySync().width,
        options: $options
      })
    }
    .height('100%')
  }
}
```