[Toolkit – Titon]Buttonのサンプル

ToolKit[Titon]を利用した
Buttonのサンプルプログラムです。

ToolKit[Titon]については
下記サイトを参照してください。
参照URL①:Toolkit – Project Titon
参照URL②:Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」:phpspot開発日誌

デモサイト:Button – 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部(サンプル①)

<button class="button" type="button">Button</button>
<input class="button" type="button" value="Input - Button">
<input class="button" type="submit" value="Input - Submit">

HTML body部(サンプル②)

<button class="button small" type="button">Small   Button</button>
<button class="button"       type="button">Default Button</button>
<button class="button large" type="button">Large   Button</button>

HTML body部(サンプル③)

<a      class="button is-disabled" href="javascript:void(0);">Disabled Anchor</a>
<button class="button"             type="button" disabled="disabled">Disabled Button</button>
<button class="button is-active"   type="button">Active Button</button>

HTML body部(サンプル④)

<button class="button"             type="button">Default Button</button>
<button class="button is-active"   type="button">Active  Button</button>
<button class="button is-info"     type="button">Info    Button</button>
<button class="button is-success"  type="button">Success Button</button>
<button class="button is-warning"  type="button">Warning Button</button>
<button class="button is-error"    type="button">Error   Button</button>

解説

Buttonのみの機能を使う場合は
ファイル[toolkit.js]は
必要無いですので
ファイル[toolkit.css]及び
ファイル[ui.css]のみを
読み込んでいます。

※ToolKit[Titon]のライセンスは[BSD]です。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)