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 เพื่อความสะดวก

ถูกขยายออกไป

ประเภท: boolean

ค่าเริ่มต้น: false

ไม่ว่าจะแสดงเด็ก ๆ หรือไม่

เด็ก

ประเภท: ReactNode | ReactNode[]

ส่งผ่านส่วนประกอบ <Task> อย่างน้อยหนึ่งรายการ

การให้เครดิต

ส่วนประกอบ UI ได้รับแรงบันดาลใจจาก Listr และ Listr2 ❤