echo-button
リンク、インライン要素、フォームのボタン要素をボタン状に表示する。
左右に 1em
の余白が確保される。
サブクラス .echo-button-style-(style)
が必須であり、付与していない場合は最低限の装飾となる。
.disabled
もしくは disabled="disabled"
が付与されていると、反応しない見た目となる。
(他のフレームワークとの互換のため .disabled
に接頭辞は設けていない)
ボタンのdisplayプロパティは inline-flex
を指定している。このため、連続して配置すると右に改行コード分の余白が生じる。
整列や中央寄せをしたい場合は component > .echo-form
か layout > .echo-buttons
を使用すること。
(breakpoint) | .echo-***-sm | .echo-*** | .echo-***-lg | .echo-***-xl | .echo-***-xxl | |||||
---|---|---|---|---|---|---|---|---|---|---|
(fontsize) | 最低高さ | (fontsize) | 最低高さ | (fontsize) | 最低高さ | (fontsize) | 最低高さ | (fontsize) | 最低高さ | |
md以下 | xs | 2.25rem (36px) |
sm | 2.5rem (40px) |
md | 2.75rem (44px) |
lg | 3rem (48px) |
xl | 3.25rem (52px) |
lg以上 | sm | 2.5rem (40px) |
md | 2.75rem (44px) |
lg | 3.125rem (50px) |
xl | 3.5rem (56px) |
xxl | 4rem (64px) |
span要素
input要素のbutton
button要素
テキストが極端に長い場合、または .echo-buttons に含まれる場合は最大幅で停止する。 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ
<p>
<dfn>a要素</dfn>
<a href="#" class="echo-button">echo-button</a>
<a href="#" class="echo-button disabled">echo-button</a>
</p>
<p>
<dfn>span要素</dfn>
<span class="echo-button">echo-button</span>
<span class="echo-button disabled">echo-button</span>
</p>
<p>
<dfn>input要素のbutton</dfn>
<input type="button" class="echo-button" value="echo-button" />
<input type="button" class="echo-button" value="echo-button" disabled="disabled" />
</p>
<p>
<dfn>button要素</dfn>
<button class="echo-button">echo-button</button>
<button class="echo-button" disabled="disabled">echo-button</button>
</p>
<p>
<dfn>テキストが極端に長い</dfn>
<a href="#" class="echo-button">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a>
</p>
sub class echo-button-style-(style)
ボタンの外観を変更する。
.echo-button-(color)
が付与されていない場合はボタンの色が $default
となる。
a要素 + style-a echo-button-style-a echo-button-style-a
input要素のbutton + style-a
a要素 + style-b echo-button-style-b echo-button-style-b
input要素のbutton + style-a
<p>
<dfn>a要素 + style-a</dfn>
<a href="#" class="echo-button echo-button-style-a">echo-button-style-a</a>
<a href="#" class="echo-button echo-button-style-a disabled">echo-button-style-a</a>
</p>
<p>
<dfn>input要素のbutton + style-a</dfn>
<input type="button" class="echo-button echo-button-style-a" value=" echo-button-style-a" />
<input type="button" class="echo-button echo-button-style-a" value=" echo-button-style-a" disabled="disabled" />
</p>
<p>
<dfn>a要素 + style-b</dfn>
<a href="#" class="echo-button echo-button-style-b">echo-button-style-b</a>
<a href="#" class="echo-button echo-button-style-b disabled">echo-button-style-b</a>
</p>
<p>
<dfn>input要素のbutton + style-a</dfn>
<input type="button" class="echo-button echo-button-style-b" value=" echo-button-style-b" />
<input type="button" class="echo-button echo-button-style-b" value=" echo-button-style-b" disabled="disabled" />
</p>
sub class echo-button-(color)
.echo-button-style-(style)
と同時に使用することを前提に、ボタンの色を変更する。
(color)は標準のカラーテーブルを参照。
info + style-a echo-button-info echo-button-info
info + style-b echo-button-info echo-button-info
important + style-a echo-button-important echo-button-important
important + style-b echo-button-important echo-button-important
inverse + style-a echo-button-inverse echo-button-inverse
inverse + style-b echo-button-inverse echo-button-inverse
<p>
<dfn>info + style-a</dfn>
<a href="#" class="echo-button echo-button-style-a echo-button-info">echo-button-info</a>
<a href="#" class="echo-button echo-button-style-a echo-button-info disabled">echo-button-info</a>
</p>
<p>
<dfn>info + style-b</dfn>
<a href="#" class="echo-button echo-button-style-b echo-button-info">echo-button-info</a>
<a href="#" class="echo-button echo-button-style-b echo-button-info disabled">echo-button-info</a>
</p>
<p>
<dfn>important + style-a</dfn>
<a href="#" class="echo-button echo-button-style-a echo-button-important">echo-button-important</a>
<a href="#" class="echo-button echo-button-style-a echo-button-important disabled">echo-button-important</a>
</p>
<p>
<dfn>important + style-b</dfn>
<a href="#" class="echo-button echo-button-style-b echo-button-important">echo-button-important</a>
<a href="#" class="echo-button echo-button-style-b echo-button-important disabled">echo-button-important</a>
</p>
<p class="echo-bg-default echo-padding-md">
<dfn>inverse + style-a</dfn>
<a href="#" class="echo-button echo-button-style-a echo-button-inverse">echo-button-inverse</a>
<a href="#" class="echo-button echo-button-style-a echo-button-inverse disabled">echo-button-inverse</a>
</p>
<p class="echo-bg-default echo-padding-md">
<dfn>inverse + style-b</dfn>
<a href="#" class="echo-button echo-button-style-b echo-button-inverse">echo-button-inverse</a>
<a href="#" class="echo-button echo-button-style-b echo-button-inverse disabled">echo-button-inverse</a>
</p>
sub class echo-button-(size)
ボタンの文字サイズ、最低高さ、最大幅を変更する。
(size)は、 sm, lg, xl, xxl
に対応している。
Sassを使用できる場合、 _scss/config_advance.scss
の配列 $button-min-font-sizes, $button-max-font-sizes, $button-min-widths, $button-max-widths
で変更できる。
echo-button-sm echo-button
(default) echo-button
echo-button-lg echo-button
echo-button-xl echo-button
echo-button-xxl echo-button
テキストが極端に長い場合、または .echo-buttons に含まれる場合は最大幅で停止する。
echo-button-sm 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ
(default) 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ
echo-button-lg 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ
echo-button-xl 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー
echo-button-xxl 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している
sub class echo-button-fixed
.echo-button-(size)
と同時に付与すると、ボタンが (breakpoint) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。
各サイズは、前項の表内の最低値となる。
echo-button-sm echo-button
(default) echo-button
echo-button-lg echo-button
echo-button-xl echo-button
echo-button-xxl echo-button
テキストが極端に長い場合、または .echo-buttons に含まれる場合は最大幅で停止する。
echo-button-sm 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ
(default) 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ
echo-button-lg 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ
echo-button-xl 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー
echo-button-xxl 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している
sub class echo-button-icon-(direction)
ボタンの右端、もしくは左端にアイコンを表示すべき領域のみを確保する。
(direction)の指定がない( .echo-button-icon
)場合は右、 left
であれば左となる。
:after
疑似要素にアイコンのスタイルを指定することを前提としており、echo.cssでは後述の echo-button-icon-arrow
を付与したときのみアイコンが表示される。
この例では .echo-doc-button-icon クラスを付与して、アイコン領域を仮表示している。
default(right) echo-button-icon echo-button-icon
<style>
.echo-doc-button-icon:after {
border: 1px solid #3a0;
background-color: #fc8;
}
</style>
<p>
<dfn>default(right)</dfn>
<a href="#" class="echo-button echo-button-style-a echo-button-icon echo-doc-button-icon">echo-button-icon</a>
<a href="#" class="echo-button echo-button-style-b echo-button-icon echo-doc-button-icon">echo-button-icon</a>
</p>
<p>
<dfn>left</dfn>
<a href="#" class="echo-button echo-button-style-a echo-button-icon-left echo-doc-button-icon">echo-button-icon-left</a>
<a href="#" class="echo-button echo-button-style-b echo-button-icon-left echo-doc-button-icon">echo-button-icon-left</a>
</p>
sub class echo-button-icon-(name)
ボタンに実際にアイコンを表示する。右端に表示する場合は .echo-button-icon-(direction)
は必要ない。
echo.cssでは(name)は arrow
のみ対応しており、CSSのボーダーで生成したシェブロンを表示する。
(name)には仕様上 left, right
が予約語となり使用できないことに注意。
right echo-button-icon-arrow echo-button-icon-arrow
left echo-button-icon-arrow echo-button-icon-arrow
left + inverse echo-button-icon-arrow echo-button-icon-arrow
right + inverse echo-button-icon-arrow echo-button-icon-arrow
<p>
<dfn>right</dfn>
<a href="#" class="echo-button echo-button-style-a echo-button-icon-arrow">echo-button-icon-arrow</a>
<a href="#" class="echo-button echo-button-style-b echo-button-icon-arrow">echo-button-icon-arrow</a>
</p>
<p>
<dfn>left</dfn>
<a href="#" class="echo-button echo-button-style-a echo-button-icon-left echo-button-icon-arrow">echo-button-icon-arrow</a>
<a href="#" class="echo-button echo-button-style-b echo-button-icon-left echo-button-icon-arrow">echo-button-icon-arrow</a>
</p>
<div class="echo-padding-sm echo-bg-default">
<p>
<dfn>left + inverse</dfn>
<a href="#" class="echo-button echo-button-inverse echo-button-style-a echo-button-icon-arrow">echo-button-icon-arrow</a>
<a href="#" class="echo-button echo-button-inverse echo-button-style-b echo-button-icon-right echo-button-icon-arrow">echo-button-icon-arrow</a>
</p>
<p>
<dfn>right + inverse</dfn>
<a href="#" class="echo-button echo-button-inverse echo-button-style-a echo-button-icon-arrow">echo-button-icon-arrow</a>
<a href="#" class="echo-button echo-button-inverse echo-button-style-b echo-button-icon-right echo-button-icon-arrow">echo-button-icon-arrow</a>
</p>
</div>
sub class echo-button-oval
ボタンを小判型にする。
echo-button-oval echo-button-oval
echo-button-oval echo-button-oval
echo-button-oval echo-button-oval
echo-button-oval echo-button-oval
<p>
<a href="#" class="echo-button echo-button-oval">echo-button-oval</a>
</p>
<p>
<a href="#" class="echo-button echo-button-oval echo-button-style-a">echo-button-oval</a>
<a href="#" class="echo-button echo-button-oval echo-button-style-b">echo-button-oval</a>
</p>
<p>
<a href="#" class="echo-button echo-button-oval echo-button-style-a echo-button-info">echo-button-oval</a>
<a href="#" class="echo-button echo-button-oval echo-button-style-b echo-button-info">echo-button-oval</a>
</p>
<p>
<a href="#" class="echo-button echo-button-oval echo-button-style-a echo-button-important">echo-button-oval</a>
<a href="#" class="echo-button echo-button-oval echo-button-style-b echo-button-important">echo-button-oval</a>
</p>
<p class="echo-bg-default echo-padding-md">
<a href="#" class="echo-button echo-button-oval echo-button-style-a echo-button-inverse">echo-button-oval</a>
<a href="#" class="echo-button echo-button-oval echo-button-style-b echo-button-inverse">echo-button-oval</a>
</p>
<p>
<a href="#" class="echo-button echo-button-oval echo-button-style-a echo-button-icon-left echo-button-icon-arrow">echo-button-oval</a>
<a href="#" class="echo-button echo-button-oval echo-button-style-a echo-button-icon-arrow">echo-button-oval</a>
</p>
<p>
<a href="#" class="echo-button echo-button-sm echo-button-oval echo-button-style-a">echo-button-oval</a>
</p>
<p>
<a href="#" class="echo-button echo-button-oval echo-button-style-a">echo-button-oval</a>
</p>
<p>
<a href="#" class="echo-button echo-button-lg echo-button-oval echo-button-style-a">echo-button-oval</a>
</p>
<p>
<a href="#" class="echo-button echo-button-xl echo-button-oval echo-button-style-a">echo-button-oval</a>
</p>
<p>
<a href="#" class="echo-button echo-button-xxl echo-button-oval echo-button-style-a">echo-button-oval</a>
</p>
sub class echo-button-circle
ボタンを正円で表示する。
.echo-button-icon-(direction)
は使用できない。
幅を超える文字数のテキストを表示することはできない。
メニューの展開ボタン等の重要なインターフェースに .echo-button-circle.echo-button-sm
を使用することは推薦されない。
<p>
<a href="#" class="echo-button echo-button-circle">C</a>
</p>
<p>
<a href="#" class="echo-button echo-button-circle echo-button-style-a">C</a>
<a href="#" class="echo-button echo-button-circle echo-button-style-b">C</a>
</p>
<p>
<a href="#" class="echo-button echo-button-circle echo-button-style-a echo-button-info">C</a>
<a href="#" class="echo-button echo-button-circle echo-button-style-b echo-button-info">C</a>
</p>
<p>
<a href="#" class="echo-button echo-button-circle echo-button-style-a echo-button-important">C</a>
<a href="#" class="echo-button echo-button-circle echo-button-style-b echo-button-important">C</a>
</p>
<p class="echo-bg-default echo-padding-md">
<a href="#" class="echo-button echo-button-circle echo-button-style-a echo-button-inverse">C</a>
<a href="#" class="echo-button echo-button-circle echo-button-style-b echo-button-inverse">C</a>
</p>
<p>
<a href="#" class="echo-button echo-button-sm echo-button-circle echo-button-style-a">C</a>
</p>
<p>
<a href="#" class="echo-button echo-button-circle echo-button-style-a">C</a>
</p>
<p>
<a href="#" class="echo-button echo-button-lg echo-button-circle echo-button-style-a">C</a>
</p>
<p>
<a href="#" class="echo-button echo-button-xl echo-button-circle echo-button-style-a">C</a>
</p>
<p>
<a href="#" class="echo-button echo-button-xxl echo-button-circle echo-button-style-a">C</a>
</p>
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-sm">.echo-button-fixed を併用した場合</p>
<p>
<a href="#" class="echo-button echo-button-sm echo-button-fixed echo-button-circle echo-button-style-b">C</a>
</p>
<p>
<a href="#" class="echo-button echo-button-fixed echo-button-circle echo-button-style-b">C</a>
</p>
<p>
<a href="#" class="echo-button echo-button-lg echo-button-fixed echo-button-circle echo-button-style-b">C</a>
</p>
<p>
<a href="#" class="echo-button echo-button-xl echo-button-fixed echo-button-circle echo-button-style-b">C</a>
</p>
<p>
<a href="#" class="echo-button echo-button-xxl echo-button-fixed echo-button-circle echo-button-style-b">C</a>
</p>
sub class echo-button-square
ボタンを正方形で表示する。
.echo-button-icon-(direction)
は使用できない。
幅を超える文字数のテキストを表示することはできない。
メニューの展開ボタン等の重要なインターフェースに .echo-button-square.echo-button-sm
を使用することは推薦されない。
<p>
<a href="#" class="echo-button echo-button-square">S</a>
</p>
<p>
<a href="#" class="echo-button echo-button-square echo-button-style-a">S</a>
<a href="#" class="echo-button echo-button-square echo-button-style-b">S</a>
</p>
<p>
<a href="#" class="echo-button echo-button-square echo-button-style-a echo-button-info">S</a>
<a href="#" class="echo-button echo-button-square echo-button-style-b echo-button-info">S</a>
</p>
<p>
<a href="#" class="echo-button echo-button-square echo-button-style-a echo-button-important">S</a>
<a href="#" class="echo-button echo-button-square echo-button-style-b echo-button-important">S</a>
</p>
<p class="echo-bg-default echo-padding-md">
<a href="#" class="echo-button echo-button-square echo-button-style-a echo-button-inverse">S</a>
<a href="#" class="echo-button echo-button-square echo-button-style-b echo-button-inverse">S</a>
</p>
<p>
<a href="#" class="echo-button echo-button-sm echo-button-square echo-button-style-a">S</a>
</p>
<p>
<a href="#" class="echo-button echo-button-square echo-button-style-a">S</a>
</p>
<p>
<a href="#" class="echo-button echo-button-lg echo-button-square echo-button-style-a">S</a>
</p>
<p>
<a href="#" class="echo-button echo-button-xl echo-button-square echo-button-style-a">S</a>
</p>
<p>
<a href="#" class="echo-button echo-button-xxl echo-button-square echo-button-style-a">S</a>
</p>
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-sm">.echo-button-fixed を併用した場合</p>
<p>
<a href="#" class="echo-button echo-button-sm echo-button-fixed echo-button-square echo-button-style-b">S</a>
</p>
<p>
<a href="#" class="echo-button echo-button-fixed echo-button-square echo-button-style-b">S</a>
</p>
<p>
<a href="#" class="echo-button echo-button-lg echo-button-fixed echo-button-square echo-button-style-b">S</a>
</p>
<p>
<a href="#" class="echo-button echo-button-xl echo-button-fixed echo-button-square echo-button-style-b">S</a>
</p>
<p>
<a href="#" class="echo-button echo-button-xxl echo-button-fixed echo-button-square echo-button-style-b">S</a>
</p>