SurfaceBulma.Tabs (surface_bulma v0.3.3)

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).

* **expanded** *:boolean, default: false* - Make tab full width
* **boxed** *:boolean, default: false* - Classic style with borders

## Slots

* **tabs, required: true** - The tabs to display

Link to this section Summary

Link to this section Functions

Link to this function

handle_event(binary, map, socket)

Callback implementation for Phoenix.LiveComponent.handle_event/3.

Callback implementation for Phoenix.LiveComponent.mount/1.

Link to this function

render(assigns)

Callback implementation for Phoenix.LiveComponent.render/1.

Link to this function

set_tab(id, index)

Link to this function

update(assigns, socket)

Callback implementation for Phoenix.LiveComponent.update/2.