LiveViewNativeFlutterUi.Dart (live_view_native_flutter_ui v0.1.1)
Provides commands for executing Flutter operations on the client.
Inspired & partially copied from Phoenix.LiveView.JS
Summary
Functions
Hides elements.
See hide/1
.
Pushes an event to the server.
See push/1
.
Saves the current theme in the local storage of the app. When the app boots, the theme stored will be used
See show/1
.
Switches the app theme, the app theme is not saved locally, please see save_theme for saving the current theme.
Types
@opaque t()
Functions
hide(opts \\ [])
Hides elements.
Options
:to
- The optional DOM selector to hide. Defaults to the interacted element.:transition
- The string of classes to apply before hiding or a 3-tuple containing the transition class, the class to apply to start the transition, and the ending transition class, such as:{"ease-out duration-300", "opacity-100", "opacity-0"}
:time
- The time to apply the transition from:transition
. Defaults 200
During the process, the following events will be dispatched to the hidden elements:
- When the action is triggered on the client,
phx:hide-start
is dispatched. - After the time specified by
:time
,phx:hide-end
is dispatched.
Examples
<Container id="item">My Item</Container>
<ElevatedButton phx-click={JS.hide(to: "#item")}>
hide!
</ElevatedButton>
<ElevatedButton phx-click={JS.hide(to: "#item", transition: "fade-out-scale")}>
hide fancy!
</ElevatedButton>
hide(dart, opts)
See hide/1
.
push(event)
Pushes an event to the server.
event
- The string event name to push.
Options
:target
- The selector or component ID to push to. This value will overwrite anyphx-target
attribute present on the element.
Examples
<ElevatedButton phx-click={Dart.push("clicked")}>click me!</ElevatedButton>
push(event, opts)
See push/1
.
push(exec, event, opts)
See push/1
.
save_current_theme()
save_current_theme(exec)
Saves the current theme in the local storage of the app. When the app boots, the theme stored will be used
Examples
Dart.save_current_theme()
show(opts \\ [])
show(dart, opts)
See show/1
.
switch_theme(mode)
Switches the app theme, the app theme is not saved locally, please see save_theme for saving the current theme.
theme
(optional) - The theme to switch to (the default theme is named "default")mode
- light / dark / system The mode to switch the theme to (the default mode is "light")
Examples
Dart.switch_theme("dark")
Dart.switch_theme("default", "dark")
Dart.switch_theme("default", "system")