Panel

コンテンツエリアのみPanel

html

<div data-urushi-type="panel">
    <span>Inner message.</span>
</div>

---

ヘッダ、フッタあり、コンポーネント入りPanel

html

<div data-urushi-type="panel" data-urushi-options='{"header" : "Header title", "footer" : "Footer title"}'>
    <h2>sub title</h2>
    <div>
        <div>test message.</div>
        <button data-urushi-type="button" class="button-primary">Panel button</button>
    </div>
</div>

---

Primary配色Panel

html

<div
	data-urushi-type="panel"
	data-urushi-options='{"header" : "Header primary"}'
	class="panel-primary">
	Primary header color.
</div>

---

Success配色Panel

html

<div
	data-urushi-type="panel"
	data-urushi-options='{"header" : "Header success"}'
	class="panel-success">
	Success header color.
</div>

---

Info配色Panel

html

<div
	data-urushi-type="panel"
	data-urushi-options='{"header" : "Header info"}'
	class="panel-info">
	Info header color.
</div>

---

Warning配色Panel

html

<div
	data-urushi-type="panel"
	data-urushi-options='{"header" : "Header warning"}'
	class="panel-warning">
	Warning header color.
</div>

---

Danger配色Panel

html

<div
	data-urushi-type="panel"
	data-urushi-options='{"header" : "Header danger"}'
	class="panel-danger">
	Danger header color.
</div>