ink task list

Tinta-tugas-daftar

Komponen daftar tugas untuk tinta

_{Dukung proyek ini dengan ️ Dibintangi dan membagikannya. Ikuti saya untuk melihat proyek keren apa yang sedang saya kerjakan! ❤️}

Memasang

npm i ink-task-list

? Penggunaan cepat

 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

Daftar tugas

Pembungkus opsional untuk berisi daftar Tasks .

Pada dasarnya hanya <Box flexDirection="column"> ; Hanya untuk keperluan gaya dan semantik.

anak-anak

Jenis: ReactNode | ReactNode[]

Diperlukan

Lulus dalam daftar tugas

Tugas

Mewakili setiap tugas.

label

Ketik: string

Diperlukan

negara

Jenis: 'pending'|'loading'|'success'|'warning'|'error'

Default: pending

status

Ketik: string

Status tugas untuk ditampilkan di sebelah kanan label

keluaran

Ketik: string

Output tunggal diawali dengan → untuk menunjukkan di bawah label

pemintal

Jenis:

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

Diperlukan jika keadaan loading

Data pemintal yang digunakan untuk status pemuatan. Lewati pemintal dari cli-spinners untuk kenyamanan.

tidak dimasukkan

Jenis: boolean

Default: false

Apakah akan menunjukkan kepada anak -anak atau tidak.

anak-anak

Jenis: ReactNode | ReactNode[]

Lulus dalam satu atau lebih komponen <Task>

Kredit

Komponen UI terinspirasi Listran dan Listr2 ❤️