ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-09 05:32:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 迁移简约风格表单

Browse Source
This commit is contained in:
augushong
2025-09-02 12:41:10 +08:00
parent 050bf7208f
commit 7ced42a913
11 changed files with 168 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
demo/pc/form.html
View File

@@ -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"> <fieldset class="layui-elem-field layui-field-title">
<legend>极简对称表单(依赖layui)</legend> <legend>极简对称表单(依赖layui)</legend>
<div class="layui-field-box"> <div class="layui-field-box">

64
public/cdn/layui-ul.css
View File

@@ -174,38 +174,6 @@
justify-content: space-between; 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 { .ul-form-space-between .layui-form-item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@@ -1325,6 +1293,38 @@
text-align: center; 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 { .ul-card-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

2
public/cdn/layui-ul.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
source/components/_index.scss
View File

@@ -20,6 +20,7 @@
@import './descriptions/ul-easy-item/index'; @import './descriptions/ul-easy-item/index';
@import './element/ul-element-fixed-option/index'; @import './element/ul-element-fixed-option/index';
@import './element/ul-loading-pos/index'; @import './element/ul-loading-pos/index';
@import './form/ul-form-basic/index';
@import './form/ul-table-form/index'; @import './form/ul-table-form/index';
@import './group_panel/ul-group-list/index'; @import './group_panel/ul-group-list/index';
@import './header/ul-header/index'; @import './header/ul-header/index';

6
source/components/form/ul-form-basic/_index.env Normal file
View 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
View 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
View File

5
source/components/form/ul-form-basic/_index.php Normal file
View File

@@ -0,0 +1,5 @@
<?php
return [
];

0
source/scss/form/_ul-form-basic.scss → source/components/form/ul-form-basic/_index.scss
View File

2
source/components/form/ul-table-form/_index.env
View File

@@ -1,4 +1,4 @@
title=表格输入(依赖layui) title=表格输入
padding=0 padding=0
margin=0 margin=0
gray=0 gray=0

1
source/scss/form/_index.scss
View File

@@ -1,2 +1 @@
@import './ul-form-basic';
@import './ul-form-space-between'; @import './ul-form-space-between';