ActionCard

Card with a header that can be collapsed, refreshed or removed. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue
import { UiActionCard } from '@ziyarago/ui/vue'

Default

Upcoming departures

Next 7 days
3 groups depart from Tashkent to Jeddah this week.
Vue
<UiActionCard title="Upcoming departures" subtitle="Next 7 days">
  3 groups depart from Tashkent to Jeddah this week.
</UiActionCard>

No subtitle

Pending visas

12 applications are waiting for embassy approval.
Vue
<UiActionCard title="Pending visas">
  12 applications are waiting for embassy approval.
</UiActionCard>

Sizes

Upcoming departures

Next 7 days
3 groups depart this week.

Upcoming departures

Next 7 days
3 groups depart this week.

Upcoming departures

Next 7 days
3 groups depart this week.

Upcoming departures

Next 7 days
3 groups depart this week.

Upcoming departures

Next 7 days
3 groups depart this week.
Vue
<UiActionCard title="Upcoming departures" subtitle="Next 7 days" size="xs">
  3 groups depart this week.
</UiActionCard>

<UiActionCard title="Upcoming departures" subtitle="Next 7 days" size="sm">
  3 groups depart this week.
</UiActionCard>

<UiActionCard title="Upcoming departures" subtitle="Next 7 days" size="md">
  3 groups depart this week.
</UiActionCard>

<UiActionCard title="Upcoming departures" subtitle="Next 7 days" size="lg">
  3 groups depart this week.
</UiActionCard>

<UiActionCard title="Upcoming departures" subtitle="Next 7 days" size="xl">
  3 groups depart this week.
</UiActionCard>

API reference

Card with a title and built-in collapse, refresh and remove controls.

Props

PropType and valuesDefaultDescription
titlerequiredstring—Card title.
subtitlestring—Text under the title.
collapsedboolean—Controlled collapsed state. When omitted the card keeps it internally.
loadingboolean—Controlled refresh spinner. When omitted, Refresh shows the spinner for 1.8s by itself.
sizexssmmdlgxl'md'Card padding and font size.

Slots

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

defaultCard body. Hidden while collapsed.

Events

Vue: @name. React: onName.

collapseCalled with the new collapsed boolean when the collapse button is clicked.
refreshRefresh button clicked. Pass loading to show your own spinner.
removeRemove button clicked; the card hides itself afterwards.

Notes

  • With collapsed set, update it from the collapse event, otherwise the card will not toggle.
  • Removing hides the card until the component is remounted; also remove it from your data on the remove event.