Components
Helpers
PhoenixPaper.Ripple, Elevation, Shape, and theming: the plumbing every visual component in this library is built on.
Ripple
The Material ripple effect (a circle that expands from the click point and fades out). Vanilla inline onclick, no JS hook/bundler. Click or tap any button on this site to see it.
ripple: true (default) vs. ripple: false
Options
- ripple
- the boolean prop on Button, Fab, ToggleButton, Switch, Checkbox, RadioGroup, and a linked ListItem: default true, except Checkbox/RadioGroup (default false; their own instant fill/border change already reads as feedback on a target that small); always off when paperize is false
- PhoenixPaper.Ripple.on_click/1
- returns the script, or nil when disabled (so the attribute is dropped entirely)
- PhoenixPaper.Ripple.container_classes/1
- the "relative overflow-hidden" the ripple needs to stay clipped
<.pp_button>Ripples (default)</.pp_button>
<.pp_button ripple={false}>No ripple</.pp_button>Elevation
PhoenixPaper.Elevation.class/1 maps a Material dp level (0-24, clamped) to a pp-elevation-N class backed by a two-layer box-shadow approximating Google's official table.
Scale
Options
- Elevation.class(level)
- returns the literal "pp-elevation-N" class name
<div class={["rounded-lg bg-pp-surface p-4", PhoenixPaper.Elevation.class(8)]}>8dp</div>Shape
PhoenixPaper.Shape.class/1,2 maps a token to a literal rounded-* class, optionally scoped to an edge (:top/:bottom) for shapes like the filled text field that only round two corners.
Scale
Options
- Shape.class(token)
- all four corners
- Shape.class(token, :top | :bottom)
- only those two corners
<div class={["size-14 border-2 border-pp-primary", PhoenixPaper.Shape.class(:lg)]} />Theming
Colors are Tailwind v4 theme tokens backed by CSS custom properties, namespaced pp- so they never collide with daisyUI. Try the buttons below: no page reload, just flipping data-theme/data-pp-theme on the root html element.
Try it
This changes the whole page's theme, not just this section; use the toggle in the top-right corner to flip back to your system preference.
Options
- data-theme="dark"
- on any ancestor (the same attribute daisyUI/Phoenix 1.8's generated app.css already use)
- data-pp-theme="teal"
- opts into the bundled alternate palette
- custom theme
- override the --color-pp-* variables from your own stylesheet: no build step, no JS config
<button phx-click={JS.set_attribute({"data-theme", "dark"}, to: "html")}>Dark</button>
<button phx-click={JS.set_attribute({"data-pp-theme", "teal"}, to: "html")}>Teal</button>