アーティクルカード

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

このトピックでは、ArticleCardプリミティブ コンポーネントの解剖学、APIリファレンス、およびバリエーションについて説明します。

解剖学

RequestResponse
import { ArticleCard } from '@sitecore-search/ui';

const MyArticleCardComponent = () => (
  <ArticleCard.Root>
    <ArticleCard.Id />
    <ArticleCard.Title />
    <ArticleCard.Subtitle />
    <ArticleCard.Image />
    <ArticleCard.Content />
  </ArticleCard.Root>
);

コンポーネントの使用

次のタブでは、ArticleCardプリミティブコンポーネントの使用について説明します。

プレーンコンポーネント

RequestResponse
() => {
  return (
    <ArticleCard.Root article={Article}>
      <ArticleCard.Title>Card Name</ArticleCard.Title>
    </ArticleCard.Root>
  );
}

解剖学

RequestResponse
import { ArticleCard } from '@sitecore-search/ui';

const MyArticleCardComponent = () => (
  <ArticleCard.Root>
    <ArticleCard.Id />
    <ArticleCard.Title />
    <ArticleCard.Subtitle />
    <ArticleCard.Image />
    <ArticleCard.Content />
  </ArticleCard.Root>
);

コンポーネントのプロパティの設定

次のセクションでは、コンポーネントで値を設定するさまざまな方法について説明します。

タイトルの設定

Article.Rootで

RequestResponse
() => {
  return (
    <ArticleCard.Root article={Article}>
      <ArticleCard.Title />
    </ArticleCard.Root>
  );
}

字幕の設定

スクリーンショット

Screenshot showing the title and subtitle of an article card.

設定画像

スクリーンショット

Screenshot showing the title and image of an article card.

設定記事。Content

RequestResponse
() => {
  return (
    <ArticleCard.Root article={Article}>
      <ArticleCard.Title>Card Name</ArticleCard.Title>
      <ArticleCard.Image src="http://www.chicos.com/Product_Images/GIFTCERTCH_000.jpg" width={150} />
      <ArticleCard.Content>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </ArticleCard.Content>
    </ArticleCard.Root>
  );
}

Article.IdでのIDの設定

RequestResponse
() => {
  return (
    <ArticleCard.Root article={Article}>
      <ArticleCard.Id />
      <ArticleCard.Title>Card Name</ArticleCard.Title>
      <ArticleCard.Image src="http://www.chicos.com/Product_Images/GIFTCERTCH_000.jpg" width={150} />
    </ArticleCard.Root>
  );
}

APIリファレンス

ArticleCard.ルート

ArticleCard.Rootコンポーネントには、記事カードのすべてのコンポーネントが含まれています。

子供:ArticleCard.Title、ArticleCard.Subtitle、ArticleCard.Id、ArticleCard.Image、およびArticleCard.Content

名前

形容

article

articleオブジェクト

ArticleCard.タイトル

ArticleCard.Titleコンポーネントは、記事のタイトルのラッパーです。childrenが指定されていない場合、コンポーネントはRootコンポーネントに存在するアーティクルのtitleの値を使用します。

親： ArticleCard.Root

名前

形容

asTitle

使用するタイトルのタイプ ( h2、h3 、divのいずれか)

ArticleCard.サブタイトル

Article.Subtitleコンポーネントは、記事のサブタイトルのラッパーです。childrenが指定されていない場合、コンポーネントはRootコンポーネントに存在する記事のsubtitleの値を使用します。

親：ArticleCard.Root

ArticleCard.Id

ArticleCard.Idコンポーネントは、記事のIDのラッパーです。childrenが指定されていない場合、コンポーネントはRoot コンポーネントに存在するarticleプロパティのIDの値を使用します。

親：ArticleCard.Root

ArticleCard.画像

AccordionFacets.Rootコンポーネントには、アコーディオンのすべてのパーツが含まれています。

親：ArticleCard.Root

ArticleCardです。Content

ArticleCard.Contentコンポーネントは、コンテンツのラッパーです。

親： ArticleCard.Root

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、