It isn't the nicest way to do it (see below), but certainly the most flexible. One way to deal with this is to use primitive values (e.g., strings) as arg values and add a custom render function to convert these values to their complex counterpart before rendering. Beyond that, complex values such as JSX cannot be synchronized between the manager (e.g., Controls addon) and the preview (your story). The most obvious issue is that not every value can be represented as part of the args param in the URL, losing the ability to share and deeplink to such a state. When dealing with non-primitive values, you'll notice that you'll run into some limitations. Using argTypes, you can change the display and behavior of each control. It infers from the component definition if your framework supports it.Īppear in the list of args for your story. If we are writing complex stories, we may want to add controls for args that aren’t part of the component.īy default, Storybook will add controls for all args that: Until now, we only used auto-generated controls based on the component we're writing stories for. If you haven't used the CLI to setup the configuration, or if you want to define your own patterns, use the matchers property in the controls parameter: Fully custom args Will display a date picker UI for the args that match it Will display a color picker UI for the args that match it If you've used the Storybook CLI to setup your project it should have automatically created the following defaults in. ![]() This replaces the input with a radio group for a more intuitive experience.įor a few types, Controls can automatically be inferred with regex. See the documentation about customizing controls with argTypes annotation for more information. □ ArgTypes are a powerful feature that can be used to customize the controls for your stories.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |