honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

documentation

This commit is contained in:
petkir 2020-06-30 14:44:14 +02:00
parent 7e5ecce183
commit 3efff6d24f
1 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
samples/react-kanban-board/src/kanban/Readme.md
View File

@ -4,7 +4,7 @@ This control renders a KanbanBoard which can be used to show Tasks and move it
**Control in Action** **Control in Action**
![KanbanBoard control](../assets/KanbanBoard.gif) ![KanbanBoard control](../assets/kanbanofficeUI.gif)
## How to use this control in your solutions ## How to use this control in your solutions
@ -16,21 +16,21 @@ In the Files ```MockKanban.tsx``` you can find many Configuration Options
```typescript ```typescript
<KanbanComponent <KanbanComponent
buckets={buckets} buckets={buckets}
tasks={tasks} tasks={tasks}
tasksettings={{ tasksettings={{
showPriority: true, showPriority: true,
showAssignedTo: true, showAssignedTo: true,
showTaskDetailsButton: true showTaskDetailsButton: true
} }
} }
taskactions={{ taskactions={{
toggleCompleted: this._toggleCompleted.bind(this), toggleCompleted: this._toggleCompleted.bind(this),
allowMove: this._allowMove.bind(this), allowMove: this._allowMove.bind(this),
moved: this._moved.bind(this), moved: this._moved.bind(this),
}} }}
showCommandbar={true} showCommandbar={true}
/> />
``` ```
Bucket Bucket
@ -39,18 +39,13 @@ Bucket
{bucket:'Not Started', bucketheadline:'Not Started Head',percentageComplete:0, color:'yellow' ,allowAddTask:true}, {bucket:'Not Started', bucketheadline:'Not Started Head',percentageComplete:0, color:'yellow' ,allowAddTask:true},
{bucket:'Test1', bucketheadline:'Test1 Head',percentageComplete:10, color:'orange',allowAddTask:true }, {bucket:'Test1', bucketheadline:'Test1 Head',percentageComplete:10, color:'orange',allowAddTask:true },
{bucket:'Test2', bucketheadline:'Test2 Head',percentageComplete:50, color:'green' }, {bucket:'Test2', bucketheadline:'Test2 Head',percentageComplete:50, color:'green' },
{bucket:'Test3', bucketheadline:'Test3 Head',percentageComplete:50, color:'#FF0000' },
{bucket:'Test4', bucketheadline:'Test4 Head',percentageComplete:0 ,allowAddTask:true }
], ],
``` ```
Task Task
``` ```
{taskId: 1, title:'test1',bucket:'Not Started'}, {taskId: '1', title:'test1',bucket:'Not Started'},
{taskId: 2, title:'test2',bucket:'Not Started'},
{taskId: 3, title:'test3',bucket:'Not Started'},
{taskId: '4', title:'test 4',bucket:'Test4'},
{taskId: '5', title:'test 5',bucket:'Test3'}, {taskId: '5', title:'test 5',bucket:'Test3'},
``` ```