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:
Surface.Component
- A stateless component.Surface.LiveComponent
- A live stateful component.Surface.LiveView
- A wrapper component aroundPhoenix.LiveView
.Surface.MacroComponent
- A low-level component which is responsible for translating its own content at compile time.
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
Retrieve the component's config based on the key
Retrieve a component's config based on the key
Translates Surface code into Phoenix templates.