mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
upgrade ant-ux link
This commit is contained in:
parent
d4a65d14ba
commit
2381b78af2
@ -15,11 +15,11 @@
|
||||
|
||||
常规型常和表格搭配使用,适合在搜索条件多以及搜索值个数不确定的场景中。
|
||||
|
||||
『高级搜索』功能一般开放给中间用户/专家用户使用,一般通过点击高级搜索』触发;如果非常高频使用,可以默认展开『高级搜索』。
|
||||
『高级搜索』功能一般开放给中间用户/专家用户使用,一般通过点击『高级搜索』触发;如果非常高频使用,可以默认展开『高级搜索』。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="交互示例" description="在『高级搜索』顶部放置 Alert ,用于展现已经输入的值;用户点击『清空』可以清空所有输入值;点击『高级搜索』可以再次展开高级搜索。" src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
|
||||
<img class="preview-img" align="right" alt="交互示例" description="在『高级搜索』顶部放置 Alert ,用于展现已经输入的值;用户点击『清空』可以清空所有输入值;点击『高级搜索』可以再次展开『高级搜索』。" src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
|
||||
|
||||
当已经输入了值的『高级搜索』被隐藏时,需要展示检索条件和值。
|
||||
|
||||
|
@ -17,7 +17,7 @@
|
||||
|
||||
### 显示详情信息
|
||||
|
||||
<img class="preview-img" align="right" alt="气泡显示示例" description="使用“点击”触发时,应当保证激活/禁用的对称性,即在哪里打开,就在哪里关闭;另外。也支持用户点击空白区域关闭。<hr>使用“悬停”触发时,移入时设计约 0.5 秒的延时,然后激活详情气泡;移出时,立即关闭详情气泡。" src="https://os.alipayobjects.com/rmsportal/WQDeiqTIDGFGnOQ.png">
|
||||
<img class="preview-img" align="right" alt="气泡显示示例" description="使用『点击』触发时,应当保证激活/禁用的对称性,即在哪里打开,就在哪里关闭;另外。也支持用户点击空白区域关闭。<hr>使用『悬停』触发时,移入时设计约 0.5 秒的延时,然后激活详情气泡;移出时,立即关闭详情气泡。" src="https://os.alipayobjects.com/rmsportal/WQDeiqTIDGFGnOQ.png">
|
||||
|
||||
气泡显示:用户鼠标点击/悬停某个链接或内容时,在悬浮层上显示该条列表项少量的详情信息。
|
||||
|
||||
|
@ -13,7 +13,7 @@
|
||||
|
||||
## 常见导航
|
||||
|
||||
<Table style="font-size:12px;float:right;width:600px;margin-left:60px;">
|
||||
<Table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>侧栏导航</th>
|
||||
@ -76,7 +76,7 @@
|
||||
|
||||
<img class="preview-img" noPadding align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/KvEsIDOYzknbsPT.png">
|
||||
|
||||
结构如右图所示:
|
||||
导航的结构由以下几部分组成。
|
||||
|
||||
1. 产品 Logo 和名称
|
||||
2. 业务类目
|
||||
|
@ -71,9 +71,9 @@
|
||||
|
||||
<img class="preview-img" align="right" alt="状态一" src="https://os.alipayobjects.com/rmsportal/QqafGErOPnuDKyy.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="点击 Table 顶部的复选框,出现『Alert』" src="https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym.png">
|
||||
<img class="preview-img" align="right" alt="状态二" description="点击 Table 顶部的复选框,出现『Alert』" src="https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="点击『选择全部』" src="https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut.png">
|
||||
<img class="preview-img" align="right" alt="状态三" description="点击『选择全部』后" src="https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut.png">
|
||||
|
||||
当使用了分页器,又想实现全选数据的功能,可以结合『Alert』来实现。
|
||||
|
||||
|
@ -28,6 +28,13 @@
|
||||
<span class="resource-card-description">强大的 Ant Design 组件拼装方式</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" href="http://ux.ant.design" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/yfTqrQuSKcqBDLY.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Ant UX</span>
|
||||
<span class="resource-card-description">一套页面逻辑原型库,帮你梳理页面逻辑</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" class="resource-card disabled">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/CxXbSpIXckHOtWl.png">
|
||||
<span class="resource-card-content">
|
||||
@ -35,13 +42,6 @@
|
||||
<span class="resource-card-description">一个机智的设计资源共享工具</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" class="resource-card disabled">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/yfTqrQuSKcqBDLY.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Ant UX</span>
|
||||
<span class="resource-card-description">一套页面逻辑原型库,帮你梳理页面逻辑</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.resource-card {
|
||||
|
@ -87,7 +87,7 @@ ReactDOM.render((
|
||||
style={{transform: 'translateX(-100px)', opacity: 0}}/>
|
||||
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}}>
|
||||
<h2 key="h2">丰富的基础组件</h2>
|
||||
<p key="p" style={{maxWidth: 280}}>大量灵活实用的基础组件,为业务产品提供强有力的设计支持。</p>
|
||||
<p key="p" style={{maxWidth: 280}}>丰富、灵活、实用的基础组件,为业务产品提供强有力的设计支持。</p>
|
||||
<div key="button"><Button type="primary" size="large"
|
||||
onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon
|
||||
type="right"/></Button></div>
|
||||
|
Loading…
Reference in New Issue
Block a user