refresh()role="listbox" element.data-filter="manual"combobox.refresh().aria-hidden="true" on hidden options, then call combobox.refresh().window.basecoat.refresh(combobox)command.refresh()role="menu" list.data-filter="manual"command.refresh().aria-hidden="true" on hidden items, then call command.refresh().window.basecoat.refresh(command)Add the following to the <head> of your HTML file:
Add the following to the <head> of your HTML file. This loads the default CDN stylesheet and the JavaScript bundle for every JavaScript component:
While the JavaScript file for all components is small (around 3kB gzipped), you can cherry-pick the components you need as instructed in the component's page (Dropdown Menu, Popover, Select, Sidebar, Tabs and Toast). For example, to add the Dropdown Menu component, add the following to the <head> of your HTML file:
The CDN style bundles are aggregated. If you want to cherry-pick CSS, use the package component files through npm or your own asset pipeline.
+For JavaScript, you can cherry-pick the components you need as instructed in each component page. Include basecoat.min.js once, then include the component script.
You can also import lower-level bundles or individual component CSS files:
+Some components need some JavaScript (e.g. the Tabs component). There are two ways to get it into your project:
+Some components need JavaScript. You can either import the all-in-one bundle or only the components you use.
If your project is ESM-aware you can directly import the scripts. To include all components:
+To include all JavaScript components:
Or cherry-pick specific components, for example:
+Or cherry-pick specific components. Import basecoat-css/basecoat once, then import the component scripts:
A handful of components require JavaScript code to work, specifically Dropdown Menu, Popover, Select, Sidebar, Tabs and Toast
+A handful of components require JavaScript code to work, specifically Combobox, Command, Dropdown Menu, Popover, Select, Sidebar, Slider, Tabs and Toast.
-If a component requires JavaScript, the documentation page will provide instructions. There are 2 options to add the JavaScript code to your project:
+If a component requires JavaScript, the documentation page provides the minimal scripts. There are two options:
<head> of your HTML file, or just the file for the component you want to use as instructed on the component's page.all.min.js or all.js).dist/js/all.min.js from the CDN or import "basecoat-css/all" with a build tool.basecoat.min.js once, then load or import each component script, such as select.min.js or basecoat-css/select.