具有web组件的故事书-在代码上动态更改参数

Question

我有一个模态组件，我正在为它写故事。它看起来像这样：

import { Story, Meta } from '@storybook/html';
export default {
title: 'Components/Modal',
argTypes: {
open: {
name: 'Opened',
control: 'boolean'
},
},
args: {
open: false,
}
} as Meta;
const Template: Story = (args) => {
return `
<my-modal open="${args.open}">
Some example content inside the modal
</my-modal>
`;
};
export const Modal: Story = Template.bind({});

我在控件上有argopen，我可以将其值更改为true，并显示模态。但我希望这个故事有一个按钮，当它被点击时，模态就会显示出来。我在当前版本的web组件Storybook中找不到这样做的方法。

我已经看到React(import { useArgs } from '@storybook/api';(有一些钩子可以用来动态更改参数值，但我不知道如何为web组件做到这一点？

任何帮助都将不胜感激。

Answer 1

我也有同样的问题，然后我尝试使用useArgs钩子。。。它有效！

import { useArgs } from '@storybook/client-api';
import type { Story, Meta } from '@storybook/web-components';
import { html } from 'lit';
import type { DialogSize } from './dialog';
import './dialog';
const meta: Meta = {
title: 'Components/Dialog',
argTypes: {
open: {
control: 'boolean',
},
size: {
control: 'select',
options: ['small', 'default', 'large'],
},
overlayClick: {
action: 'm-overlay-click',
table: {
disable: true,
},
},
},
};
export default meta;
export const Playground: Story<{
open: boolean;
size: DialogSize;
overlayClick: () => void;
}> = ({ size, overlayClick }) => {
const [{ open }, updateArgs] = useArgs();
function handleOpenClick() {
updateArgs({ open: true });
}
function handleOverlayClick() {
updateArgs({ open: false });
overlayClick();
}
return html`
<div>
<button type="button" @click=${handleOpenClick}>Open Dialog</button>
<m-dialog ?open=${open} size=${size} @m-overlay-click=${handleOverlayClick}>
<m-dialog-body>Content</m-dialog-body>
</m-dialog>
</div>
`;
};
Playground.args = {
open: false,
size: 'default',
};

顺便说一下，我正在使用StoryBook6.5。

Answer 2

只需将该按钮添加到模板中：

import { Story, Meta } from '@storybook/html';
export default {
title: 'Components/Modal',
argTypes: {
open: {
name: 'Opened',
control: 'boolean'
},
},
args: {
open: false,
}
} as Meta;
const Template: Story = (args) => {
return `
<button 
type="button" 
onclick="this.nextElementSibling.open = !this.nextElementSibling.open">
Toggle Modal
</button>
<my-modal .open=${args.open}>
Some example content inside the modal
</my-modal>
`;
};
export const Modal: Story = Template.bind({});

此外，对于布尔属性-如果实现得当-您应该使用属性(在模板中使用.作为其前缀(，而不是属性。

Answer 3

使用所有本地代码这样做不是火箭科学。。。

<my-dialog id="DIALOG" open>
Hello *Native* Web Components world!
</my-dialog>
<button onclick="DIALOG.open()">OPEN</button>
<script>
customElements.define("my-dialog", class extends HTMLElement {
static get observedAttributes() {
return ["open"];
}
constructor() {
super() // sets and returns 'this'
.attachShadow({mode:"open"}) // sets and return this.shadowRoot
.innerHTML = `<dialog><slot></slot><button>Close</button></dialog>`;
this.dialog = this.shadowRoot.querySelector("dialog");
}
connectedCallback() {
this.onclick = () => this.close(); // or attach to button
}
attributeChangedCallback(name,oldValue,newValue) {
this.open();
}
open() {
this.dialog.showModal(); // or .show()
}
close() {
this.dialog.close();
}
});
</script>