UI コンポーネント
ページで使う基本的なUI部品をまとめたページです。ボタン・アラート・アコーディオン・タブ・モーダルなどを扱います。
コンポーネント一覧は Gallery インデックス をご覧ください。
Basic UI
ページで最もよく使う基本パーツです。
ボタン（button）はクリック操作を受け付け、
アラート（alert）は注意・お知らせを目立たせ、
バッジ（badge）はカテゴリやタグを小さく表示します。
Primary
Secondary
Icon Button
Link Button
Block Button (全幅)
Loading State（非同期処理）
loading 属性を付けるとスピナーが表示され、ボタンが押せなくなります。API通信中などにJSで制御します。
クリックで疑似通信（2秒）
常にローディング
<hl-button>Primary</hl-button>
<hl-button variant="secondary">Secondary</hl-button>
<hl-button icon="">Icon Button</hl-button>
<hl-button href="https://5gkyu.github.io/" target="_blank">Link Button</hl-button>
<hl-button block>Block Button (全幅)</hl-button>
<hl-button loading>通信中</hl-button>
Info: 基本的な補足情報やヒントはこちらを使います。（デフォルト）
Warning: 注意やエラー表示はこちらを使います。
Success: 完了・成功のフィードバックはこちらを使います。
<!-- type 属性でアイコン・カラーが変わる -->
<hl-alert>情報・ヒント（info：デフォルト）</hl-alert>
<hl-alert type="warning">注意・警告</hl-alert>
<hl-alert type="success">完了・成功</hl-alert>
<div class="hl-tags-wrapper">
<a href="#" class="hl-badge">Webツール</a>
<a href="#" class="hl-badge">デザイン</a>
<a href="#" class="hl-badge">ゲーム</a>
</div>
インラインテキストのリンクスタイルです。color: var(--clr-dusty-blue) で表示され、ホバー時に var(--clr-peach) へ変化します。
通常のリンク・
太字リンク・
テキストの中のインラインリンクとして使います。
<!-- クラスを付けるだけ -->
<a href="/about/" class="hl-link">アバウトページ</a>
<!-- 文中に埋め込む例 -->
<p class="hl-content-text">
詳しくは<a href="#" class="hl-link">こちら</a>をご覧ください。
</p>
Interactive
クリックすることでページが変化するUI部品です。
アコーディオンは長いコンテンツを折りたたんでスッキリ見せ、
タブは複数の内容を切り替えて表示するときに使います。
クリックで開閉するコンテンツです。FAQ・コード表示などに使います。
複数並べても独立して開閉できます。
<hl-accordion title="アコーディオンその1">
クリックで開閉するコンテンツです。FAQ・コード表示などに使います。
</hl-accordion>
<hl-accordion title="アコーディオンその2">
複数並べても独立して開閉できます。
</hl-accordion>
このコンポーネント自体が hl-tabs のデモです。
子要素の .hl-tab-panel に data-label を指定するとタブが自動生成されます。
<hl-tabs>
<div class="hl-tab-panel" data-label="タブA">
内容A
</div>
<div class="hl-tab-panel" data-label="タブB">
内容B
</div>
</hl-tabs>
Overlays
ページの上に重ねて表示するUIパーツです。
トーストは短時間表示されるポップアップ通知、
モーダルは確認ダイアログや詳細情報の表示に使います。
画面右下から現れる一時的な通知です。JSの HlToast.show() で呼び出します。
成功を通知
警告を通知
<hl-button onclick="HlToast.show('保存しました')">成功を通知</hl-button>
<hl-button variant="secondary" onclick="HlToast.show('エラーです', 'warning')">警告を通知</hl-button>
/* JS API */
HlToast.show('保存しました');
HlToast.show('エラーです', 'warning');
画面中央に浮かび上がるダイアログです。
モーダルを開く
<hl-button onclick="document.getElementById('demo-modal').open()">
モーダルを開く
</hl-button>
<hl-modal id="demo-modal" title="Halcyon Modal">
<p>これはモーダルダイアログのデモです。オーバーレイクリックまたはボタンで閉じます。</p>
<div style="margin-top: 2rem; text-align: right;">
<hl-button onclick="document.getElementById('demo-modal').close()">閉じる</hl-button>
</div>
</hl-modal>
これはモーダルダイアログのデモです。オーバーレイクリックまたはボタンで閉じます。
閉じる
Interaction
ホバー・クリックに応じた細かなUI挙動を実現するパーツです。
ツールチップはホバー時にヒント文を表示、
ポップオーバーはクリック時に小さなパネルを表示、
ドロワーは画面側面からスライドインするサイドパネルです。
ホバー（またはフォーカス）でヒントを表示します。
公式サイトへ
必須
フォント情報
<!-- 子要素がトリガー、tip属性がツールチップのテキスト -->
<hl-tooltip tip="5Gkyuの公式サイトを開きます">
<hl-button>公式サイトへ</hl-button>
</hl-tooltip>
<hl-tooltip tip="必須項目です">
<span class="hl-label__required">必須</span>
</hl-tooltip>
ボタンクリックで吹き出しパネルを表示します。外側クリックで閉じます。
アクション
<!-- label属性がトリガーボタンのラベル、子要素がパネル内容 -->
<hl-popover label="オプション">
<p style="font-weight: 700; margin: 0 0 0.5rem; font-size: 0.85rem;">アクション</p>
<ul style="margin: 0; padding: 0; list-style: none;">
<li><a href="#" class="hl-link">編集する</a></li>
<li><a href="#" class="hl-link">複製する</a></li>
</ul>
</hl-popover>
右側からスライドインするサイドパネルです。open() / close() で制御します。ESCキーでも閉じられます。
ドロワーを開く
<hl-button onclick="document.getElementById('demo-drawer').open()">
ドロワーを開く
</hl-button>
<hl-drawer id="demo-drawer" title="設定">
<p>ドロワーの内容</p>
<hl-toggle name="setting1" label="通知をオンにする" checked></hl-toggle>
</hl-drawer>
ドロワーのデモです。各種設定をここに並べられます。
保存して閉じる
Utility
その他の場所で必要な小さな要素です。
ディバイダーは置くだけで区切り線、
アバターはユーザーアイコン・画像の丸サムネイル、
チップはタグ・ラベル的な小さな要素です。
デフォルト（ラベルなし）
ラベル付き
OR
破線（dashed）
Section
太線（bold）
<hl-divider></hl-divider>
<hl-divider>OR</hl-divider>
<hl-divider variant="dashed">Section</hl-divider>
<hl-divider variant="bold"></hl-divider>
<!-- variant: dashed | bold -->
サイズバリエーション
画像（直接パス指定） / スクエア / グループ
src 属性に画像URL・パスを直接指定できます。画像は中央切り抜き（object-fit: cover）で表示されます。
<!-- テキストアバター -->
<hl-avatar label="5G" size="md"></hl-avatar>
<!-- 画像アバター（src属性に直接パス指定・中央切り抜き）-->
<hl-avatar src="/images/chara.png" label="名前" size="lg"></hl-avatar>
<hl-avatar src="https://example.com/avatar.png" label="名前" size="md"></hl-avatar>
<!-- スクエア -->
<hl-avatar src="/images/chara.png" label="名前" size="xl" square></hl-avatar>
<!-- グループ（親に .hl-avatar-group を付ける） -->
<div class="hl-avatar-group">
<hl-avatar label="A" size="md"></hl-avatar>
<hl-avatar label="B" size="md"></hl-avatar>
</div>
<!-- size: sm | md | lg | xl -->
カラーバリエーション
デフォルト
ピーチ
ブルー
削除可能（removable）—クリックで消えます
Vue
React
Svelte
Vanilla JS
<div class="hl-chip-list">
<hl-chip>デフォルト</hl-chip>
<hl-chip color="peach">ピーチ</hl-chip>
<hl-chip color="blue">ブルー</hl-chip>
</div>
<!-- removable: ボタンで削除、hl-chip-remove イベント発火 -->
<hl-chip value="Vue" removable>Vue</hl-chip>
<!-- color: (none) | peach | blue -->
スクロールして画面に入った瞬間にふわっと読み込まれる「遅延読み込み（Blur-Up）」画像コンポーネントです。
親要素の枠（サイズや角丸）に合わせて綺麗に収まります。ページ初期表示の高速化に貢献します。
<!-- 外側にサイズと角丸を決める枠（div等）を作ります -->
<div style="width: 100%; aspect-ratio: 16/9; border-radius: 16px;">
<!-- src: 本画像 / placeholder: 軽量なぼかし画像(省略時は透明) -->
<hl-image
src="high-res.jpg"
placeholder="low-res.jpg"
alt="風景">
</hl-image>
</div>
Mobile
モバイルに最適化されたコンポーネントです。
hl-app-sheetはサイドバーなどのコンテンツをモバイルでボトムシートとして表示するコンポーネントです。
モバイル画面幅（≦860px）でのみ動作するライブデモです。
このページのサイドバーコンテンツに実際にhl-app-sheetを適用済みです。
画面幅を級めるか、スマホで開くとヘッダー左に︎ボタンが現れます。
コンテンツを<hl-app-sheet>で包むだけで、モバイルで自動ボトムシート化されます。
PC(≧861px)ではdisplay: contentsの透明なラッパーになり、ベインのレイアウトに影響しません。
サイドバーやフィルターパネルなど、モバイルでボトムシートにしたいコンテンツをhl-app-sheetで包みます。
画面幅が860px以下になると、ヘッダー左に︎ボタンが表れます。タップするとコンテンツが画面下部からスライドインします。
ESCキーまたはシート外のオーバーレイエリアをタップするとボトムシートが閉じます。
<!-- aside のサイドバーコンテンツを hl-app-sheet で包む例 -->
<aside class="hl-layout-sidebar">
<hl-app-sheet label="サイドバー">
<div class="sidebar-sticky">
<hl-profile></hl-profile>
<hl-toc></hl-toc>
</div>
</hl-app-sheet>
</aside>
<!-- PC(≧861px): display:contents で透明なラッパーになり、レイアウトに影響なし -->
<!-- Mobile(≦860px): ヘッダーに︎ボタンが生成され、タップでボトムシートとして開く -->
<!-- label 属性: ︎ボタンの aria-label（省略可） -->