주요 콘텐츠로 건너뛰기

items

설명​

선택 사항. To Do List의 toolbar에 표시할 컨트롤을 지정합니다

사용법​

items?: [
    "combo",
    "search",
    "menu",
    "undo",
    "redo"
    custom_control // string or function
];

기본 설정​

items: ["combo", "search", "menu"]

파라미터​

items 배열에는 다음 파라미터를 포함할 수 있습니다:

  • "combo" - 프로젝트를 선택하는 콤보 컨트롤
  • "search" - 검색 바
  • "menu" - 다음 작업을 수행할 수 있는 옵션 메뉴:
    • 아래 기준으로 작업을 오름차순/내림차순으로 정렬:
      • 텍스트 기준
      • 마감일 기준
      • 완료일 기준
      • 생성일 기준
      • 수정일 기준
    • 완료된 작업 숨기기/표시
    • 새 프로젝트 추가, 현재 활성 프로젝트 이름 변경 또는 삭제
  • "undo" - 마지막 작업을 되돌리는 컨트롤
  • "redo" - undo로 되돌린 작업을 다시 실행하는 컨트롤
  • "custom_item" - 문자열 또는 함수로 지정하는 커스텀 컨트롤
팁

items 배열에 원하는 순서로 요소를 나열하여 toolbar의 구조를 직접 정의할 수 있습니다

예제​

const { ToDo, Toolbar } = todo;
const { tasks, users, projects, tags } = getData();

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    tags,
});
const toolbar = new Toolbar("#toolbar", {
    api: list.api,
    items: [
        `<div style={{fontWeight: 500, fontSize: '18px', padding: '0 10px', width: '100%'}}>Logo<div/>`,
        "search",
        "menu",
        "undo",
        "redo",
        `<div style={{marginLeft: 'auto', paddingLeft: '10px'}}><button className="g-btn g-btn--sm">Custom button</button></div>`,
    ]
});

변경 이력: "undo" 및 "redo" 파라미터는 v1.3에서 추가되었습니다

관련 문서:

Need more help?Contact Support