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-Spinners의 스피너를 통과하십시오.

isexpanded

유형 : boolean

기본값 : false

아이들을 보여줄 것인지의 여부.

어린이들

유형 : ReactNode | ReactNode[]

하나 이상의 <Task> 구성 요소를 전달하십시오

크레딧

구성 요소 UI는 LIST와 LISTR2 ❤️에 영감을 받았습니다