Mike Phares
127634f5ab
Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter Color Sorting
60 lines
2.6 KiB
JavaScript
60 lines
2.6 KiB
JavaScript
import { action } from "@storybook/addon-actions";
|
|
export default {
|
|
title: 'Components/Breadcrumb',
|
|
tags: ['autodocs'],
|
|
args: {
|
|
icon: false
|
|
},
|
|
argTypes: {
|
|
ifxDropdownMenuItem: {
|
|
action: 'ifxDropdownMenuItem',
|
|
description: 'Custom event emitted when an item is selected',
|
|
table: {
|
|
type: {
|
|
summary: 'Framework integration',
|
|
detail: 'React: onIfxDropdownMenuItem={handleChange}\nVue:@ifxDropdownMenuItem="handleChange"\nAngular:(ifxDropdownMenuItem)="handleChange()"\nVanillaJs:.addEventListener("ifxDropdownMenuItem", (event) => {//handle change});',
|
|
},
|
|
},
|
|
}
|
|
}
|
|
};
|
|
const DefaultTemplate = (args) => {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.innerHTML =
|
|
`<ifx-breadcrumb>
|
|
<ifx-breadcrumb-item>
|
|
<ifx-breadcrumb-item-label slot="label" icon="${args.icon ? 'c-info-16' : ""}">Breadcrumb 1</ifx-breadcrumb-item-label>
|
|
<ifx-dropdown-menu>
|
|
<ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
|
|
<ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
|
|
<ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
|
|
<ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
|
|
</ifx-dropdown-menu>
|
|
</ifx-breadcrumb-item>
|
|
|
|
<ifx-breadcrumb-item>
|
|
<ifx-breadcrumb-item-label slot="label" icon="${args.icon ? 'c-info-16' : ""}">Breadcrumb 2</ifx-breadcrumb-item-label>
|
|
<ifx-dropdown-menu>
|
|
<ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
|
|
<ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
|
|
<ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
|
|
<ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
|
|
</ifx-dropdown-menu>
|
|
</ifx-breadcrumb-item>
|
|
|
|
<ifx-breadcrumb-item>
|
|
<ifx-breadcrumb-item-label slot="label" icon="${args.icon ? 'c-info-16' : ""}" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
|
|
</ifx-breadcrumb-item>
|
|
</ifx-breadcrumb>`;
|
|
const breadcrumb = wrapper.querySelector('ifx-breadcrumb');
|
|
// Loop through each breadcrumb item and attach event listeners to its dropdown menu
|
|
const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');
|
|
breadcrumbItems.forEach((breadcrumbItem) => {
|
|
const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');
|
|
dropdownMenu === null || dropdownMenu === void 0 ? void 0 : dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));
|
|
});
|
|
return wrapper;
|
|
};
|
|
export const Default = DefaultTemplate.bind({});
|
|
//# sourceMappingURL=breadcrumb.stories.js.map
|