ink task list

墨水列表

墨水的任务列表组件

_{通过主演和分享该项目来支持这个项目。跟着我看看我正在从事的其他酷项目！ ❤️}

安装

npm i ink-task-list

？快速使用

 import React from 'react' ;
import { render } from 'ink' ;
import { TaskList , Task } from 'ink-task-list' ;
import spinners from 'cli-spinners' ;

render (
    < TaskList >
        { /* Pending state */ }
        < Task
            label = "Pending"
            state = "pending"
        />

        { /* Loading state */ }
        < Task
            label = "Loading"
            state = "loading"
            spinner = { spinners . dots }
        />

        { /* Success state */ }
        < Task
            label = "Success"
            state = "success"
        />

        { /* Warning state */ }
        < Task
            label = "Warning"
            state = "warning"
        />

        { /* Error state */ }
        < Task
            label = "Error"
            state = "error"
        />

        { /* Item with children */ }
        < Task
            label = "Item with children"
            isExpanded
        >
            < Task
                label = "Loading"
                state = "loading"
                spinner = { spinners . dots }
            />
        </ Task >
    </ TaskList > ,
) ; 

？ API

任务列表

可选包装器包含一个Tasks列表。

基本上只是<Box flexDirection="column"> ;仅用于样式和语义目的。

孩子们

类型： ReactNode | ReactNode[]

必需的

传递任务列表

任务

代表每个任务。

标签

类型： string

必需的

状态

类型： 'pending'|'loading'|'success'|'warning'|'error'

默认值： pending

地位

类型： string

在label右侧显示的任务状态

输出

类型： string

单线输出以→显示在label下方的单线输出

旋转器

类型：

 type Spinner = {
    interval : number
    frames : string [ ]
}

如果状态正在loading ，则需要

旋转器数据用于加载状态。为了方便起见，从CLI-SPINNER中传递了一个旋转器。

已扩展

类型： boolean

默认值： false

是否向孩子们展示。

孩子们

类型： ReactNode | ReactNode[]

传递一个或多个<Task>组件

学分

组件UI受到了启发的list和listr2❤️