You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.6 KiB
Markdown
61 lines
1.6 KiB
Markdown
10 years ago
|
# Input group
|
||
|
|
||
|
- order: 9
|
||
|
|
||
|
输入框组合
|
||
|
|
||
|
|
||
|
|
||
|
---
|
||
|
|
||
|
````html
|
||
|
<h4>带标签的输入框</h4>
|
||
|
<div class="ant-input-group">
|
||
|
<span class="ant-input-group-addon" id="basic-addon1">Http://</span>
|
||
|
<input type="text" class="ant-input" placeholder="Username">
|
||
|
</div>
|
||
|
<br>
|
||
|
<div class="ant-input-group">
|
||
|
<input type="text" class="ant-input" placeholder="Username">
|
||
|
<span class="ant-input-group-addon" id="basic-addon1">.com</span>
|
||
|
</div>
|
||
|
<br>
|
||
|
<div class="ant-input-group">
|
||
|
<span class="ant-input-group-addon" id="basic-addon1">Http://</span>
|
||
|
<input type="text" class="ant-input" placeholder="Username">
|
||
|
<span class="ant-input-group-addon" id="basic-addon1">.com</span>
|
||
|
</div>
|
||
|
|
||
|
<h4>作为额外元素的按钮式下拉菜单</h4>
|
||
|
<div class="ant-input-group">
|
||
|
<input type="text" class="ant-input" placeholder="Search for...">
|
||
|
<div class="ant-input-group-btn">
|
||
|
<button class="input-btn" type="button">
|
||
|
<span>.com</span>
|
||
|
<i class="anticon anticon-down"></i>
|
||
|
</button>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<h4>带按钮的菜单</h4>
|
||
|
<div class="ant-input-group">
|
||
|
<input type="text" class="ant-input" placeholder="Search for...">
|
||
|
<div class="ant-input-group-btn">
|
||
|
<button class="input-btn" type="button">Go!</button>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<h4>微调输入框</h4>
|
||
|
<div class="ant-input-group">
|
||
|
<input type="text" class="ant-input" placeholder="请输入数字">
|
||
|
<div class="ant-input-group-btn-vertical">
|
||
|
<button class="input-btn" type="button">
|
||
|
<i class="anticon anticon-up"></i>
|
||
|
</button>
|
||
|
<button class="input-btn" type="button">
|
||
|
<i class="anticon anticon-down"></i>
|
||
|
</button>
|
||
|
</div>
|
||
|
</div>
|
||
|
````
|