Surface UI

https://surface-ui.org/documentation
Admin
Surface UI is a server-side rendering component library for Phoenix that enables developers to build...
Tokens:2,039
Snippets:11
Trust Score:7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start Phoenix Server

Source: https://surface-ui.org/documentation/getting_started

Command to start the Phoenix development server.

```bash
mix phx.server
```

--------------------------------

### Add LiveView Route

Source: https://surface-ui.org/documentation/getting_started

Example of how to add a route for the `ExampleLive` component in the `router.ex` file.

```elixir
live "/example", ExampleLive
```

--------------------------------

### Surface Component Structure

Source: https://surface-ui.org/documentation/index

Illustrates the basic structure of a Surface component, including defining properties, event handlers, and rendering logic. This example shows a simple counter component.

```Surface
<.button phx-click="increment" phx-value-data={1}>
  +1
</.button>

<p>Count: {@count}</p>

defp handle_event("increment", _, socket) do
  {:noreply, assign(socket, :count, socket.assigns.count + 1)}
end

```

--------------------------------

### Define Custom Surface LiveView Macro in Elixir

Source: https://surface-ui.org/documentation/getting_started

This Elixir code defines a custom macro `surface_live_view` within a Phoenix project's module. This macro is designed to be used with Surface UI, specifying `Surface.LiveView` and a layout. It also includes a placeholder for `view_helpers()`. The example demonstrates how to use this custom macro in a specific LiveView module.

```Elixir
defmodule YourAppWeb do
  ...

  def surface_live_view do
   quote do
     use Surface.LiveView,
       layout: {YourAppWeb.Layouts, :app}

     unquote(view_helpers())
   end
 end
 ...
end

defmodule YourAppWeb.ExampleLive do
  use YourAppWeb, :surface_live_view
end
```

--------------------------------

### Initialize Surface Project

Source: https://surface-ui.org/documentation/getting_started

Initializes the Surface project, optionally generating demo components and a catalogue. It also configures layout files.

```bash
mix surface.init --demo --catalogue --layouts
```

--------------------------------

### Create Surface Component

Source: https://surface-ui.org/documentation/getting_started

Defines a basic Surface component named `ExampleComponent` that accepts a default slot and renders it within an H1 tag.

```elixir
defmodule MyAppWeb.Components.ExampleComponent do
  use Surface.Component

  slot default, required: true

  def render(assigns) do
    ~F"""
    <h1><#slot/></h1>
    """
  end
end
```

--------------------------------

### Create New Phoenix Project

Source: https://surface-ui.org/documentation/getting_started

Command to create a new Phoenix project. This is a prerequisite for adding Surface UI to a new application.

```bash
mix phx.new my_app
```

--------------------------------

### Add Surface Dependency

Source: https://surface-ui.org/documentation/getting_started

Adds the Surface library as a dependency in the `mix.exs` file for a Phoenix project.

```elixir
def deps do
  [
    {:surface, "~> 0.10.0"}
  ]
end
```

--------------------------------

### Render Surface Component in LiveView

Source: https://surface-ui.org/documentation/getting_started

A Surface LiveView that renders the `ExampleComponent` with content passed to its default slot.

```elixir
defmodule MyAppWeb.ExampleLive do
  use Surface.LiveView

  alias MyAppWeb.Components.ExampleComponent

  def render(assigns) do
    ~F"""
    <ExampleComponent>
      Hi there!
    </ExampleComponent>
    """
  end
end
```

--------------------------------

### Convert LiveView to Surface.LiveView

Source: https://surface-ui.org/documentation/getting_started

Illustrates the changes needed to convert a standard Phoenix LiveView to a Surface LiveView, including changing the `use` statement and the sigil.

```elixir
use Surface.Liveview
...
~F"""
...
"""
```

--------------------------------

### Surface Templating with Sigil

Source: https://surface-ui.org/documentation/index

Demonstrates how to write Surface code directly within Elixir files using the `~F` sigil for template translation. This is a common way to embed Surface components in Phoenix applications.

```Elixir
 ~F """
 <button class="btn btn-primary" phx-click="increment" phx-value-data={1}>
  +1
 </button>
 """
```
Tokens:
Raw