PhoenixPaper.TabPanel (PhoenixPaper v0.1.0)

Copy Markdown View Source

The content shown for one PhoenixPaper.Tab (pp_tab_panel/1) — hidden until its matching tab is selected. See PhoenixPaper.Tabs's moduledoc for the full composition example and why switching needs real per-element JS targeting rather than a CSS-only trick.

id/value must match the corresponding pp_tab/1 exactly — that's how PhoenixPaper.Tabs.select/2,3 finds this panel to show/hide it.

Unlike MUI's TabPanel (which unmounts inactive panels from the React tree by default), every panel here always stays in the DOM, just display: none — the same trade-off PhoenixPaper.Dialog/ PhoenixPaper.Drawer make, and for the same reason: pure CSS/JS visibility toggling needs the element to exist in order to toggle it.

Summary

Functions

pp_tab_panel(assigns)

Renders tab panel content. See the module doc.

Functions

pp_tab_panel(assigns)

Renders tab panel content. See the module doc.

Attributes

  • id (:string) (required) - the same id passed to the parent pp_tabs/1.
  • value (:string) (required) - matches the corresponding pp_tab/1's value.
  • default_selected (:boolean) - Defaults to false.
  • paperize (:boolean) - Defaults to true.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)