sgds-patterns

SGDS パターン

このスキルでは、SGDS で利用できる再利用可能な UI パターンをすべて紹介します。パターンは、一般的な UI のニーズに対応するために SGDS のコンポーネントとユーティリティを組み合わせた、本番環境ですぐに使えるテンプレートです。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• タイポグラフィパターン（ページ見出し、コンテンツ見出し、リスト、サイズや太さを指定した段落）を実装する
• フォームパターン（複数フィールドのフォーム、バリデーションパターン、入力のグループ化）を構築する
• ページレイアウト（ログインページ、空の状態、データテーブル、検索インターフェース）を作成する
• SGDS を使用して通知、レビュー、データビジュアライゼーションを表示する
• UI パターンに適した HTML マークアップと SGDS ユーティリティクラスを確認する

前提条件

パターンを実装する前に、次の内容を確認してください。

1. sgds-getting-started：アプリケーションの初期設定（Inter フォント、基盤 CSS のインポート、コンポーネントの登録）
2. sgds-utilities：SGDS ユーティリティクラス（スペーシング、タイポグラフィ、色、グリッドなど）の理解
3. sgds-components：パターン内で使用される SGDS Web コンポーネントの知識

パターンの実装方法を尋ねる前に、これらのスキルを参照してください。

現在のパターン：タイポグラフィ

タイポグラフィパターンは、テキストコンテンツ向けのセマンティックで再利用可能なレイアウトを定義します。すべてのパターンは一貫したスタイル設定のために SGDS ユーティリティを使用し、デザイントークンの階層に準拠しています。

以下のカテゴリリンクから、目的のパターンを探してください。

• 見出し - オプションのオーバーラインを含むページ見出しとセクション見出し（6 パターン）
• ディスプレイ - 大きく目立つディスプレイタイポグラフィ（12 パターン）
• コンテンツ - カードタイトルとサブセクション見出し（6 パターン）
• リスト - 3 種類のサイズの番号付きリストと箇条書きリスト（6 パターン）
• 段落 - 長文コンテンツ向けの本文スタイル（3 パターン）

パターンの使用方法

1. 上記のカテゴリリンクまたは個別のパターンリファレンスファイルから、必要なパターンを探します
2. リファレンスファイル内の GitHub URL から生の HTML テンプレートを取得します
3. テンプレートを抽出します（const XxxTemplate = () => html\....`` の部分）。これが実装するマークアップです
4. コンテンツに合わせて調整します。プレースホルダーテキストを置き換え、ユースケースに応じて SGDS ユーティリティクラスを調整します
5. パターンにインタラクティブな要素（ボタン、フォーム、ドロップダウンなど）が含まれる場合は、sgds-components と組み合わせます

パターンの命名規則

パターンファイルは次の命名規則に従います。

stories/patterns/[Category]/[Subcategory]/[PatternName]-[variant].stories.js

例：

• Typography/Heading/h1.stories.js → H1 パターン（デフォルトの太さ）
• Typography/Heading/h1-light.stories.js → H1 パターン（ライトの太さ）
• Typography/Display/display-lg-center.stories.js → 大きなディスプレイ、中央揃え
• Typography/List/ul-body-md.stories.js → 箇条書きリスト、本文の中サイズ

バリアントの表記：

• 太さ：ライトのフォントウェイトバリアントには -light のサフィックスを使用
• 配置：中央揃えのバリアントには -center のサフィックスを使用
• サイズ：名前に含まれます（例：display-sm、body-md）

---

組み込み例

タイポグラフィパターンの使用例を簡単に紹介します。

<link rel="stylesheet" href="@govtechsg/sgds-web-component/lib/index.css" />
<script type="module" src="@govtechsg/sgds-web-component/lib/index.js"></script>


<div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left" style="max-width: var(--sgds-text-max-width);">
  <div class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs">
    Overline Label
  </div>
  <h1 class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">
    Page Heading Goes Here
  </h1>
  <p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle">
    Supporting body text that provides context and detail for the page or section above.
  </p>
</div>

テンプレートをコピーしてコンテンツを差し替えれば、すぐにパターンを使用できます。

---

パターンファイルへのアクセス

すべてのパターンはリポジトリ内の stories/patterns/ に保存されており、GitHub から利用できます。上記のタイポグラフィカテゴリリンクから、各パターンの正確な URL を確認してください。

https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/patterns/Typography/[Subcategory]/[PatternName].stories.js

各カテゴリのリファレンスファイルには、そのカテゴリ内のすべてのパターンへの直接リンクを含む表があります。