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❤️