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スピナーからスピナーを渡します。

拡張

タイプ： boolean

デフォルト： false

子供を見せるかどうか。

子供たち

タイプ： ReactNode | ReactNode[]

1つ以上の<Task>コンポーネントを渡します

クレジット

コンポーネントUIは、ListrとListr2のインスピレーションを受けたListr2です