Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
知鸟1号
tabler
提交
1f88b128
T
tabler
项目概览
知鸟1号
/
tabler
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
tabler
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
1f88b128
编写于
2月 16, 2020
作者:
C
codecalm
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
form docs
上级
e898aa7d
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
73 addition
and
119 deletion
+73
-119
pages/_docs/form-elements.md
pages/_docs/form-elements.md
+73
-119
未找到文件。
pages/_docs/form-elements.md
浏览文件 @
1f88b128
...
...
@@ -13,6 +13,44 @@ bootstrap-link: components/forms/
{% include example.html code=code %}
## Form control rounded
{% capture code %}
<div
class=
"mb-3"
>
<label
class=
"form-label"
>
Form control rounded
</label>
<input
type=
"text"
class=
"form-control form-control-rounded mb-2"
name=
"Form control rounded"
placeholder=
"Text.."
>
{% include ui/form/input-icon.html input-class="form-control-rounded" %}
</div>
{% endcapture %}
{% include example.html code=code %}
## Form control flush
{% capture code %}
<div
class=
"mb-3"
>
<label
class=
"form-label"
>
Form control flush
</label>
<input
type=
"text"
class=
"form-control form-control-flush"
name=
"Form control flush"
placeholder=
"Text.."
>
</div>
{% endcapture %}
{% include example.html code=code %}
## Input with icon
{% capture code %}
{% include parts/form/input-icon.html %}
{% endcapture %}
{% include example.html code=code %}
## Separated inputs
{% capture code %}
{% include parts/form/input-icon-separated.html %}
{% endcapture %}
{% include example.html code=code %}
## Textarea and select
{% capture code %}
...
...
@@ -88,6 +126,15 @@ bootstrap-link: components/forms/
{% include example.html code=code %}
## Advanced selectboxes
{% capture code %}
{% include parts/form/selectgroup-payments.html %}
{% include parts/form/selectgroup-project-manager.html %}
{% endcapture %}
{% include example.html code=code %}
## Toggle switches
{% capture code %}
...
...
@@ -123,7 +170,7 @@ bootstrap-link: components/forms/
{% include example.html code=code %}
##
Sample form
##
Fieldset
{% capture code %}
{% include parts/form/fieldset.html %}
...
...
@@ -134,148 +181,55 @@ bootstrap-link: components/forms/
## Input group
{% capture code %}
<div
class=
"mb-2"
>
<label
class=
"form-label"
>
Input group
</label>
<div
class=
"input-group"
>
<input
type=
"text"
class=
"form-control"
placeholder=
"Search for…"
>
<span
class=
"input-group-append"
>
<button
class=
"btn btn-primary"
type=
"button"
>
Go!
</button>
</span>
</div>
<div
class=
"mb-3"
>
<label
class=
"form-label"
>
Input group
</label>
{% include ui/form/input-group.html prepend="@" placeholder="username" class="mb-2" %}
{% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" class="mb-2" %}
{% include ui/form/input-group.html prepend="https://" append=".tabler.io" placeholder="subdomain" %}
</div>
<div
class=
"mb-2"
>
<label
class=
"form-label"
>
Input group buttons
</label>
<div
class=
"input-group"
>
<input
type=
"text"
class=
"form-control"
>
<div
class=
"input-group-append"
>
<button
type=
"button"
class=
"btn btn-primary"
>
Action
</button>
<button data-toggle="dropdown" type="button"
class="btn btn-primary dropdown-toggle">
</button>
<div
class=
"dropdown-menu dropdown-menu-right"
>
<a
class=
"dropdown-item"
href=
"#"
>
News
</a>
<a
class=
"dropdown-item"
href=
"#"
>
Messages
</a>
<div
class=
"dropdown-divider"
></div>
<a
class=
"dropdown-item"
href=
"#"
>
Edit Profile
</a>
</div>
</div>
</div>
</div>
{% endcapture %}
{% include example.html code=code %}
## Input with icon
{% capture code %}
{% include parts/form/input-icon.html %}
{% endcapture %}
{% include example.html code=code %}
##
Separated input
s
##
Input with checkbox or radio
s
{% capture code %}
{% include parts/form/input-icon-separated.html %}
<div
class=
"mb-3"
>
<label
class=
"form-label"
>
Input with checkbox or radios
</label>
{% include ui/form/input-group.html prepend="checkbox" class="mb-2" %}
{% include ui/form/input-group.html append="radio" %}
</div>
{% endcapture %}
{% include example.html code=code %}
## Custom Input examples
## Input with prepended or appended text
{% capture code %}
<div
class=
"mb-2"
>
<label
class=
"form-label"
>
Username
</label>
{% include ui/form/input-group.html prepend="@" placeholder="username" %}
</div>
<div
class=
"mb-2"
>
<label
class=
"form-label"
>
Subdomain
</label>
{% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" %}
</div>
<div
class=
"mb-2"
>
<label
class=
"form-label"
>
Your vanity URL
</label>
{% include ui/form/input-group.html prepend="https://tabler.io/users/" %}
</div>
<div
class=
"mb-2"
>
<label
class=
"form-label"
>
Price
</label>
{% include ui/form/input-group.html prepend="$" append=".00" %}
<div
class=
"mb-3"
>
<label
class=
"form-label"
>
Input with prepended text
</label>
{% include ui/form/input-group.html prepend="https://tabler.io/users/" flat=true input-class="pl-0" value="yourfancyusername" class="mb-2" %}
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" flat=true value="yourfancydomain" %}
</div>
{% endcapture %}
{% include example.html code=code %}
## Date component
## Input with appended link
{% capture code %}
<div
class=
"mb-2"
>
<label
class=
"form-label"
>
Date of birth
</label>
<div
class=
"row row-sm"
>
<div
class=
"col-5"
>
<select
name=
"user[month]"
class=
"form-select"
>
<option
value=
""
>
Month
</option>
<option
value=
"1"
>
January
</option>
<option
value=
"2"
>
February
</option>
<option
value=
"3"
>
March
</option>
<option
value=
"4"
>
April
</option>
<option
value=
"5"
>
May
</option>
<option
selected=
"selected"
value=
"6"
>
June
</option>
<option
value=
"7"
>
July
</option>
<option
value=
"8"
>
August
</option>
<option
value=
"9"
>
September
</option>
<option
value=
"10"
>
October
</option>
<option
value=
"11"
>
November
</option>
<option
value=
"12"
>
December
</option>
</select>
</div>
<div
class=
"col-3"
>
<select
name=
"user[day]"
class=
"form-select"
>
<option
value=
""
>
Day
</option>
{% for i in (1..31) %}
<option
value=
"{{ i }}"
{%
if
i =
=
20
%}
selected
{%
endif
%}
>
{{ i }}
</option>
{% endfor %}
</select>
</div>
<div
class=
"col-4"
>
<select
name=
"user[year]"
class=
"form-select"
>
<option
value=
""
>
Year
</option>
{% for i in (1897..2014) reversed %}
<option
value=
"{{ i }}"
{%
if
i =
=
1989
%}
selected
{%
endif
%}
>
{{ i }}
</option>
{% endfor %}
</select>
</div>
</div>
<div
class=
"mb-3"
>
<label
class=
"form-label"
>
Input with appended link
</label>
{% include ui/form/input-group.html append-link="Show password" flat=true type="password" value="ultrastrongpassword" %}
</div>
{% endcapture %}
{% include example.html code=code %}
## Input with
button
## Input with
appended icon links
{% capture code %}
<div
class=
"mb-2"
>
<label
class=
"form-label"
>
Button input
</label>
<div
class=
"input-group"
>
<div
class=
"input-group-prepend"
>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Action
</button>
<div
class=
"dropdown-menu"
>
<a
class=
"dropdown-item"
href=
"#"
>
Action
</a>
<a
class=
"dropdown-item"
href=
"#"
>
Another action
</a>
<a
class=
"dropdown-item"
href=
"#"
>
Something else here
</a>
<div
role=
"separator"
class=
"dropdown-divider"
></div>
<a
class=
"dropdown-item"
href=
"#"
>
Separated link
</a>
</div>
</div>
<input
type=
"text"
class=
"form-control"
aria-label=
"Text input with dropdown button"
>
</div>
<div
class=
"mb-3"
>
<label
class=
"form-label"
>
Input with appended icon links
</label>
{% include ui/form/input-group.html append-button="x:Clear search,sliders:Search settings,bell:Add notification" flat=true %}
</div>
{% endcapture %}
{% include example.html code=code %}
{% include example.html code=code %}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录