スポンサースポンサーになる

カード Vue コンポーネント

リストビューと同様に、カードは情報を格納して整理するための優れた方法です。カードには、写真、テキスト、リンクなど、単一の主題に関する関連データが含まれています。カードは通常、より複雑で詳細な情報のエントリポイントです。

Card Vue コンポーネントは、カードコンポーネントを表します。

カードコンポーネント

以下のコンポーネントが含まれています。

カードプロパティ

プロパティ型デフォルト説明
<f7-card> プロパティ
title文字列カードヘッダーコンテンツ
content文字列カードコンテンツ
footer文字列カードフッターコンテンツ
paddingブール値trueカードコンテンツに追加の内部パディングを追加します。
outlineブール値falseカードのアウトライン（ボーダー付き）を作成します。
outlineIosブール値falseiOSテーマでカードのアウトラインを作成します。
outlineMdブール値falseMDテーマでカードのアウトラインを作成します。
raisedブール値falseカードを影付きで立体的にします。
header-dividerブール値falseカードヘッダーに区切り線（ボーダー）を追加します。
footer-dividerブール値falseカードフッターに区切り線（ボーダー）を追加します。
expandableブール値false展開可能なカードを有効にします。
expandable-animate-widthブール値falseカードコンテンツの幅もアニメーションとレスポンシブにすることができますが、パフォーマンスに影響を与える可能性があります。
expandable-openedブール値false展開可能なカードが開いているかどうかを示すブール型のプロパティです。
animateブール値true展開可能なカードをアニメーション付きで開くかどうかを指定します。
hide-navbar-on-openブール値展開可能なカードを開くとナビゲーションバーを非表示にします。デフォルトでは、同じアプリカードパラメーターを継承します。
hide-toolbar-on-openブール値展開可能なカードを開くとツールバーを非表示にします。デフォルトでは、同じアプリカードパラメーターを継承します。
swipe-to-closeブール値スワイプで展開可能なカードを閉じることができます。デフォルトでは、同じアプリカードパラメーターを継承します。
backdropブール値展開可能なカードのバックドロップレイヤーを有効にします。デフォルトでは、同じアプリカードパラメーターを継承します。
backdrop-el文字列カスタムの展開可能なカードバックドロップ要素を指定できます。これは、バックドロップ要素のCSSセレクターである必要があります（例：.card-backdrop.custom-backdrop）
close-by-backdrop-clickブール値有効にすると、バックドロップをクリックすると展開可能なカードが閉じられます。デフォルトでは、同じアプリカードパラメーターを継承します。
<f7-card-content> プロパティ
paddingブール値true追加の内部パディングを追加します。

カードイベント

イベント説明
<f7-card> イベント
card:beforeopen展開可能なカードが開きアニメーションを開始する直前にトリガーされるイベントです。event.detail.preventには、呼び出されるとカードが開くのを防ぐ関数が含まれています。
card:open展開可能なカードが開きアニメーションを開始したときにトリガーされるイベントです。
card:opened展開可能なカードが開きアニメーションを完了したときにトリガーされるイベントです。
card:close展開可能なカードが閉じアニメーションを開始したときにトリガーされるイベントです。
card:closed展開可能なカードが閉じアニメーションを完了したときにトリガーされるイベントです。

カードスロット

<f7-card>コンポーネントには、次のスロットがあります。

<f7-card>
  <span slot="header">Header</span>
  <span slot="content">Content</span>
  <span slot="footer">Footer</span>
</f7-card>

レンダリング先

<div class="card">
  <div class="card-header">
    <span>Header</span>
  </div>
  <div class="card-content">
    <span>Content</span>
  </div>
  <div class="card-footer">
    <span>Footer</span>
  </div>
</div>

カード v-model

展開可能なカードコンポーネントは、expandable-openedプロパティでv-modelをサポートしています。

<template>
  <f7-page>
    <f7-card expandable v-model:expandable-opened="isOpened">
      ...
    </f7-card>
    <p>Card is opened: {{ isOpened }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isOpened: false,
      };
    }
  };
</script>

例

cards.vue
<template>
  <f7-page>
    <f7-navbar title="Cards"></f7-navbar>

    <f7-block>
      <p>
        Cards are a great way to contain and organize your information, especially when combined
        with List Views. Cards can contain unique related data, like for example photos, text or
        links about a particular subject. Cards are typically an entry point to more complex and
        detailed information.
      </p>
    </f7-block>
    <f7-block-title>Simple Cards</f7-block-title>
    <f7-card
      content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
    ></f7-card>
    <f7-card
      title="Card header"
      content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
      footer="Card footer"
    ></f7-card>
    <f7-card
      content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
    ></f7-card>

    <f7-block-title>Outline Cards</f7-block-title>
    <f7-card
      outline
      content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
    ></f7-card>
    <f7-card
      outline
      title="Card header"
      content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
      footer="Card footer"
    ></f7-card>
    <f7-card
      outline
      content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
    ></f7-card>

    <f7-block-title>Outline With Dividers</f7-block-title>
    <f7-card
      outline
      header-divider
      footer-divider
      title="Card header"
      content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
      footer="Card footer"
    ></f7-card>

    <f7-block-title>Raised Cards</f7-block-title>
    <f7-card
      raised
      content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
    ></f7-card>
    <f7-card
      raised
      title="Card header"
      content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
      footer="Card footer"
    ></f7-card>
    <f7-card
      raised
      content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
    ></f7-card>

    <f7-block-title>Styled Cards</f7-block-title>
    <f7-card outline-md class="demo-card-header-pic">
      <f7-card-header
        valign="bottom"
        style="background-image: url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)"
        >Journey To Mountains</f7-card-header
      >
      <f7-card-content>
        <p class="date">Posted on January 21, 2015</p>
        <p>
          Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non
          felis. Phasellus quis nibh hendrerit...
        </p>
      </f7-card-content>
      <f7-card-footer>
        <f7-link>Like</f7-link>
        <f7-link>Read more</f7-link>
      </f7-card-footer>
    </f7-card>
    <f7-card class="demo-card-header-pic">
      <f7-card-header
        valign="bottom"
        style="background-image: url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)"
        >Journey To Mountains</f7-card-header
      >
      <f7-card-content>
        <p class="date">Posted on January 21, 2015</p>
        <p>
          Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non
          felis. Phasellus quis nibh hendrerit...
        </p>
      </f7-card-content>
      <f7-card-footer>
        <f7-link>Like</f7-link>
        <f7-link>Read more</f7-link>
      </f7-card-footer>
    </f7-card>

    <f7-block-title>Cards With List View</f7-block-title>
    <f7-card>
      <f7-card-content :padding="false">
        <f7-list>
          <f7-list-item link="#">Link 1</f7-list-item>
          <f7-list-item link="#">Link 2</f7-list-item>
          <f7-list-item link="#">Link 3</f7-list-item>
          <f7-list-item link="#">Link 4</f7-list-item>
          <f7-list-item link="#">Link 5</f7-list-item>
        </f7-list>
      </f7-card-content>
    </f7-card>
    <f7-card title="New Releases:">
      <f7-card-content :padding="false">
        <f7-list medial-list>
          <f7-list-item title="Yellow Submarine" subtitle="Beatles">
            <template #media>
              <img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44" />
            </template>
          </f7-list-item>
          <f7-list-item title="Don't Stop Me Now" subtitle="Queen">
            <template #media>
              <img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44" />
            </template>
          </f7-list-item>
          <f7-list-item title="Billie Jean" subtitle="Michael Jackson">
            <template #media>
              <img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
            </template>
          </f7-list-item>
        </f7-list>
      </f7-card-content>
      <f7-card-footer>
        <span>January 20, 2015</span>
        <span>5 comments</span>
      </f7-card-footer>
    </f7-card>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Block,
  f7BlockTitle,
  f7Card,
  f7CardHeader,
  f7CardContent,
  f7CardFooter,
  f7List,
  f7ListItem,
  f7Link,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Block,
    f7BlockTitle,
    f7Card,
    f7CardHeader,
    f7CardContent,
    f7CardFooter,
    f7List,
    f7ListItem,
    f7Link,
  },
};
</script>
このドキュメントを改善する
このページについて