Fluxon (Fluxon v2.0.0)

To use Fluxon components in your LiveView or View modules, add the following to your module:

use Fluxon

This will import all available components. You can customize which components to import using the following options:

:only - List of components to import. Only the specified components will be imported.
```
use Fluxon, only: [:button, :input, :modal]
```
:except - List of components to exclude. All components except the specified ones will be imported.
```
use Fluxon, except: [:table, :tabs]
```

Summary

Functions

close_dialog(id)

Closes a dialog component (modal, sheet).

close_dialog(socket, id)

Closes a dialog via push event.

close_popover(js \\ %JS{}, id)

Closes a popover component.

open_dialog(id)

Opens a dialog component (modal, sheet).

open_dialog(socket, id)

Opens a dialog via push event.

open_popover(js \\ %JS{}, id)

Opens a popover component.

Functions

close_dialog(id)

Closes a dialog component (modal, sheet).

Parameters

id - The ID of the dialog element to close.

Example

<.button phx-click={Fluxon.close_dialog("my-modal")}>Close modal</.button>
<.modal id="my-modal"></.modal>

close_dialog(socket, id)

Closes a dialog via push event.

Parameters

socket - The Phoenix.LiveView.Socket struct.
id - The ID of the dialog element to close.

Example

def handle_event("close_dialog", _, socket) do
  {:noreply, Fluxon.close_dialog(socket, "my-dialog")}
end

close_popover(js \\ %JS{}, id)

Closes a popover component.

Parameters

id - The ID of the popover element to close.

Example

<.button phx-click={Fluxon.close_popover("my-popover")}>Close popover</.button>
<.popover id="my-popover"></.popover>

open_dialog(id)

Opens a dialog component (modal, sheet).

Example

<.button phx-click={Fluxon.open_dialog("my-modal")}>Open modal</.button>
<.modal id="my-modal"></.modal>

open_dialog(socket, id)

Opens a dialog via push event.

Parameters

socket - The Phoenix.LiveView.Socket struct.
id - The ID of the dialog element to open.

Example

def handle_event("open_dialog", _, socket) do
  {:noreply, Fluxon.open_dialog(socket, "my-dialog")}
end

open_popover(js \\ %JS{}, id)

Opens a popover component.

Example

<.button phx-click={Fluxon.open_popover("my-popover")}>Open popover</.button>
<.popover id="my-popover"></.popover>