Card

Source@dopt/vue

Overview

The card component is powered by a card block and is great for delivering announcements or giving users timely warnings and alerts.

Composables

With our Vue SDK, you can use cards headlessly by importing the useCard composable from @dopt/vue.

useCard

• useCard(id: string): Card

A Vue composable for accessing and updating a card's state and content.

<script>
  import { useCard } from '@dopt/vue';
  import RichText from '@dopt/html-rich-text';
  const {
    id,
    title,
    body,
    completeLabel,
    dismissLabel,
    active,
    completed,
    dismissed,
    complete,
    dismiss,
  } = useCard('my-flow.four-pandas-jam');
</script>

<template>
  <div>
    <div id="states">
      <div>card.active: {{ active }}</div>
      <div>card.completed: {{ completed }}</div>
      <div>card.dismissed: {{ dismissed }}</div>
    </div>
    <div id="actions">
      <button v-on:click="() => complete()">{{ completeLabel }}</button>
      <button v-on:click="() => dismiss()">{{ dismissLabel }}</button>
    </div>
    <div id="content">
      <div>card.title: {{ title }}</div>
      <div>
        card.body: <div v-html="RichText({ content: body })"></div>
      </div>
      <div>card.completeLabel: {{ completeLabel }}</div>
      <div>card.dismissLabel: {{ dismissLabel }}</div>
    </div>
  </div>
</template>

Types

Card

Card state accessors and methods for updating state along with content configured in Dopt.

interface Card {
  id: Ref<string>;

  title: Ref<string | null | undefined>;
  body: Ref<Children | null | undefined>;

  completeLabel: Ref<string | null | undefined>;
  dismissLabel: Ref<string | null | undefined>;

  active: Ref<boolean>;

  completed: Ref<boolean>;
  dismissed: Ref<boolean>;

  field: <V>(name: string) => undefined | null | V; 

  complete: () => void;
  dismiss: () => void;
}