PageBilling Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Billing page. Slots: plan, usage, invoices, methods, upgrade.

Jump to API reference

Import

Vue
import { UiPageBilling } from '@ziyarago/ui-pro/vue'

Default

Billing

Section

Current plan slot
Usage slot
Invoices slot
Payment methods slot
Upgrade slot
Vue
<UiPageBilling title="Billing" subtitle="Section">
  <template #plan>Current plan slot</template>
  <template #usage>Usage slot</template>
  <template #invoices>Invoices slot</template>
  <template #methods>Payment methods slot</template>
  <template #upgrade>Upgrade slot</template>
</UiPageBilling>

API reference

Billing template: current plan, usage meters, invoices, payment methods and an upgrade card.

Props

PropType and valuesDefaultDescription
titlestring—Page heading. The built-in header renders only when title is set and the header slot is empty.
subtitlestring—Caption under the heading.
crumbs{ label: string; href?: string }[]—Breadcrumb trail above the title.

Slots

Vue: named slots. React: a prop with the same name; default is children.

headerCustom page header; replaces the built-in title/subtitle/crumbs header.
actionsButtons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
planCurrent plan; Card with Badge and Buttons.
usageUsage meters; Progress.
invoicesInvoices; DataTable.
methodsSaved cards; Card, IconTile, Badge.
upgradeUpgrade call to action; Card variant="inverse" or PricingCard.

Notes

  • Place inside AppShell; fill only the slots you need.
  • Plan, usage and invoices share the main column; methods and upgrade form the side column.