View Source PhxLiveStorybook.Stories.Variation (phx_live_storybook v0.4.1)

A variation captures the rendered state of a UI component. Developers write multiple variations per component that describe all the “interesting” states a component can support.

Each variation will be displayed in the storybook as a code snippet alongside with the component preview.

Variations attributes type are checked against their matching attribute (if any) and will raise a compilation an error in case of mismatch.

Advanced component & variation documentation is available in the components guide.

usage

Usage

  def variations do
    [
      %Variation{
        id: :default,
        description: "Default dropdown",
        attributes: %{
          label: "A dropdown",
        },
        slots: [
          ~s|<:entry path="#" label="Account settings"/>|,
          ~s|<:entry path="#" label="Support"/>|,
          ~s|<:entry path="#" label="License"/>|
        ]
      }
    ]
  end