module-label

echo-label

カテゴリー名などに使用する、小さなラベルを表示する。span要素、a要素に指定できる。
ラベルの文字サイズは、その要素で継承されている font-size70% (0.7em) となる。

内包するテキストに改行を含めることはできない。
サブクラス .echo-label-style-(style) が必須であり、付与していない場合は最低限の装飾となる。

ラベルのdisplayプロパティは inline-flex を指定している。このため、連続して配置すると右に改行コード分の余白が生じる。
余白を詰めたい場合は、包括するコンポーネントで調整すること。

Internet Explorer 11のラベル・ナビゲーションの不具合について

補足:マルチバイト言語に向けたラベルの調整について

日本語、中国語、韓国語などのマルチバイト言語で使用すると、ラベルが上にずれて見える。これは英語等の、ベースラインの概念がある言語の影響である。
echo.cssはマルチバイト言語での利用を想定しているため、 position:relative でラベルをわずかに上に移動している。

note: About adjusting labels for multibyte languages

When used in multi-byte languages such as Japanese, Chinese, and Korean, the labels appear to shift upwards. It is the influence of languages that have a "baseline" concept such as English. Since echo.css is intended for use in multibyte languages, the label has been moved up slightly with "position: relative".

吾輩は猫である。名前はまだ無い。echo-labelecho-label(link)どこで生れたかとんと見当がつかぬ。

<p>吾輩は猫である。名前はまだ無い。<span class="echo-label">echo-label</span><a href="#" class="echo-label">echo-label(link)</a>どこで生れたかとんと見当がつかぬ。</p>

sub class echo-label-style-(style)

ラベルの外観を変更する。
.echo-label-(color) が付与されていない場合はラベルの色が $default となる。

吾輩は猫である。名前はまだ無い。echo-label-style-aecho-label-style-a(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-label-style-becho-label-style-b(link)どこで生れたかとんと見当がつかぬ。

<p>吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-style-a">echo-label-style-a</span><a href="#" class="echo-label echo-label-style-a">echo-label-style-a(link)</a>どこで生れたかとんと見当がつかぬ。</p>

<p>吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-style-b">echo-label-style-b</span><a href="#" class="echo-label echo-label-style-b">echo-label-style-b(link)</a>どこで生れたかとんと見当がつかぬ。</p>

sub class echo-label-(color)

ラベルの色を変更する。(color)は標準のカラーテーブルを参照。

吾輩は猫である。名前はまだ無い。echo-label-infoecho-label-info(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-label-infoecho-label-info(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-label-importantecho-label-important(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-label-importantecho-label-important(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-label-inverseecho-label-inverse(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-label-inverseecho-label-inverse(link)どこで生れたかとんと見当がつかぬ。

<p>吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-style-a echo-label-info">echo-label-info</span><a href="#" class="echo-label echo-label-style-a echo-label-info">echo-label-info(link)</a>どこで生れたかとんと見当がつかぬ。</p>

<p>吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-style-b echo-label-info">echo-label-info</span><a href="#" class="echo-label echo-label-style-b echo-label-info">echo-label-info(link)</a>どこで生れたかとんと見当がつかぬ。</p>

<p>吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-style-a echo-label-important">echo-label-important</span><a href="#" class="echo-label echo-label-style-a echo-label-important">echo-label-important(link)</a>どこで生れたかとんと見当がつかぬ。</p>

<p>吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-style-b echo-label-important">echo-label-important</span><a href="#" class="echo-label echo-label-style-b echo-label-important">echo-label-important(link)</a>どこで生れたかとんと見当がつかぬ。</p>

<p class="echo-bg-default echo-padding-sm">吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-style-a echo-label-inverse">echo-label-inverse</span><a href="#" class="echo-label echo-label-style-a echo-label-inverse">echo-label-inverse(link)</a>どこで生れたかとんと見当がつかぬ。</p>

<p class="echo-bg-default echo-padding-sm">吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-style-b echo-label-inverse">echo-label-inverse</span><a href="#" class="echo-label echo-label-style-b echo-label-inverse">echo-label-inverse(link)</a>どこで生れたかとんと見当がつかぬ。</p>

sub class echo-label-oval

ラベルが小判型になる。

吾輩は猫である。名前はまだ無い。echo-label-ovalecho-label-oval(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-label-ovalecho-label-oval(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-label-ovalecho-label-oval(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-label-ovalecho-label-oval(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-label-ovalecho-label-oval(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-label-ovalecho-label-oval(link)どこで生れたかとんと見当がつかぬ。

<p>吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-oval echo-label-style-a echo-label-info">echo-label-oval</span><a href="#" class="echo-label echo-label-oval echo-label-style-a echo-label-info">echo-label-oval(link)</a>どこで生れたかとんと見当がつかぬ。</p>

<p>吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-oval echo-label-style-b echo-label-info">echo-label-oval</span><a href="#" class="echo-label echo-label-oval echo-label-style-b echo-label-info">echo-label-oval(link)</a>どこで生れたかとんと見当がつかぬ。</p>

<p>吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-oval echo-label-style-a echo-label-important">echo-label-oval</span><a href="#" class="echo-label echo-label-oval echo-label-style-a echo-label-important">echo-label-oval(link)</a>どこで生れたかとんと見当がつかぬ。</p>

<p>吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-oval echo-label-style-b echo-label-important">echo-label-oval</span><a href="#" class="echo-label echo-label-oval echo-label-style-b echo-label-important">echo-label-oval(link)</a>どこで生れたかとんと見当がつかぬ。</p>

<p class="echo-bg-default echo-padding-sm">吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-oval echo-label-style-a echo-label-inverse">echo-label-oval</span><a href="#" class="echo-label echo-label-oval echo-label-style-a echo-label-inverse">echo-label-oval(link)</a>どこで生れたかとんと見当がつかぬ。</p>

<p class="echo-bg-default echo-padding-sm">吾輩は猫である。名前はまだ無い。<span class="echo-label echo-label-oval echo-label-style-b echo-label-inverse">echo-label-oval</span><a href="#" class="echo-label echo-label-oval echo-label-style-b echo-label-inverse">echo-label-oval(link)</a>どこで生れたかとんと見当がつかぬ。</p>