button
ボタンを設置します。
もくじ
使い方1
&button(URL,オプション){表示文字};
使い方2
#button(URL){{
表示文字
}}
URLについて
最初のパラメーターにはリンク先のページ名やURLを指定します。
//指定したページへリンク
&button(Purchase,primary){今すぐ購入};
//指定したURLへリンク
&button(http://www.example.com/touch.html,info){お問い合せ};
オプション
| 名前 | 説明 |
| primary | 青いボタンを表示します |
| info | 水色のボタンを表示します |
| success | 緑色のボタンを表示します |
| warning | 黄色のボタンを表示します |
| danger | 赤色のボタンを表示します |
| round | 角丸のボタンを表示します |
| gradient | グラデーションのかかったボタンを表示します |
| ghost | 背景色が透明で枠線のみのボタンを表示します |
| ghost-w | ghostの枠線と文字が白いボタンを表示します。 背景が白い部分では使用しないようにしてください |
| large lg | 大きいボタンを表示します |
| small sm | 小さいボタンを表示します |
| xs | 極小のボタンを表示します |
| block | 横幅いっぱいにボタンを表示します |
| window=windowname | 別ウィンドウで開くウィンドウ名を指定します |
サンプル
サイズ
// 書き方
&button(#,large){大きいボタン};
&button(#){ふつうのボタン};
&button(#,small){小さいボタン};
&button(#,xs){かなり小さいボタン};
色
// 書き方
&button(#){指定なし};
&button(#,info){水色ボタン：info};
&button(#,primary){青色ボタン：primary};
&button(#,success){緑色ボタン：success};
&button(#,warning){オレンジ色ボタン：warning};
&button(#,danger){赤色ボタン：danger};
その他いろいろ
// 書き方
&button(#,info,ghost){水色ふち取りボタン};
&button(#,primary,gradient){青色グラデーションボタン};
&button(#,warning,block){オレンジブロックボタン};
ボタンのリンク先に別ページへのアンカーを設定する場合
ボタンをクリックして、別ページへのアンカー場所へリンクさせる場合は、URLの最後に#アンカー名を付けて、ボタンのリンク先にURLを指定して下さい。
&button(http://◯◯◯.com#アンカー名){ボタンに表示させる文字};