マーカー
マーカー
物事について言われたすべてを言葉で表現するためのカプセル：状態、名前、バージョン、カテゴリ。それらは二つのオブジェクトでしたが、ある日、コードと状態が一つのヘッダーの横に並び、一つの頭の距離を置いて、誰もその違いが何を意味するのかを言えなくなりました — だから形は一つで、トーンはそれらを区別するすべてのものです。持っているものは自由です：言葉、数字、グリフ、またはその三つのうちの二つ。円はカプセルを置く余地がないところに立ち、行からぶら下がり、その行のテキストに合わせてサイズを持つカウンターは、ここで唯一マーカーではないものです。
文の中で
読まれる際に特別に設定された言葉：バージョン、フェーズ、カテゴリ。中立的なトーン、なぜなら色がついたマーカーは、すでにそれが示すものについての主張を行っているからです — 文の中には主張するものはありません。
バージョン 2.4 は リリース済み この API は 非推奨
カテゴリ
ランク付けせずに物事を区別するトーン。それらは意味を持たず — 第三が第五より優れているとは何も言いません — それがまさに分類法で使える理由であり、意味は嘘になります。状態と同じように着用されます：同じカプセル、同じリズム。
中立
ruby
grapefruit
bittersweet
sunflower
straw
grass
mint
teal
aqua
blue-jeans
plum
lavender
pink-rose
言葉で表現された状態
文中またはタイトルの横で発表され、それはカラムのマークではなくメッセージです。
操作が成功しました
エラーが発生しました
注意して進んでください
ご参考までに
12単位で読む状態
カラム内で、中立的なカウントの横にあるチェックは二つのオブジェクトとして読み取られ、それらのテーブルはノイズとして読み取られます。ここでは色が数字を包み、カラムは一度にスキャンされます — コンパクトで、セルに余裕がありません。
15
success
15
error
15
warning
15
info
15
running
15
pending
15
paused
15
play
15
skipped
15
disabled
持っているもの
状態が何であるかを示す言葉、それがいくつあるかを示す数字、両方またはどちらでもない。数字は常に他のものから一歩引いて描かれます：それは状態を修飾し、状態そのものではありません。
合格
15
合格15
三つの形が並んで
実際に読まれる場所にある同じ情報。円はカプセルに対して狭すぎるセルのための形であり、量としての状態を示す唯一のものです — そして、それはカプセルが満たす色と同じ色で描かれます。
| フォーム | success | warning | error | skipped |
|---|---|---|---|---|
| カプセル | 15 | 15 | 15 | 15 |
| 円 |
円
言葉ではなく円で表現された状態、12単位で状態が読み取られる場所 — 実行のリスト、仕事の行。リングは色を持ち、内部のグリフはどの状態であるかを示し、スタックの両側は同じマークアップを描きます。
success
error
warning
info
running
pending
paused
play
skipped
disabled
LED
点灯したドットとその言葉: 一目で状態を把握できる行、要約やサービスのリストで多数表示。マーカーより小さく、円より静か。offはドットが消灯している状態 — ゼロカウント —、実行中は息をしています。
success
info
running
warning
error
dev
off
cat-mint
34 正常
2 実行中
0 エラー
0 キュー待ち
カウント
アイコンやボタンの隅にあるピルのように、見られるのを待っている数: 赤色で表示され、99を超える場合は99+; 数字の代わりに単語（「新規」）またはドット; ゼロの場合は要求しない限り何も表示されない。countApply()は、ページが変わると現在の数を保持します。
2
受信トレイ 4
error 7
warning 14
success 21
info 28
accent 35
ゼロ表示 0
量としての状態
実行は量を持つ唯一の状態であり、そのためリングは実行が到達したところまで描かれます。Twigは与えられた値を印刷し、その後に移動するのはブラウザの仕事です。
0%
25%
50%
75%
100%
円のサイズ
マーカーの隣にあるカウンター
残された一つの区別であり、それは意味に関するものではありません。左にカウンター：何かの12、そこに導く行からぶら下がり、その行のテキストに合わせてサイズが決まります。右にマーカー：うまくいった何かの12、独立して立ち、トークンでサイズが決まります。メニュー項目の隣にあるカウントはカウンターです；パイプラインの列にある同じ数字はマーカーです。
12
12
Vue
同じコンポーネント、駆動：タイプまたは値を切り替えると、弧が再描画されるのではなく移動します。これは、状態が読者の目の前で変わるときにアプリが配置するものです。
使用法
{{ marker('success', 'Operation successful') }}
{{ marker('success', null, { count: 15, compact: true }) }}
{{ status_icon('running', { progress: 0.4 }) }}