ArgTypes block MDX import path
The ArgTypes block is imported from '@storybook/addon-docs/blocks'.
documentation: autodocs
16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
ArgTypes block 'of' prop with component
The ArgTypes block accepts an 'of' prop that can reference a component directly using dot notation like 'of={ExampleStories.default.component}'.
ArgTypes block 'of' prop with meta
The ArgTypes block accepts an 'of' prop that can reference a story's meta/default export using dot notation like 'of={ExampleStories.default}'.
ArgTypes block 'of' prop with story
The ArgTypes block accepts an 'of' prop that can reference a specific story using dot notation like 'of={ExampleStories.NoParameters}'.
ArgTypes block 'include' prop
The ArgTypes block accepts an 'include' prop that takes an array of argument names to display, filtering to only the specified arguments like 'include=["a"]'.
ArgTypes block 'exclude' prop
The ArgTypes block accepts an 'exclude' prop that takes an array of argument names to hide, filtering out the specified arguments like 'exclude=["a"]'.
ArgTypes block 'sort' prop with alpha value
The ArgTypes block accepts a 'sort' prop with the value 'alpha' to sort arguments alphabetically like 'sort="alpha"'.
ArgTypes block supports subcomponents
The ArgTypes block can display arguments for subcomponents within a component by using the 'of' prop with a story that defines subcomponents.
ArgTypes block subcomponents filtering
The ArgTypes block supports filtering subcomponents using 'include' and 'exclude' props with arrays containing subcomponent argument names like 'include=["a", "f"]' or 'exclude=["a", "c", "f", "g"]'.
ArgTypes block supports categories
The ArgTypes block can organize and display arguments using categories, referencing stories that define argument categories.
Controls block of prop
The Controls block accepts an 'of' prop that specifies which story to display controls for. The value is a story export, for example: <Controls of={ExampleStories.NoParameters} />
Controls block include prop
The Controls block accepts an 'include' prop that filters which arg types to display. The value is an array of argument names, for example: <Controls of={ExampleStories.NoParameters} include={['a']} /> displays only the control for argument 'a'.
Controls block exclude prop
The Controls block accepts an 'exclude' prop that filters out which arg types to display. The value is an array of argument names, for example: <Controls of={ExampleStories.NoParameters} exclude={['a']} /> hides the control for argument 'a'.
Controls block sort prop
The Controls block accepts a 'sort' prop to control the ordering of displayed controls. The value 'alpha' sorts controls alphabetically, for example: <Controls of={ExampleStories.NoParameters} sort="alpha" />
Controls block with subcomponents
The Controls block can display controls for subcomponents within a story. Subcomponents are included or excluded using the same include and exclude props as regular arguments.
Multiple Controls blocks on same page
Multiple Controls blocks can be placed on the same MDX page, each with their own 'of' prop pointing to different stories or the same story with different filter configurations.