LinkCard
View on GitHub: Copmonent
View on GitHub表現力豊かで、遷移先の内容の一部を提示可能なリンク
Example#
Props#
| Name | Type | Default | Description |
|---|---|---|---|
| href optional | string | - | 遷移先URL |
| size | "medium" | "small" | medium | サイズ |
| title required | string | - | 見出しのテキスト |
| description optional | string | - | 説明のテキスト |
| className optional | string | - | CSSのクラス * @deprecated マージンなどをつけたい場合は<Box>や<Stack>を使ってください |
| render optional | ReactElement<any, string | JSXElementConstructor<any>> | - | レンダリングされる要素を変更。フレームワークのリンクコンポーネントなどを指定 |
| icon optional | ReactElement<any, string | JSXElementConstructor<any>> | ComponentType | - | アイコン |
| data-* optional | string | - | Custom data attributes |
Feature#
- タイトル以外にも、アイコンや説明などの情報/表現を含んだリンクを提供します
- リンク先の情報を事前に提示できるため、ユーザーが内容を把握しやすくなります
- 複数のリンクカードが列挙されていた場合に、それぞれを差別化しやすい特徴があります
- エリアを大きくとるため、タップがしやすいメリットがあります
- コンポーネントの全体がリンクとして扱われます
- いわゆる「カード」の形をしています
Usage#
descriptionやiconpropには、遷移先のページと関連する情報を提示します- 無関係の内容を記載すると、遷移後にユーザーが混乱する可能性があります
description（遷移先に関わるコンテンツ）は必須です。もしdescriptionが必要ないのであれば、別のタップエリアが確保されたリストなどが適しているかも知れません- 広すぎるエリアへ
<LinkCard>を配置してはいけません。長文のdescriptionの場合は読みづらくなります
Accessibility#
Keyboard Interaction#
- Tab キーでフォーカスすることができます
- ネィティブの
<a>と同様の操作が可能です- フォーカスを受け取り、Enterキーで押下できます
- Spaceキーでは操作できません