LineaUI (linea_ui v0.1.1)

Copy Markdown View Source

Phoenix LiveView components with the LineOne design.

use LineaUI

imports every component. Pick or drop some with :only and :except, which take the keys of components/0:

use LineaUI, only: [:button, :modal]
use LineaUI, except: [:table]

avoid_conflicts: true drops the names Phoenix's generated CoreComponents also defines (button, input, table, label, error, header).

Overlays

A modal, drawer, popover, dropdown or tooltip is opened, closed and toggled by its id, in three shapes:

CallReturnsUse in
LineaUI.open("id")%JS{}phx-click
LineaUI.open(socket, "id")sockethandle_event/3, handle_info/2
LineaUI.open(%JS{}, "id")%JS{}a JS pipeline

The same holds for close and toggle. "id" and "#id" are both accepted.

Summary

Functions

close(id)

Closes the overlay with id.

close(target, id)
components()

The component modules use LineaUI imports, by key.

open(id)

Opens the overlay with id.

open(target, id)
toggle(id)

Opens the overlay with id when it is closed and closes it when it is open.

toggle(target, id)

Functions

close(id)

@spec close(String.t()) :: Phoenix.LiveView.JS.t()

Closes the overlay with id.

close(target, id)

@spec close(Phoenix.LiveView.Socket.t() | Phoenix.LiveView.JS.t(), String.t()) ::
  Phoenix.LiveView.Socket.t() | Phoenix.LiveView.JS.t()

components()

@spec components() :: %{required(atom()) => module()}

The component modules use LineaUI imports, by key.

open(id)

@spec open(String.t()) :: Phoenix.LiveView.JS.t()

Opens the overlay with id.

open(target, id)

@spec open(Phoenix.LiveView.Socket.t() | Phoenix.LiveView.JS.t(), String.t()) ::
  Phoenix.LiveView.Socket.t() | Phoenix.LiveView.JS.t()

toggle(id)

@spec toggle(String.t()) :: Phoenix.LiveView.JS.t()

Opens the overlay with id when it is closed and closes it when it is open.

toggle(target, id)

@spec toggle(Phoenix.LiveView.Socket.t() | Phoenix.LiveView.JS.t(), String.t()) ::
  Phoenix.LiveView.Socket.t() | Phoenix.LiveView.JS.t()