状態とフィードバック / 出来事
Timeline
出来事の順序、結果、処理がどこまで進んだかを示します。
基本的な使い方
- 検出
844文を検出
WordPressカタログの77ファイルに含まれるデータベース呼び出し。
- 解決
35文を完全に解決
SQLの全文を特定できました。
- 未解決の結果
809文は未解決
依存関係のモデルと解析限界により、このカタログは完全ではありません。
HTML
<ol class="timeline">
<li class="timeline-item tone-ok"><span class="timeline-time">検出</span><p class="timeline-title">844文を検出</p><p class="timeline-description">WordPressカタログの77ファイルに含まれるデータベース呼び出し。</p></li>
<li class="timeline-item tone-ok"><span class="timeline-time">解決</span><p class="timeline-title">35文を完全に解決</p><p class="timeline-description">SQLの全文を特定できました。</p></li>
<li class="timeline-item is-open"><span class="timeline-time">未解決の結果</span><p class="timeline-title">809文は未解決</p><p class="timeline-description">依存関係のモデルと解析限界により、このカタログは完全ではありません。</p></li>
</ol>レポートの中の年表
HTML
<article class="sheet sheet-inset">
<section class="sec">
<h3 class="label">02 / 2014</h3>
<div class="field">
<p class="lead">身近な不便を、作って、書いて、話す。</p>
<ol class="timeline">
<li class="timeline-item"><span class="timeline-time">2014.05–06</span><p class="timeline-title">ビルド結果を「伺か」に伝える</p><p class="timeline-description">Gruntの成功・警告・失敗などをデスクトップマスコットへ通知するgrunt-sstpを制作。5月6日にQiitaで公開し、6月1日にはScalaのSBTから操作する方法も解説した。<a class="cite" href="#src-1">1</a><a class="cite" href="#src-2">2</a></p></li>
<li class="timeline-item tone-accent"><span class="timeline-time">2014.10.11 · 初登壇</span><p class="timeline-title">PHP＋伺かで始める新しい通知の形</p><p class="timeline-description">PHP Conference Japan 2014のLT。春から公開していた通知ツールの試みが、技術カンファレンスでの発表へつながった。<a class="cite" href="#src-3">3</a></p></li>
</ol>
</div>
</section>
<section class="sec">
<h3 class="label">12 / 出典</h3>
<div class="field">
<ol class="sources">
<li id="src-1"><a href="https://github.com/k-kinzal/grunt-sstp">grunt-sstp</a><span class="source-meta">GitHub · 2014.05 · ビルド結果をデスクトップマスコットへ通知するGruntプラグイン</span></li>
<li id="src-2"><a href="https://github.com/k-kinzal/grunt-dgeni">grunt-dgeni</a><span class="source-meta">GitHub · 2014.09 · 文書生成をGruntタスクへ組み込むプラグイン</span></li>
<li id="src-3"><a href="https://www.slideshare.net/slideshow/php-40139017/40139017">PHP＋伺かで始める新しい通知の形</a><span class="source-meta">登壇資料 · 2014.10.11 · PHP Conference Japan 2014のLT</span></li>
</ol>
</div>
</section>
</article>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.timeline / .timeline-item | 順序付きリストと出来事。 |
.timeline-time / .timeline-title / .timeline-description | いつ起きたか、何が起きたか、補足の文脈。説明には複数の段落を置けます。 |
.is-open | 未完了・未確認の段階を示す輪郭の印。 |
.sheet .timeline | レポートの中では、項目はレポートの本文サイズになり、項目の間隔は1ベースラインになります。 |
使い方の注意
未確認のステップを完了にしないでください。結果は色だけでなくタイトルにも書きます。レポートの中では年表は周囲の本文と同じサイズで読め、カタログの中では実行のステップはコンパクトなままです。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。