echo-label
カテゴリー名などに使用する、小さなラベルを表示する。span要素、a要素に指定できる。
ラベルの文字サイズは、その要素で継承されている font-size
の70% (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>