vue-lte-ui
Version:
The vue components wrapper for AdminLTE UI.
72 lines (71 loc) • 2.37 kB
HTML
<div class="demo-page">
<div class="row">
<div class="col-xs-6">
<lte-box header="简易盒子">这是盒子内容</lte-box>
</div>
<div class="col-xs-6">
<lte-box type="success" header="success盒子">这是盒子内容</lte-box>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<lte-box type="warning" header="warning盒子">这是盒子内容</lte-box>
</div>
<div class="col-xs-6">
<lte-box type="danger" header="danger盒子">这是盒子内容</lte-box>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<lte-box type="info" header="info盒子">这是盒子内容</lte-box>
</div>
<div class="col-xs-6">
<lte-box type="primary" header="primary盒子">这是盒子内容</lte-box>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<lte-box type="solid" header="solid盒子">这是盒子内容</lte-box>
</div>
<div class="col-xs-6">
<lte-box header="带ICON的盒子" icon="fa fa-lock">这是盒子内容</lte-box>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<lte-box :collapsed="true" header="我处于收缩状态">这是盒子内容</lte-box>
</div>
<div class="col-xs-6">
<lte-box :show-header-border="false" header="不显示Header边框线">这是盒子内容</lte-box>
</div>
</div>
<lte-box header="有solt box-title时，header属性失效">
<template slot="box-title">
<h1>我是slot title，允许HTML</h1>
</template>
内容在这里
</lte-box>
<lte-box header="自定义工具栏">
<template slot="box-tools">
<button class="btn btn-default btn-xs">工具按钮1</button>
</template>
内容在这里
</lte-box>
<lte-box header="自定义Footer">
内容在这里
<template slot="box-footer">
<button class="btn btn-primary">保存</button>
</template>
</lte-box>
<lte-box header="xxx">
<div>Box 内容区域</div>
<template slot="box-title"><b>复杂的Box</b></template>
<template slot="box-tools">
<button type="button" class="btn btn-box-tool"><i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool"><i class="fa fa-times"></i></button>
</template>
<template slot="box-footer">
这是Box Footer!
</template>
</lte-box>
</div>