Panel

コンテンツエリアのみPanel

Inner message.

html


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


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

sub title

test message.

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

Primary header color.

html


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


Success配色Panel

Success header color.

html


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


Info配色Panel

Info header color.

html


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


Warning配色Panel

Warning header color.

html


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


Danger配色Panel

Danger header color.

html


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