SurfaceBulma.Panel (surface_bulma v0.5.0)

The panel for compact controls and tabs

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

* **color** *:string, values: ~w(white black light dark primary link info success warning danger)* - The color of the panel.
* **style** *:string, values: ~w/boxed toggle rounded/*
* **expanded** *:boolean* - Make tab full width
* **tabs_class** *:css_class, default: []* - A class to set on the tabs container

## Slots

* **title, required: true** - This slot will be used as the title of the panel.

* **header** - A panel-block that will be displayed above the tabs

* **tabs**

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

set_tab(id, index)

Link to this function

update(assigns, socket)

Callback implementation for Phoenix.LiveComponent.update/2.