items
설명
선택 사항입니다. Kanban의 Toolbar에 배치된 컨트롤 배열입니다.
사용법
items?: [
"search" | {
// 검색 매개변수
type: "search",
options?: [
{
id: string,
label: string,
searchRule?: (card, value, by) => {
return boolean
}
}, {...}
],
resultTemplate?: template(searchResult => {
return "검색 결과의 HTML 템플릿";
})
},
"sort" | {
// 정렬 매개변수
type: "sort",
options?: [
{
text: string,
by?: string, // by?: ((card: object) => any),
dir?: "asc" | "desc"
}, {...}
]
},
"spacer",
"undo",
"redo",
"addColumn",
"addRow",
custom_control // 문자열 또는 함수
];
매개변수
items 배열에서 다음 매개변수를 지정할 수 있습니다:
정보
기본 검색바를 설정하려면 "search" 문자열을 지정할 수 있습니다.
사용자 정의 검색바를 설정하려면 다음 매개변수를 포함하는 객체를 지정할 수 있습니다:
type- (필수) 컨트롤 유형 ("search")options- (선택) 검색 매개변수를 정의하는 객체 배열입니다. 각 객체(검색 옵션)에 대해 다음 매개변수를 지정할 수 있습니다:id- (필수) 카드 필드의 키로, 이 키를 기준으로 카드가 검색됩니다.label- (필수) 검색바 선택기의 드롭다운 목록에 사용되는 옵션 이름입니다.searchRule(선택) - 검색 규칙을 정의하는 사용자 정의 함수입니다. 다음 인수를 받습니다:- card - 카드 데이터 객체
- value - 검색바에 입력된 검색 값
- by - 카드가 검색될 카드 필드 키
searchResult- (선택) 사용자 정의 검색 결과를 표시하기 위한 템플릿
items: [
"search", // 기본 검색바
// 기타 컨트롤
]
// 또는
items: [
{ // 사용자 정의 검색바
type: "search",
options: [
{
id: "label",
label: "라벨로 검색"
},
{
id: "start_date",
label: "날짜로 검색",
searchRule: (card, value, by) => {
const date = card[by];
return date?.toString().includes(value);
}
}
],
resultTemplate: kanban.template(searchResult => {
return `<div className="list-item">
<div className="list-item-text">${searchResult.result.label}</div>
${searchResult.result.description ? `<div className="list-item-text item-description">${searchResult.result.description}</div>` : ""}
</div>`
})
},
// 기타 컨트롤
]
정보
기본 정렬 컨트롤을 설정하려면 "sort" 문자열을 지정할 수 있습니다.
사용자 정의 정렬 컨트롤을 설정하려면 다음 매개변수를 포함하는 객체를 지정할 수 있습니다:
type- (필수) 컨트롤 유형 ("sort")options- (선택) 정렬 매개변수를 정의하는 객체 배열입니다. 각 객체(정렬 옵션)에 대해 다음 매개변수를 지정할 수 있습니다:text- (필수) 정렬 선택기 드롭다운 목록에 사용되는 옵션 이름입니다.by- (선택) 카드를 정렬할 카드 필드의 키입니다. 이 매개변수는 문자열 또는 함수 값으로 설정할 수 있습니다. 함수는 정렬에 사용할 카드 필드를 반환해야 합니다.dir- (선택) 정렬 순서입니다. 가능한 값은 "asc" 와 "desc" 입니다.
items: [
"sort", // 기본 정렬 컨트롤
// 기타 컨트롤
]
// 또는
items: [
{ // 사용자 정의 정렬 컨트롤
type: "sort",
options: [
{
text: "라벨로 정렬",
by: "label",
dir: "asc"
},
{
text: "설명으로 정렬",
by: "description",
dir: "desc"
}
]
}, {...} // 기타 컨트롤
]
"spacer"- 컨트롤 사이의 빈 공간"undo"- 히스토리 관리 컨트롤 (한 번 클릭 시 한 단계 이전으로 이동)"redo"- 히스토리 관리 컨트롤 (한 번 클릭 시 한 단계 이후로 이동)"addColumn"- 새 열 추가 컨트롤"addRow"- 새 행 추가 컨트롤custom_control- (선택) 사용자 정의 컨트롤. 여기에는 문자열 또는 함수 형태로 사용자 정의 컨트롤을 지정할 수 있습니다. 자세한 내용은 Customization 섹션을 참조하세요.
예제
const board = new kanban.Kanban("#root", {
columns,
cards
});
new kanban.Toolbar("#toolbar", {
api: board.api,
items: [
{
type: "search",
resultTemplate: kanban.template(searchResult => {
return `<div className="list-item">
<div className="list-item-text">${searchResult.result.label}</div>
${searchResult.result.description ? `<div className="list-item-text item-description">${searchResult.result.description}</div>` : ""}
</div>`
})
},
"spacer",
"sort",
"undo",
"redo",
"addColumn",
"addRow"
]
});
변경 내역:
- "Undo" 및 "Redo" 컨트롤이 v1.3에 추가되었습니다.
- sort 컨트롤의 items.options[0].label 매개변수가 v1.4에서 items.options[0].text 매개변수로 변경되었습니다.
- "search" 컨트롤의 items.searchResult 매개변수가 v1.6에 추가되었습니다.
관련 샘플: