ToolKit[Titon]を利用した
Labelのサンプルプログラムです。
ToolKit[Titon]については
下記サイトを参照してください。
参照URL①：Toolkit – Project Titon
参照URL②：Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」:phpspot開発日誌
デモサイト：Label – Titon Toolkit Demo Site
HTML head部
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/toolkit.css" /> <link rel="stylesheet" type="text/css" href="css/ui.css" /> </head>
HTML body部（サンプル①）
<!-- デフォルト --> <span class="label"> 重要</span> <!-- バッジ --> <span class="label label--badge"> 10 </span>
HTML body部（サンプル②）
<!-- Samll --> <span class="label small"> small </span> <!-- Default --> <span class="label"> default</span> <!-- Large --> <span class="label large"> Large </span>
HTML body部（サンプル③）
<!-- Default --> <span class="label"> default</span> <!-- Info --> <span class="label is-info"> info </span> <!-- Success --> <span class="label is-success">success</span> <!-- Warning --> <span class="label is-warning">warning</span> <!-- Error --> <span class="label is-error"> error </span>
HTML body部（サンプル④）
<!-- Left Arrow --> <span class="label label--arrow-left"> left arrow </span> <!-- Right Arrow --> <span class="label label--arrow-right"> right arrow </span> <!-- Left Ribbon --> <span class="label label--ribbon-left"> left ribbon </span> <!-- Right Ribbon --> <span class="label label--ribbon-right">right ribbon</span>
解説
Labelのみの機能を使う場合は
ファイル[toolkit.js]は
必要無いですので
ファイル[toolkit.css]及び
ファイル[ui.css]のみを
読み込んでいます。
※ToolKit[Titon]のライセンスは[BSD]です。