The bulk selector gives individuals the ability to take complex actions on a group of items.
This component is deprecated! Please use the new Button instead.
1 item selected
<tk-bulk-selector>
<p class="mb-0x" slot="count">1 item selected</p>
<tk-dropdown slot="actions" trigger-type="action" light position="top-right">
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Beauxbatons Academy
</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Durmstrang Institute
</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" current="true" type="button">
Hogwarts
</button>
</tk-dropdown-item>
</tk-dropdown>
</tk-bulk-selector>
<tk-checkbox id="bulkToggler" label="Bulk Selector"></tk-checkbox>
<script>
let shouldShowBulkSelector = true;
const bulkSelector = document.getElementsByTagName('tk-bulk-selector');
const selectedCount = document.querySelectorAll('p[slot="count"]');
bulkToggler.addEventListener('check', (e) => toggleBulkSelector(e.target))
bulkSelector[0].addEventListener('allSelected', (e) => updateCount(e.detail));
const updateCount = (eventDetail) => {
const selectedText = eventDetail ? '9k items selected' : '1 item selected';
return selectedCount[0].innerText = selectedText;
}
const toggleBulkSelector = (element) => {
bulkSelector[0].showBulkSelector(shouldShowBulkSelector);
shouldShowBulkSelector = !shouldShowBulkSelector;
};
</script>
This is the default bulk selector style. The bulk selector always slides in from the bottom of the viewport and stays fixed to the bottom of the viewport. The Bulk Selector component has four areas for content: select all, body, count and actions. All areas are optional.
Insight
During testing, customers were able to more easily discover and use bulk selector in the dark style.<tk-bulk-selector light>
<tk-dropdown slot="actions" trigger-type="action" position="top-right">
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Beauxbatons Academy
</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Durmstrang Institute
</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" current="true" type="button">
Hogwarts
</button>
</tk-dropdown-item>
</tk-dropdown>
</tk-bulk-selector>
<tk-checkbox id="bulkToggler2" label="Bulk Selector"></tk-checkbox>
<script>
let shouldShowBulkSelector2 = true;
bulkToggler2.addEventListener('check', (e) => toggleBulkSelector2(e.target));
const toggleBulkSelector2 = (element) => {
bulkSelector[1].showBulkSelector(shouldShowBulkSelector2);
shouldShowBulkSelector2 = !shouldShowBulkSelector2;
};
</script>
This should only be used against dark backgrounds.
Needs to have correct aria-label
applied to alert user of its presence.