mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-01 10:32:49 +08:00
feat: 迁移简约风格表单
This commit is contained in:
augushong
@@ -1,71 +1,3 @@
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>简约风格表单(依赖layui)</legend>
|
||||
<div class="layui-field-box">
|
||||
<div class="demo-js-src" style="display:block">
|
||||
<form class="layui-form ul-form-basic" action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码框</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">辅助文字</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="city" lay-verify="required">
|
||||
<option value=""></option>
|
||||
<option value="0">北京</option>
|
||||
<option value="1">上海</option>
|
||||
<option value="2">广州</option>
|
||||
<option value="3">深圳</option>
|
||||
<option value="4">杭州</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like[write]" title="写作">
|
||||
<input type="checkbox" name="like[read]" title="阅读" checked>
|
||||
<input type="checkbox" name="like[dai]" title="发呆">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="switch" lay-skin="switch">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男">
|
||||
<input type="radio" name="sex" value="女" title="女" checked>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">文本域</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>极简对称表单(依赖layui)</legend>
|
||||
<div class="layui-field-box">
|
||||
|
||||
@@ -174,38 +174,6 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 简约风格Form */
|
||||
.ul-form-basic .layui-form-item {
|
||||
clear: unset;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ul-form-basic .layui-form-label {
|
||||
float: unset;
|
||||
width: unset;
|
||||
text-align: left;
|
||||
padding: 5px 0;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
.ul-form-basic .layui-input-block {
|
||||
margin-left: unset;
|
||||
min-height: 30px;
|
||||
}
|
||||
.ul-form-basic .layui-input {
|
||||
padding: 10px 11px;
|
||||
height: unset;
|
||||
}
|
||||
.ul-form-basic .layui-form-mid {
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
.ul-form-basic .layui-form-select dl {
|
||||
top: 28px;
|
||||
}
|
||||
.ul-form-basic .layui-form-select dl dd,
|
||||
.ul-form-basic .layui-form-select dl dt {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.ul-form-space-between .layui-form-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -1325,6 +1293,38 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 简约风格Form */
|
||||
.ul-form-basic .layui-form-item {
|
||||
clear: unset;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ul-form-basic .layui-form-label {
|
||||
float: unset;
|
||||
width: unset;
|
||||
text-align: left;
|
||||
padding: 5px 0;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
.ul-form-basic .layui-input-block {
|
||||
margin-left: unset;
|
||||
min-height: 30px;
|
||||
}
|
||||
.ul-form-basic .layui-input {
|
||||
padding: 10px 11px;
|
||||
height: unset;
|
||||
}
|
||||
.ul-form-basic .layui-form-mid {
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
.ul-form-basic .layui-form-select dl {
|
||||
top: 28px;
|
||||
}
|
||||
.ul-form-basic .layui-form-select dl dd,
|
||||
.ul-form-basic .layui-form-select dl dt {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.ul-card-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
2
public/cdn/layui-ul.min.css
vendored
2
public/cdn/layui-ul.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -20,6 +20,7 @@
|
||||
@import './descriptions/ul-easy-item/index';
|
||||
@import './element/ul-element-fixed-option/index';
|
||||
@import './element/ul-loading-pos/index';
|
||||
@import './form/ul-form-basic/index';
|
||||
@import './form/ul-table-form/index';
|
||||
@import './group_panel/ul-group-list/index';
|
||||
@import './header/ul-header/index';
|
||||
|
||||
6
source/components/form/ul-form-basic/_index.env
Normal file
6
source/components/form/ul-form-basic/_index.env
Normal file
@@ -0,0 +1,6 @@
|
||||
title=简约风格表单
|
||||
padding=0
|
||||
margin=0
|
||||
gray=0
|
||||
mobile=0
|
||||
inner_margin=0
|
||||
122
source/components/form/ul-form-basic/_index.html
Normal file
122
source/components/form/ul-form-basic/_index.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<form
|
||||
class="layui-form ul-form-basic"
|
||||
action=""
|
||||
>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
required
|
||||
lay-verify="required"
|
||||
placeholder="请输入标题"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码框</label>
|
||||
<div class="layui-input-inline">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
lay-verify="required"
|
||||
placeholder="请输入密码"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
>
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">辅助文字</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select
|
||||
name="city"
|
||||
lay-verify="required"
|
||||
>
|
||||
<option value=""></option>
|
||||
<option value="0">北京</option>
|
||||
<option value="1">上海</option>
|
||||
<option value="2">广州</option>
|
||||
<option value="3">深圳</option>
|
||||
<option value="4">杭州</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="like[write]"
|
||||
title="写作"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="like[read]"
|
||||
title="阅读"
|
||||
checked
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="like[dai]"
|
||||
title="发呆"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="switch"
|
||||
lay-skin="switch"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="radio"
|
||||
name="sex"
|
||||
value="男"
|
||||
title="男"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="sex"
|
||||
value="女"
|
||||
title="女"
|
||||
checked
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">文本域</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea
|
||||
name="desc"
|
||||
placeholder="请输入内容"
|
||||
class="layui-textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button
|
||||
class="layui-btn"
|
||||
lay-submit
|
||||
lay-filter="formDemo"
|
||||
>立即提交</button>
|
||||
<button
|
||||
type="reset"
|
||||
class="layui-btn layui-btn-primary"
|
||||
>重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
0
source/components/form/ul-form-basic/_index.md
Normal file
0
source/components/form/ul-form-basic/_index.md
Normal file
5
source/components/form/ul-form-basic/_index.php
Normal file
5
source/components/form/ul-form-basic/_index.php
Normal file
@@ -0,0 +1,5 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
|
||||
];
|
||||
@@ -1,4 +1,4 @@
|
||||
title=表格输入(依赖layui)
|
||||
title=表格输入
|
||||
padding=0
|
||||
margin=0
|
||||
gray=0
|
||||
|
||||
@@ -1,2 +1 @@
|
||||
@import './ul-form-basic';
|
||||
@import './ul-form-space-between';
|
||||
Reference in New Issue
Block a user