Back to Woocommerce

TaskItem

packages/js/experimental/src/experimental-list/task-item/README.md

10.8.0-dev2.8 KB
Original Source

TaskItem

Use TaskItem to display a task item.

Usage

jsx
<TaskItem
	action={ () => alert( '"My action" button has been clicked' ) }
	actionLabel="My action"
	additionalInfo="Additional task information"
	badge="Task badge"
	completed={ true }
	content="Task content"
	expandable={ false }
	expanded={ false }
	level="Task title"
	onClick={ () => alert( 'The task has been clicked' ) }
	onCollapse={ () => alert( 'The task was collapsed' ) }
	onDelete={ () => alert( 'The task has been deleted' ) }
	onDismiss={ () => alert( 'The task was dismissed' ) }
	onExpand={ () => alert( 'The task was expanded' ) }
	onSnooze={ () => alert( 'The task was snoozed' ) }
	showActionButton={ false }
	time="10 minutes"
	title="Task title"
/>

Props

NameTypeDefaultDescription
actionFunctionnullA function to be called when the primary action is triggered
actionLabelStringnullPrimary action label
additionalInfoStringnullAdditional task information
badgeStringnullTask badge to show next to title
completedBooleannullWhether the task is completed or not
contentStringnullTask content
expandableBooleanfalseWhether it's an expandable task
expandedBooleanfalseWhether the task is expanded by default
levelNumber3Task hierarchy level (between 1 and 3)
onClickFunctionnullA function to be called after clicking on the task item
onCollapseFunctionnullA function to be called after the task is collapsed
onDeleteFunctionnullA function to be called after the task is deleted
onDismissFunctionnullA function to be called after the task is dismissed
onExpandFunctionnullA function to be called after the task is expanded
onSnoozeFunctionnullA function to be called after the task is snoozed
showActionButtonBooleannullWhether the primary action (button) will be shown
timeStringnullTime to finish the task
titleStringnull(required) Task title