Skip to main content

items

Description​

Optional. Specifies controls that will be shown in the toolbar of To Do List

Usage​

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

Default config​

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

Parameters​

The items array can include the following parameters:

  • "combo" - the combo control for choosing a project
  • "search" - the search bar
  • "menu" - the menu with a set of options which allow you to:
    • sort tasks in the ascending/descending order by the following criteria:
      • by text
      • by due date
      • by completion date
      • by creation date
      • by editing date
    • hide/show completed tasks
    • to add a new project, rename or delete a currently active project
  • "custom_item" - a custom control specified either as a string or a function
tip

You can specify your own structure of the toolbar by enumerating necessary elements in the items array in the desired order

Example​

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",
        `<div style={{marginLeft: 'auto', paddingLeft: '10px'}}><button className="g-btn g-btn--sm">Custom button</button></div>`,
    ],
});

Related articles: