DevactionUI.Pricing (devaction_ui v0.2.3)

Copy Markdown View Source

A table of plans with a billing toggle and a card per plan.

The toggle (monthly or yearly) is built on DevactionUI.Segmented; a card has the name, tagline, price, the features with a check and the action.

One plan can be highlighted with a ribbon, and a plan can be only text ("talk to us"). The component never invents a value: the price, the period, the note under it and the features all come by attr, already formatted by the caller. The server owns the billing period (period, and billing_event with phx-value-value) and receives the chosen plan on event (phx-value-plan); events are strings or %JS{}, and target serves a LiveComponent. A plan is a :plan slot; a :check slot draws the mark of a feature (a typographic check is the fallback).

Each plan is an article named by its heading. The highlighted plan has a 2px border and the dark action; its ribbon is part of its text.

Summary

Functions

table(assigns)

The table of plans.

Functions

table(assigns)

@spec table(map()) :: Phoenix.LiveView.Rendered.t()

The table of plans.

Attributes

  • id (:string) (required)
  • billing_label (:string) (required) - names the billing toggle for assistive technology.
  • billing (:list) - [%{value: ..., label: ..., tag: ...}]; empty hides the toggle. tag is the small note beside a label. Defaults to [].
  • period (:string) - the value of the chosen billing option. Defaults to nil.
  • billing_event (:any) - string or %JS{}, with phx-value-value. Defaults to nil.
  • event (:any) - sent by the action of a plan, with phx-value-plan. Defaults to nil.
  • target (:any) - a phx-target (a @myself) inside a LiveComponent. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • title - a heading beside the billing toggle.
  • plan (required) - one plan. Accepts attributes:
    • id (:string) (required)
    • name (:string) (required)
    • tagline (:string)
    • price (:string) - the price as the caller writes it; never made up here.
    • period (:string) - what the price is per, beside it ("/month").
    • note (:string) - a line under the price ("billed yearly").
    • custom (:string) - text in place of the price, for a plan with no list price.
    • features (:list) - the lines of the feature list.
    • highlighted (:boolean)
    • ribbon (:string) - the label on the border of a highlighted plan.
    • cta (:string) (required) - the text of the action.
  • check - the mark before a feature; the fallback is a typographic check.
  • footnote - small print under the plans.