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

カード React コンポーネント

カードは、リストビューと並んで、情報を整理して表示する優れた方法です。カードには、写真、テキスト、リンクなど、単一の主題に関する独自の関連データが含まれています。カードは通常、より複雑で詳細な情報への入り口となります。

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

カードコンポーネント

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

カードのプロパティ

プロパティタイプデフォルト説明
<Card> プロパティ
titlestringカードヘッダーコンテンツ
contentstringカードコンテンツ
footerstringカードフッターコンテンツ
paddingbooleantrueカードコンテンツに内側のパディングを追加します
outlinebooleanfalseカードをアウトラインにします - 枠線付き
outlineIosbooleanfalseiOSテーマでカードをアウトラインにします
outlineMdbooleanfalseMDテーマでカードをアウトラインにします
raisedbooleanfalseカードを隆起させます - 影付き
headerDividerbooleanfalseカードヘッダーに区切り線（枠線）を追加します
footerDividerbooleanfalseカードフッターに区切り線（枠線）を追加します
expandablebooleanfalse展開可能なカードを有効にします
expandableAnimateWidthbooleanfalseカードコンテンツの幅もアニメーション化してレスポンシブにします。ただし、パフォーマンスに影響を与える可能性があります
expandableOpenedbooleanfalse展開可能なカードが開いているかどうかを示すブール値プロパティ
animatebooleantrue展開可能なカードをアニメーション付きで開くかどうかを指定します
hideNavbarOnOpenboolean展開可能なカードを開いたときにナビゲーションバーを非表示にします。デフォルトでは、同じアプリカードパラメータを継承します。
hideToolbarOnOpenboolean展開可能なカードを開いたときにツールバーを非表示にします。デフォルトでは、同じアプリカードパラメータを継承します。
swipeToClosebooleanスワイプで展開可能なカードを閉じることができます。デフォルトでは、同じアプリカードパラメータを継承します。
backdropboolean展開可能なカードの背景レイヤーを有効にします。デフォルトでは、同じアプリカードパラメータを継承します。
backdropElstringカスタムの展開可能なカードの背景要素を指定できます。これは、背景要素のCSSセレクターである必要があります。例： .card-backdrop.custom-backdrop
closeByBackdropClickboolean有効にすると、展開可能なカードは背景をクリックすると閉じます。デフォルトでは、同じアプリカードパラメータを継承します。
<CardContent> プロパティ
paddingbooleantrue内側のパディングを追加します

カードイベント

イベント説明
<Card> イベント
cardBeforeOpen展開可能なカードが開くアニメーションを開始する直前にイベントがトリガーされます。 event.detail.prevent には、呼び出されるとカードが開くのを防ぐ関数が含まれています
cardOpen展開可能なカードが開くアニメーションを開始するときにイベントがトリガーされます
cardOpened展開可能なカードが開くアニメーションを完了した後にイベントがトリガーされます
cardClose展開可能なカードが閉じるアニメーションを開始するときにイベントがトリガーされます
cardClosed展開可能なカードが閉じるアニメーションを完了した後にイベントがトリガーされます

カードスロット

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

<Card>
  <span slot="header">Header</span>
  <span slot="content">Content</span>
  <span slot="footer">Footer</span>
</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>

例

cards.jsx
import React from 'react';
import {
  Navbar,
  Page,
  Block,
  BlockTitle,
  Card,
  CardHeader,
  CardContent,
  CardFooter,
  List,
  ListItem,
  Link,
} from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="Cards" />

    <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>
    </Block>
    <BlockTitle>Simple Cards</BlockTitle>
    <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." />
    <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"
    />
    <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. " />

    <BlockTitle>Outline Cards</BlockTitle>
    <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."
    />
    <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"
    />
    <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. "
    />

    <BlockTitle>Outline With Dividers</BlockTitle>
    <Card
      outline
      headerDivider
      footerDivider
      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"
    />

    <BlockTitle>Raised Cards</BlockTitle>
    <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."
    />
    <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"
    />
    <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. "
    />

    <BlockTitle>Styled Cards</BlockTitle>
    <Card outlineMd className="demo-card-header-pic">
      <CardHeader
        valign="bottom"
        style={{
          backgroundImage: 'url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)',
        }}
      >
        Journey To Mountains
      </CardHeader>
      <CardContent>
        <p className="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>
      </CardContent>
      <CardFooter>
        <Link>Like</Link>
        <Link>Read more</Link>
      </CardFooter>
    </Card>
    <Card className="demo-card-header-pic">
      <CardHeader
        valign="bottom"
        style={{
          backgroundImage: 'url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)',
        }}
      >
        Journey To Mountains
      </CardHeader>
      <CardContent>
        <p className="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>
      </CardContent>
      <CardFooter>
        <Link>Like</Link>
        <Link>Read more</Link>
      </CardFooter>
    </Card>

    <BlockTitle>Cards With List View</BlockTitle>
    <Card>
      <CardContent padding={false}>
        <List>
          <ListItem link="#">Link 1</ListItem>
          <ListItem link="#">Link 2</ListItem>
          <ListItem link="#">Link 3</ListItem>
          <ListItem link="#">Link 4</ListItem>
          <ListItem link="#">Link 5</ListItem>
        </List>
      </CardContent>
    </Card>
    <Card title="New Releases:">
      <CardContent padding={false}>
        <List mediaList>
          <ListItem title="Yellow Submarine" subtitle="Beatles">
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg"
              width="44"
            />
          </ListItem>
          <ListItem title="Don't Stop Me Now" subtitle="Queen">
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg"
              width="44"
            />
          </ListItem>
          <ListItem title="Billie Jean" subtitle="Michael Jackson">
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg"
              width="44"
            />
          </ListItem>
        </List>
      </CardContent>
      <CardFooter>
        <span>January 20, 2015</span>
        <span>5 comments</span>
      </CardFooter>
    </Card>
  </Page>
);
cards-expandable.jsx
import React from 'react';
import { Navbar, Page, Block, Card, CardHeader, CardContent, Link, Button } from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="Cards Expandable" />

    <Block>
      <p>
        In addition to usual <a href="/cards/">Cards</a> there are also Expandable Cards that allow
        to store more information and illustrations about particular subject.
      </p>
    </Block>

    <div className="demo-expandable-cards">
      <Card expandable>
        <CardContent padding={false}>
          <div className="bg-color-red" style={{ height: '300px' }}>
            <CardHeader textColor="white" className="display-block">
              Framework7
              <br />
              <small style={{ opacity: 0.7 }}>Build Mobile Apps</small>
            </CardHeader>
            <Link
              cardClose
              color="white"
              className="card-opened-fade-in"
              style={{ position: 'absolute', right: '15px', top: '15px' }}
              iconF7="xmark_circle_fill"
            />
          </div>
          <div className="card-content-padding">
            <p>
              Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile
              apps or web apps with iOS or Android (Material) native look and feel. It is also an
              indispensable prototyping apps tool to show working app prototype as soon as possible
              in case you need to. Framework7 is created by Vladimir Kharlampidi.
            </p>
            <p>
              The main approach of the Framework7 is to give you an opportunity to create iOS and
              Android (Material) apps with HTML, CSS and JavaScript easily and clear. Framework7 is
              full of freedom. It doesn't limit your imagination or offer ways of any solutions
              somehow. Framework7 gives you freedom!
            </p>
            <p>
              Framework7 is not compatible with all platforms. It is focused only on iOS and Android
              (Material) to bring the best experience and simplicity.
            </p>
            <p>
              Framework7 is definitely for you if you decide to build iOS and Android hybrid app
              (Cordova or Capacitor) or web app that looks like and feels as great native iOS or
              Android (Material) apps.
            </p>
            <p>
              <Button fill round large cardClose color="red">
                Close
              </Button>
            </p>
          </div>
        </CardContent>
      </Card>

      <Card expandable>
        <CardContent padding={false}>
          <div className="bg-color-yellow" style={{ height: '300px' }}>
            <CardHeader textColor="black" className="display-block">
              Framework7
              <br />
              <small style={{ opacity: 0.7 }}>Build Mobile Apps</small>
            </CardHeader>
            <Link
              cardClose
              color="black"
              className="card-opened-fade-in"
              style={{ position: 'absolute', right: '15px', top: '15px' }}
              iconF7="xmark_circle_fill"
            />
          </div>
          <div className="card-content-padding">
            <p>
              Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile
              apps or web apps with iOS or Android (Material) native look and feel. It is also an
              indispensable prototyping apps tool to show working app prototype as soon as possible
              in case you need to. Framework7 is created by Vladimir Kharlampidi.
            </p>
            <p>
              The main approach of the Framework7 is to give you an opportunity to create iOS and
              Android (Material) apps with HTML, CSS and JavaScript easily and clear. Framework7 is
              full of freedom. It doesn't limit your imagination or offer ways of any solutions
              somehow. Framework7 gives you freedom!
            </p>
            <p>
              Framework7 is not compatible with all platforms. It is focused only on iOS and Android
              (Material) to bring the best experience and simplicity.
            </p>
            <p>
              Framework7 is definitely for you if you decide to build iOS and Android hybrid app
              (Cordova or Capacitor) or web app that looks like and feels as great native iOS or
              Android (Material) apps.
            </p>
            <p>
              <Button fill round large cardClose color="yellow" textColor="black">
                Close
              </Button>
            </p>
          </div>
        </CardContent>
      </Card>

      <Card expandable>
        <CardContent padding={false}>
          <div
            style={{
              background: 'url(./img/beach.jpg) no-repeat center bottom',
              backgroundSize: 'cover',
              height: '240px',
            }}
          />
          <Link
            cardClose
            color="white"
            className="card-opened-fade-in"
            style={{ position: 'absolute', right: '15px', top: '15px' }}
            iconF7="xmark_circle_fill"
          />
          <CardHeader style={{ height: '60px' }}>Beach, Goa</CardHeader>
          <div className="card-content-padding">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus rhoncus cursus.
              Etiam lorem est, consectetur vitae tempor a, volutpat eget purus. Duis urna lectus,
              vehicula at quam id, sodales dapibus turpis. Suspendisse potenti. Proin condimentum
              luctus nulla, et rhoncus ante rutrum eu. Maecenas ut tincidunt diam. Vestibulum
              lacinia dui ligula, sit amet pulvinar nisl blandit luctus. Vestibulum aliquam ligula
              nulla, tincidunt rhoncus tellus interdum at. Phasellus mollis ipsum at mollis
              tristique. Maecenas sit amet tempus justo. Duis dolor elit, mollis quis viverra quis,
              vehicula eu ante. Integer a molestie risus. Vestibulum eu sollicitudin massa, sit amet
              dictum sem. Aliquam nisi tellus, maximus eget placerat in, porta vel lorem. Aenean
              tempus sodales nisl in cursus. Curabitur tincidunt turpis in nisl ornare euismod eget
              at libero.
            </p>
            <p>
              Suspendisse ligula eros, congue in nulla pellentesque, imperdiet blandit sapien. Morbi
              nisi sem, efficitur a rutrum porttitor, feugiat vel enim. Fusce eget vehicula odio, et
              luctus neque. Donec mattis a nulla laoreet commodo. Integer eget hendrerit augue, vel
              porta libero. Morbi imperdiet, eros at ultricies rutrum, eros urna auctor enim, eget
              laoreet massa diam vitae lorem. Proin eget urna ultrices, semper ligula aliquam,
              dignissim eros. Donec vitae augue eu sapien tristique elementum a nec nulla. Aliquam
              erat volutpat. Curabitur condimentum, metus blandit lobortis fringilla, enim mauris
              venenatis neque, et venenatis lorem urna ut justo. Maecenas neque enim, congue ac
              tempor quis, tincidunt ut mi. Donec venenatis ante non consequat molestie. Quisque ut
              rhoncus ligula. Vestibulum sodales maximus justo sit amet ornare. Nullam pulvinar
              eleifend nisi sit amet molestie.
            </p>
            <p>
              <Button fill round large cardClose>
                Close
              </Button>
            </p>
          </div>
        </CardContent>
      </Card>

      <Card expandable>
        <CardContent padding={false}>
          <div
            style={{
              background: 'url(./img/monkey.jpg) no-repeat center top',
              backgroundSize: 'cover',
              height: '400px',
            }}
          >
            <CardHeader textColor="white">Monkeys</CardHeader>
            <Link
              cardClose
              color="white"
              className="card-opened-fade-in"
              style={{ position: 'absolute', right: '15px', top: '15px' }}
              iconF7="xmark_circle_fill"
            />
          </div>
          <div className="card-content-padding">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus rhoncus cursus.
              Etiam lorem est, consectetur vitae tempor a, volutpat eget purus. Duis urna lectus,
              vehicula at quam id, sodales dapibus turpis. Suspendisse potenti. Proin condimentum
              luctus nulla, et rhoncus ante rutrum eu. Maecenas ut tincidunt diam. Vestibulum
              lacinia dui ligula, sit amet pulvinar nisl blandit luctus. Vestibulum aliquam ligula
              nulla, tincidunt rhoncus tellus interdum at. Phasellus mollis ipsum at mollis
              tristique. Maecenas sit amet tempus justo. Duis dolor elit, mollis quis viverra quis,
              vehicula eu ante. Integer a molestie risus. Vestibulum eu sollicitudin massa, sit amet
              dictum sem. Aliquam nisi tellus, maximus eget placerat in, porta vel lorem. Aenean
              tempus sodales nisl in cursus. Curabitur tincidunt turpis in nisl ornare euismod eget
              at libero.
            </p>
            <p>
              Suspendisse ligula eros, congue in nulla pellentesque, imperdiet blandit sapien. Morbi
              nisi sem, efficitur a rutrum porttitor, feugiat vel enim. Fusce eget vehicula odio, et
              luctus neque. Donec mattis a nulla laoreet commodo. Integer eget hendrerit augue, vel
              porta libero. Morbi imperdiet, eros at ultricies rutrum, eros urna auctor enim, eget
              laoreet massa diam vitae lorem. Proin eget urna ultrices, semper ligula aliquam,
              dignissim eros. Donec vitae augue eu sapien tristique elementum a nec nulla. Aliquam
              erat volutpat. Curabitur condimentum, metus blandit lobortis fringilla, enim mauris
              venenatis neque, et venenatis lorem urna ut justo. Maecenas neque enim, congue ac
              tempor quis, tincidunt ut mi. Donec venenatis ante non consequat molestie. Quisque ut
              rhoncus ligula. Vestibulum sodales maximus justo sit amet ornare. Nullam pulvinar
              eleifend nisi sit amet molestie.
            </p>
            <p>
              <Button fill round large cardClose>
                Close
              </Button>
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  </Page>
);
このドキュメントを改善する
このページの内容