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

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.



  def variations do
        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"/>|

Link to this section Summary

Link to this section Types

@type t() :: %PhxLiveStorybook.Stories.Variation{
  attributes: map(),
  description: String.t() | nil,
  id: atom(),
  let: atom() | nil,
  slots: [String.t()],
  template: :unset | String.t() | nil | false