SurfaceBulma.Tabs (surface_bulma v0.6.1)
A simple horizontal navigation tabs component.
Tab selection is handled by an internal event when Phoenix LiveView version < 0.17.* is used. A custom event can be specified for a tab, but be aware that the event handler has to send an update to the component containing the tab.
For example given this markup:
~F"""
<Panel id="mypanel">
<:title>Test Panel</:title>
<Tab title="first">
<TabItem>Item</TabItem>
</Tab>
<Tab title="special" click="my-event">
<TabItem>SpecialItem</TabItem>
</Tab>
</Panel>
"""
The parent LiveView or LiveComponent needs to call Panel.set_tab/2
to tell the Panel
that the selected tab has changed.
The event handler would then look like this:
def handle_event("my-event", %{"index" => index_str}, socket) do
... do some other things ...
Panel.set_tab("mypanel", String.to_integer(index_str))
end
## Properties
* **id** *:string, required: true* - The id of the live component (required by LiveView for stateful components).
* **style** *:string, values: ~w/boxed toggle rounded/*
* **expanded** *:boolean* - Make tab full width
## Slots
* **tabs, required: true** - The tabs to display
Summary
Functions
Callback implementation for Phoenix.LiveComponent.handle_event/3
.
Callback implementation for Phoenix.LiveComponent.mount/1
.
Callback implementation for Phoenix.LiveComponent.render/1
.
Callback implementation for Phoenix.LiveComponent.update/2
.
Functions
handle_event(binary, map, socket)
Callback implementation for Phoenix.LiveComponent.handle_event/3
.
mount(socket)
Callback implementation for Phoenix.LiveComponent.mount/1
.
render(assigns)
Callback implementation for Phoenix.LiveComponent.render/1
.
set_tab(id, index)
update(assigns, socket)
Callback implementation for Phoenix.LiveComponent.update/2
.