View Source Surface.Catalogue.Playground (surface v0.11.5)

A generic LiveView to create a component's playground for the Surface Catalogue.

Options

Besides the buit-in options provided by the LiveView itself, a Playground also provides the following options:

• subject - Required. The target component of the Playground.

• height - Required. The initial height of the Playground.

• catalogue - Optional. A module that implements the Surface.Catalogue providing additional information to the catalogue tool. Usually required if you want to share your components as a library.

• body - Optional. Sets/overrides the attributes of the Playground's body tag. Useful to set a different background or padding.

Initializing props and slots

If you need to define initial values for props or slots of the component, you can use the @props and @slots module attributes, respectively. Both attributes are optional and take a keyword list containing all the props/slots you need to initialize.

Pay attention that if you have required props/slots, you should provide initial values for them.

Example

defmodule MyApp.Components.MyButton.Playground do
  use Surface.Catalogue.Playground,
    subject: MyApp.Components.MyButton,
    height: "170px"

  @props [
    class: "btn"
  ]

  @slots [
    default: "Cancel"
  ]
end