Skip to content

Latest commit

 

History

History
173 lines (124 loc) · 4.57 KB

card-grids.mdx

File metadata and controls

173 lines (124 loc) · 4.57 KB
title description sidebar
カードグリッド
Starlightで複数のカードをグリッドにラップする方法を学びます。
order
4

import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';

複数の<Card>または<LinkCard>コンポーネントをグリッドにラップするには、<CardGrid>コンポーネントを使用します。

import Preview from '~/components/component-preview.astro';

シリウス、ベガ、ベテルギウス イオ、エウロパ、ガニメデ

インポート

import { CardGrid } from '@astrojs/starlight/components';

使用方法

カードをグループ化する

<CardGrid>コンポーネントを使用してグループ化することで、十分なスペースがある場合に複数の<Card>コンポーネントを並べて表示します。

import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
	<Card title="これをチェック" icon="open-book">
		強調したい興味深いコンテンツ。
	</Card>
	<Card title="その他の機能" icon="information">
		共有したいその他の情報。
	</Card>
</CardGrid>
{% cardgrid %}
{% card title="これをチェック" icon="open-book" %}
強調したい興味深いコンテンツ。
{% /card %}

{% card title="その他の機能" icon="information" %}
共有したいその他の情報。
{% /card %}
{% /cardgrid %}
強調したい興味深いコンテンツ。 共有したいその他の情報。

リンクカードをグループ化する

<CardGrid>コンポーネントを使用してグループ化することで、十分なスペースがある場合に複数の<LinkCard>コンポーネントを並べて表示します。

import { LinkCard, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
	<LinkCard title="Markdownの作成" href="/ja/guides/authoring-content/" />
	<LinkCard title="コンポーネント" href="/ja/components/using-components/" />
</CardGrid>
{% cardgrid %}
{% linkcard title="Markdownの作成" href="/ja/guides/authoring-content/" /%}

{% linkcard title="コンポーネント" href="/ja/components/using-components/" /%}
{% /cardgrid %}

カードをずらす

視覚的な興味を加えるために、<CardGrid>コンポーネントにstagger属性を追加してグリッドの2列目を垂直方向にずらします。

この属性は、プロジェクトの主要な機能を表示するホームページで便利です。

import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid stagger>
	<Card title="これをチェック" icon="open-book">
		強調したい興味深いコンテンツ。
	</Card>
	<Card title="その他の機能" icon="information">
		共有したいその他の情報。
	</Card>
</CardGrid>
{% cardgrid stagger=true %}
{% card title="これをチェック" icon="open-book" %}
強調したい興味深いコンテンツ。
{% /card %}

{% card title="その他の機能" icon="information" %}
共有したいその他の情報。
{% /card %}
{% /cardgrid %}
強調したい興味深いコンテンツ。 共有したいその他の情報。

<CardGrid> プロパティ

実装: CardGrid.astro

<CardGrid>コンポーネントは以下のプロパティを受け入れます：

stagger

型: boolean

グリッド内のカードをずらすかどうかを定義します。