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 for adding/renaming/removing a 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: