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,75 +0,0 @@
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>极简对称表单(依赖layui)</legend>
|
||||
<div class="layui-field-box">
|
||||
<blockquote class="layui-elem-quote">建议和数据详情卡片搭配</blockquote>
|
||||
<div class="demo-js-src ul-mobile-box" style="display:block">
|
||||
|
||||
<div class="ul-data-card">
|
||||
<div class="body">
|
||||
<form class="layui-form ul-form-space-between" 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-block">
|
||||
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
|
||||
<div class="layui-form-mid layui-word-aux">辅助文字</div>
|
||||
</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]" lay-skin="primary" title="写作">
|
||||
<input type="checkbox" name="like[read]" lay-skin="primary" title="阅读" checked>
|
||||
<input type="checkbox" name="like[dai]" lay-skin="primary" 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">
|
||||
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="formDemo">立即提交</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</fieldset>
|
||||
@@ -174,37 +174,6 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ul-form-space-between .layui-form-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #eee;
|
||||
}
|
||||
.ul-form-space-between .layui-form-item::after {
|
||||
content: unset;
|
||||
}
|
||||
.ul-form-space-between .layui-form-item:last-child {
|
||||
border: unset;
|
||||
}
|
||||
.ul-form-space-between .layui-form-item .layui-form-label {
|
||||
text-align: left;
|
||||
float: unset;
|
||||
}
|
||||
.ul-form-space-between .layui-form-item .layui-input-block {
|
||||
margin-left: unset;
|
||||
width: 60%;
|
||||
text-align: right;
|
||||
}
|
||||
.ul-form-space-between .layui-form-item .layui-input {
|
||||
border: unset;
|
||||
text-align: right;
|
||||
}
|
||||
.ul-form-space-between .layui-form-item .layui-form-mid {
|
||||
text-align: right;
|
||||
display: block;
|
||||
float: unset;
|
||||
}
|
||||
|
||||
.ul-field-clean {
|
||||
border: unset;
|
||||
}
|
||||
@@ -1325,6 +1294,37 @@
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.ul-form-space-between .layui-form-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #eee;
|
||||
}
|
||||
.ul-form-space-between .layui-form-item::after {
|
||||
content: unset;
|
||||
}
|
||||
.ul-form-space-between .layui-form-item:last-child {
|
||||
border: unset;
|
||||
}
|
||||
.ul-form-space-between .layui-form-item .layui-form-label {
|
||||
text-align: left;
|
||||
float: unset;
|
||||
}
|
||||
.ul-form-space-between .layui-form-item .layui-input-block {
|
||||
margin-left: unset;
|
||||
width: 60%;
|
||||
text-align: right;
|
||||
}
|
||||
.ul-form-space-between .layui-form-item .layui-input {
|
||||
border: unset;
|
||||
text-align: right;
|
||||
}
|
||||
.ul-form-space-between .layui-form-item .layui-form-mid {
|
||||
text-align: right;
|
||||
display: block;
|
||||
float: unset;
|
||||
}
|
||||
|
||||
.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
@@ -21,6 +21,7 @@
|
||||
@import './element/ul-element-fixed-option/index';
|
||||
@import './element/ul-loading-pos/index';
|
||||
@import './form/ul-form-basic/index';
|
||||
@import './form/ul-mobile-box/index';
|
||||
@import './form/ul-table-form/index';
|
||||
@import './group_panel/ul-group-list/index';
|
||||
@import './header/ul-header/index';
|
||||
|
||||
6
source/components/form/ul-mobile-box/_index.env
Normal file
6
source/components/form/ul-mobile-box/_index.env
Normal file
@@ -0,0 +1,6 @@
|
||||
title=极简对称表单
|
||||
padding=0
|
||||
margin=0
|
||||
gray=0
|
||||
mobile=0
|
||||
inner_margin=0
|
||||
125
source/components/form/ul-mobile-box/_index.html
Normal file
125
source/components/form/ul-mobile-box/_index.html
Normal file
@@ -0,0 +1,125 @@
|
||||
<div class="ul-data-card" style="width: 320px;">
|
||||
<div class="body">
|
||||
<form
|
||||
class="layui-form ul-form-space-between"
|
||||
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-block">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
lay-verify="required"
|
||||
placeholder="请输入密码"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
>
|
||||
<div class="layui-form-mid layui-word-aux">辅助文字</div>
|
||||
</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]"
|
||||
lay-skin="primary"
|
||||
title="写作"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="like[read]"
|
||||
lay-skin="primary"
|
||||
title="阅读"
|
||||
checked
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="like[dai]"
|
||||
lay-skin="primary"
|
||||
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">
|
||||
<button
|
||||
class="layui-btn layui-btn-fluid"
|
||||
lay-submit
|
||||
lay-filter="formDemo"
|
||||
>立即提交</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
0
source/components/form/ul-mobile-box/_index.md
Normal file
0
source/components/form/ul-mobile-box/_index.md
Normal file
5
source/components/form/ul-mobile-box/_index.php
Normal file
5
source/components/form/ul-mobile-box/_index.php
Normal file
@@ -0,0 +1,5 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
|
||||
];
|
||||
@@ -1 +0,0 @@
|
||||
@import './ul-form-space-between';
|
||||
@@ -1,6 +1,5 @@
|
||||
@import './common';
|
||||
@import './list/index';
|
||||
@import './form/index';
|
||||
@import './fieldset/index';
|
||||
@import './title/index';
|
||||
@import './jumbotron/index';
|
||||
|
||||
Reference in New Issue
Block a user