一覧とデータ / 走査しやすい一覧
Listing
短い項目と長い項目を同じリズムで並べ、目的の一件を見つけやすくします。
基本的な使い方
HTML
<ul class="rows">
<li class="row">
<a class="row-main" href="../code/">
<span class="chip tone-blue">SELECT</span>
<span class="row-body">SELECT id, title FROM posts WHERE status = 'published'</span>
</a>
<p class="row-meta">src/PostRepository.php:42 <span>2列</span></p>
</li>
<li class="row">
<a class="row-main" href="../code/">
<span class="chip tone-violet">INSERT</span>
<span class="row-body">INSERT INTO events (name) VALUES (:name)</span>
</a>
<p class="row-meta">src/EventRepository.php:18 <span>1パラメータ</span></p>
</li>
</ul>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.rows / .row | 一覧と各項目。 |
.row-main / .row-body / .row-meta | リンク、最大3行のプレビュー、出典の情報。 |
.peek / .peek-figures | カード内などに使う、名前と数字の短い一覧。 |
data-dd-defer | 非常に長く均一な一覧で、描画を遅延させる任意の指定。 |
使い方の注意
プレビューは3行までにし、全文へリンクします。印刷時は行を展開して全文を表示します。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。