surface v0.1.0-alpha.2 Surface View Source

Surface is component based library for Phoenix LiveView.

Built on top of the new Phoenix.LiveComponent API, Surface provides a more declarative way to express and use components in Phoenix.

Full documentation and live examples can be found at surface-demo.msaraiva.io

This module defines the ~H sigil that should be used to translate Surface code into Phoenix templates.

In order to have ~H available for any Phoenix view, add the following import to your web file in lib/my_app_web.ex:

# lib/my_app_web.ex

...

def view do
  quote do
    ...
    import Surface
  end
end

Defining components

To create a component you need to define a module and use one of the available component types:

Example

# A functional stateless component

defmodule Button do
  use Surface.Component

  property click, :event
  property kind, :string, default: "is-info"

  def render(assigns) do
    ~H"""
    <button class="button {{ @kind }}" phx-click={{ @click }}>
      <slot/>
    </button>
    """
  end
end

You can visit the documentation of each type of component for further explanation and examples.

Link to this section Summary

Functions

Retrieve the component's config based on the key

Retrieve a component's config based on the key

Translates Surface code into Phoenix templates.

Link to this section Functions

Link to this function

component(module, assigns, list)

View Source
Link to this macro

get_config(key)

View Source (macro)

Retrieve the component's config based on the key

Link to this macro

get_config(component, key)

View Source (macro)

Retrieve a component's config based on the key

Link to this macro

sigil_H(arg, _)

View Source (macro)

Translates Surface code into Phoenix templates.