PageInbox Pro

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

Inbox page. Slots: filters, list, thread, composer, customer.

Jump to API reference

Import

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

Default

Inbox

Section

Filters slot
Conversations slot
Thread slot
Composer slot
Customer slot
Vue
<UiPageInbox title="Inbox" subtitle="Section">
  <template #filters>Filters slot</template>
  <template #list>Conversations slot</template>
  <template #thread>Thread slot</template>
  <template #composer>Composer slot</template>
  <template #customer>Customer slot</template>
</UiPageInbox>

API reference

Inbox template: filters and conversation list, the open thread with a composer, and a customer panel.

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).
filtersSearch and folder chips above the list; SearchInput, FilterChips.
listConversation rows with unread marks; Card, Avatar, Badge.
threadMessages of the open conversation; Card, Avatar.
composerReply field and send button; Textarea, Button.
customerCustomer details; ContactPanel, Descriptions, Tag.

Notes

  • Place inside AppShell; fill only the slots you need.
  • List, thread and customer panel sit side by side and stack in that order at 860px and below. Keep the selected conversation in your own state.