root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Drawer Document

develop
就眠仪式 2020-07-18 18:09:47 +08:00
parent 2f79ecb2b3
commit 5fbd88135b
4 changed files with 77 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
component/pear/css/pear-module/table.css Normal file
View File

1
component/pear/css/pear.css
View File

@ -11,3 +11,4 @@
@import url("pear-module/tab.css"); @import url("pear-module/tab.css");
@import url("pear-module/code.css"); @import url("pear-module/code.css");
@import url("pear-module/link.css"); @import url("pear-module/link.css");
@import url("pear-module/table.css");

1
index.html
View File

@ -77,6 +77,7 @@
logoTitle: "Pear Admin", // 网站标题 logoTitle: "Pear Admin", // 网站标题
logoImage: "admin/images/logo.png" // 网站Logo logoImage: "admin/images/logo.png" // 网站Logo
}; };
admin.render(config); admin.render(config);
}) })
</script> </script>

68
view/document/drawer.html
View File

@ -11,6 +11,30 @@
</style> </style>
</head> </head>
<body class="pear-container"> <body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
Drawer 在 弹出层 UI 上带来不一样的体验.
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-header">抽屉</div> <div class="layui-card-header">抽屉</div>
<div class="layui-card-body"> <div class="layui-card-body">
@ -20,6 +44,46 @@
<button class="drawer-right pear-btn pear-btn-danger">右</button> <button class="drawer-right pear-btn pear-btn-danger">右</button>
</div> </div>
</div> </div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['element', 'jquery', 'drawer', 'layer','code'], function() {
var drawer = layui.drawer;
drawer.open({
direction: "right",
dom: ".layer-open-mask",
distance: "30%",
maskClose: true
});
})
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">文档</div>
<div class="layui-card-body">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>属性</legend>
</fieldset>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>方法</legend>
</fieldset>
</div>
</div>
</div>
</div>
<div class="wrap"> <div class="wrap">
<div class="layer-call-back"> <div class="layer-call-back">
<br /> <br />
@ -45,12 +109,14 @@
<script src="../../component/layui/layui.js"></script> <script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script> <script src="../../component/pear/pear.js"></script>
<script> <script>
layui.use(['element', 'jquery', 'drawer', 'layer'], function() { layui.use(['element', 'jquery', 'drawer', 'layer', 'code'], function() {
var element = layui.element; var element = layui.element;
var $ = layui.jquery; var $ = layui.jquery;
var drawer = layui.drawer; var drawer = layui.drawer;
var layer = layui.layer; var layer = layui.layer;
layui.code();
$(".drawer-right").click(function() { $(".drawer-right").click(function() {
drawer.open({ drawer.open({
direction: "right", direction: "right",