mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
Add pictures
This commit is contained in:
afc163
parent
d3fe6380df
commit
ca2edd2b1d
@ -11,7 +11,7 @@
|
||||
|
||||
## 设计理念
|
||||
|
||||
<div class="row demo-row" >
|
||||
<div class="row demo-row">
|
||||
<div class="col-24 demo-col demo-col-1">
|
||||
100%
|
||||
</div>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
### 交互
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" description="在收起状态时，用户点击“高级搜索”展开；如果此前用户已经输入过文案，需要将值带到对应的输入框中。" src="https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png">
|
||||
|
||||
常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。
|
||||
|
||||
@ -19,39 +19,35 @@
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
|
||||
|
||||
当已经输入了值的“高级搜索”被隐藏时，需要展示检索条件和值。
|
||||
|
||||
### 排列规则
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png">
|
||||
|
||||
搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。
|
||||
|
||||
### 规格
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png">
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png">
|
||||
|
||||
- 横向排版
|
||||
在一行不要放置3列以上的输入框；标签和输入框应该落在栅格上。
|
||||
在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。
|
||||
- 纵向排版
|
||||
使用16px作为间距。
|
||||
使用 `16px` 作为间距。
|
||||
|
||||
|
||||
## 字段型
|
||||
|
||||
### 交互
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/dWLomHNPHuTZHGN.png">
|
||||
|
||||
字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。
|
||||
|
||||
|
||||
## 案例
|
||||
|
||||
高级搜索和表格配合使用的案例。
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
## 案例（敬请期待）
|
||||
|
||||
@ -11,42 +11,42 @@
|
||||
|
||||
### 多列数据
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/QZGYpJVtsTwFPmj.png">
|
||||
|
||||
通过按钮，可实现更多列数据的加载以及左右切换。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/zWUjQRpJZhYsZbY.png">
|
||||
|
||||
提供用户自定义列的功能，方便用户查看需要的列。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/UOTwZLweENvwlnL.png">
|
||||
|
||||
固定表头列，通过横向滚动条来查看剩余内容。
|
||||
|
||||
### 带图标的表格
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OWEXWoGlsqyhVBB.png">
|
||||
|
||||
通过图标强化信息的传递，适用在表达数据变化趋势。
|
||||
|
||||
### 带图表的表格
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/znVwTXxQpXuVqPl.png">
|
||||
|
||||
通过图表来强化信息的传递，适用在表达数据变化趋势。
|
||||
|
||||
### 二维表格
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/RQvqwEkXpHaFago.png">
|
||||
|
||||
横向和纵向各一个标题来展现数据。
|
||||
|
||||
### 小表格
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/dMxxUThciHFQyXS.png">
|
||||
|
||||
适用在卡片、弹出框等空间较小的场景中。
|
||||
|
||||
@ -25,14 +25,14 @@
|
||||
|
||||
## 内容
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/ZYPgWZsYBRCixGg.png">
|
||||
|
||||
通常表单会有四个部分组成。
|
||||
|
||||
1. 标签。
|
||||
2. 输入框。
|
||||
3. 动作。
|
||||
4. 校验反馈。
|
||||
1. 标签
|
||||
2. 输入框
|
||||
3. 动作
|
||||
4. 校验反馈
|
||||
|
||||
> 注：`*` 表明该项为必填项。
|
||||
|
||||
@ -40,39 +40,50 @@
|
||||
|
||||
### 填空
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="填空示例" src="https://os.alipayobjects.com/rmsportal/SdzCTaevNMvJFBR.png">
|
||||
|
||||
在一种描述性的上下文中出现输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。
|
||||
|
||||
### 组合输入框
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="组合输入框示例" src="https://os.alipayobjects.com/rmsportal/waStvhMnuoqqsCE.png">
|
||||
|
||||
当两个输入框关联性很强时，可以前后拼接，减少页面空间。
|
||||
|
||||
### 对齐方式
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="对齐方式示例" src="https://os.alipayobjects.com/rmsportal/cjHTEtXFxUSdHnE.png">
|
||||
|
||||
在页面设计表单时，按钮组必须和输入框左对齐。
|
||||
|
||||
### 禁用主按钮
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png" good>
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png" bad>
|
||||
|
||||
当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="未达字符标准时，主按钮禁用状态" src="https://os.alipayobjects.com/rmsportal/VabHKlbouFxSQXz.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="达到字符标准时，主按钮可用状态" src="https://os.alipayobjects.com/rmsportal/usdFxJmWDawqUuq.png">
|
||||
|
||||
当输入框非常少时，用户一输入就会有反馈，因而主按钮的禁用规则非常清晰，容易被用户理解。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="不禁用示例" src="https://os.alipayobjects.com/rmsportal/BwFnQjZkHtigQGd.png">
|
||||
|
||||
当输入框非常多时（尤其是输入项中交叉了必填项和非必填项），整个反馈链路冗长又复杂，禁用规则难以被识别，容易引起困惑。
|
||||
|
||||
### 结构化的格式
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="输入格式化的数据" src="https://os.alipayobjects.com/rmsportal/SQgGfreRAqPZPsm.png">
|
||||
|
||||
用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。
|
||||
|
||||
### 输入提示 & 输入提醒
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="输入提示" description="在输入框激活后，输入提示一直出现至该输入框失去焦点。" src="https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png">
|
||||
<img class="preview-img" align="right" alt="输入提醒" description="在输入框激活后，输入提醒不要马上消失，等用户完成第一个词输入后再消失。" src="https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png">
|
||||
|
||||
输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。
|
||||
|
||||
@ -80,40 +91,31 @@
|
||||
|
||||
### 密码加强计
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="密码强度" src="https://os.alipayobjects.com/rmsportal/wKpOgeyyoOUeCrk.png">
|
||||
|
||||
提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。
|
||||
|
||||
### 校验
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="输入时的实时校验" src="https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png">
|
||||
<img class="preview-img" align="right" alt="输入框失去焦点后的校验" src="https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="点击『提交』后，系统将处理结果直接在页面上进行反馈（统计错误数量和标记错误内容）。" src="https://os.alipayobjects.com/rmsportal/xSxzKxNMqQyIcXr.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
|
||||
通过不同的“校验”规则和形式进行反馈，避免用户在点击提交后才刚刚开始“校验”，让用户提前纠正错误。
|
||||
通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。
|
||||
|
||||
### 字数校验框
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="字数校验框示例" retina src="https://os.alipayobjects.com/rmsportal/ziTMevqClLTYagX.png">
|
||||
|
||||
用于统计当前输入长度，以及是否超过系统阈值。
|
||||
|
||||
### 容错格式
|
||||
### 容错格式（敬请期待）
|
||||
|
||||
待补充。
|
||||
### 自动完成（敬请期待）
|
||||
|
||||
### 自动完成
|
||||
### 列表构造器（敬请期待）
|
||||
|
||||
待补充。
|
||||
### 良好的默认值（敬请期待）
|
||||
|
||||
### 列表构造器
|
||||
|
||||
待补充。
|
||||
|
||||
### 良好的默认值
|
||||
|
||||
待补充。
|
||||
## 规格（敬请期待）
|
||||
|
||||
@ -17,100 +17,86 @@
|
||||
|
||||
### 显示详情信息
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="气泡显示示例" src="https://os.alipayobjects.com/rmsportal/WQDeiqTIDGFGnOQ.png">
|
||||
|
||||
气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。
|
||||
|
||||
使用“点击”触发时，应当保证激活／禁用的对称性，即在哪里打开，就在哪里关闭；另外。也支持用户点击空白区域关闭。
|
||||
|
||||
使用“悬停”触发时，移入时设计约 0.5 秒的延时，然后激活详情气泡；移出时，立即关闭详情气泡。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="列表嵌入示例1" src="https://os.alipayobjects.com/rmsportal/WIoplWDRZspuuhD.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="列表嵌入示例2" src="https://os.alipayobjects.com/rmsportal/tNAnTEaZtswRknD.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="列表嵌入示例3" src="https://os.alipayobjects.com/rmsportal/MXXjEoLdnBxqcne.png">
|
||||
|
||||
列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/iVbJiWqvXIswNWP.png">
|
||||
|
||||
弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/hEGPuWWOEvvbZLw.png">
|
||||
|
||||
双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/JRuDZoiPEskztoi.png">
|
||||
|
||||
单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。
|
||||
|
||||
### 显示更多文本
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/wWcixIvqaFXfTHd.png">
|
||||
|
||||
宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" noPadding src="https://os.alipayobjects.com/rmsportal/VDhwGyyblTSJpeV.png">
|
||||
|
||||
对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。
|
||||
|
||||
### 显示图片
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" noPadding src="https://os.alipayobjects.com/rmsportal/hKtAKuDfyfDpPrL.png">
|
||||
|
||||
走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" noPadding src="https://os.alipayobjects.com/rmsportal/LAnBHEYiqWSfQAS.png">
|
||||
|
||||
缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。
|
||||
|
||||
### 显示长列表
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" description="当系统性能是一个主要考虑因素时，适合使用分页器。" src="https://os.alipayobjects.com/rmsportal/aZwrmpnaIEoxiXJ.png">
|
||||
|
||||
分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" description="当需要对数据进行频繁操作时，分页器会导致操作变的笨拙，尤其是出现一些跨页选择时，所以适合用无限加载；当倾向显示用户的“个人所有”的数据时（例如：个人订单），或者数据不是临时性的，适合使用无限加载。" src="https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png">
|
||||
|
||||
无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。
|
||||
|
||||
### 显示分类或者层级的列表
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="两层折叠面板示例" src="https://os.alipayobjects.com/rmsportal/efRpmejABrXjiwF.png">
|
||||
|
||||
两层结构。
|
||||
<img class="preview-img" align="right" alt="多层折叠面板示例" src="https://os.alipayobjects.com/rmsportal/bXwBcaLQPAWTIQV.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="两层折叠面板表格" src="https://os.alipayobjects.com/rmsportal/XaJeuLfHeSSXCJq.png">
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
多层结构。
|
||||
|
||||
<br />
|
||||
|
||||
## 案例
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
功能可有批操作，升序降序，分页，单条操作。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
列表各项的合并、详情展开。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
卡片网格。
|
||||
## 案例（敬请期待）
|
||||
|
||||
@ -40,14 +40,16 @@
|
||||
|
||||
## 侧栏导航
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
---
|
||||
|
||||
<img class="preview-img" noPadding align="right" src="https://os.alipayobjects.com/rmsportal/fHxLgTBlEJhYsIA.png">
|
||||
|
||||
导航的结构由以下几部分组成。
|
||||
|
||||
1. 产品 Logo 和名称。
|
||||
2. 业务类目。
|
||||
3. 登陆工具。
|
||||
4. 面包屑（可选）。
|
||||
1. 产品 Logo 和名称
|
||||
2. 业务类目
|
||||
3. 登陆工具
|
||||
4. 面包屑（可选）
|
||||
|
||||
> 注：
|
||||
> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时；
|
||||
@ -58,20 +60,18 @@
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" noPadding align="right" alt="一级类目" src="https://os.alipayobjects.com/rmsportal/GsVlBheKLGHCRLe.png">
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" noPadding align="right" alt="多级类目展开" src="https://os.alipayobjects.com/rmsportal/qaOifucSTWooBTL.png">
|
||||
|
||||
我们定义了不同类目层级所对应的导航样式。
|
||||
|
||||
|
||||
## 顶部导航
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
---
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" noPadding align="right" alt="顶部导航结构" src="https://os.alipayobjects.com/rmsportal/KvEsIDOYzknbsPT.png">
|
||||
|
||||
结构如右图所示：
|
||||
|
||||
@ -82,10 +82,8 @@
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" noPadding align="right" alt="二级类目" src="https://os.alipayobjects.com/rmsportal/xXaCRVPIfmjDyIL.png">
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" noPadding align="right" alt="四级类目" src="https://os.alipayobjects.com/rmsportal/ollkHeFUFQElelm.png">
|
||||
|
||||
不同类目层级。
|
||||
|
||||
@ -9,43 +9,45 @@
|
||||
|
||||
## 内容
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
通常表格的组成元素以及相关元素会有，这几部分组成。
|
||||
|
||||
1. 按钮组。
|
||||
2. 搜索条件。
|
||||
3. 筛选。
|
||||
4. 排序。
|
||||
5. 状态点。
|
||||
6. 单行操作。
|
||||
7. 分页器／无限加载（可选）。
|
||||
1. 按钮组
|
||||
2. 搜索条件
|
||||
3. 筛选
|
||||
4. 排序
|
||||
5. 状态点
|
||||
6. 单行操作
|
||||
7. 分页器／无限加载（可选）
|
||||
|
||||
### 筛选
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/YRcnmAFUvcfMlpN.png">
|
||||
|
||||
当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。
|
||||
|
||||
### 状态点
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="状态示例" src="https://os.alipayobjects.com/rmsportal/EYmtSshUxKydwns.png">
|
||||
|
||||
一般用四种颜色来表明系统的不同状态。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="多列状态示例" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
当一个表格中出现两项需要强化的状态时，可以弱化其中一项，通过文字颜色的变化来进行强化。
|
||||
|
||||
### 更多操作
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="依次分别为：完整内容、暂时不可用、没有该权限。" src="https://os.alipayobjects.com/rmsportal/ZlcZDOZNZpYQcMM.png">
|
||||
|
||||
该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。
|
||||
|
||||
### 跳转至详情
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="名称跳转示例" src="https://os.alipayobjects.com/rmsportal/tfJiUmrUJRzBlzt.png">
|
||||
|
||||
把ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。
|
||||
|
||||
@ -54,7 +56,7 @@
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="查看跳转示例" src="https://os.alipayobjects.com/rmsportal/zjDqNVTzSrzXaWg.png">
|
||||
|
||||
在操作中增加一列『查看』，点击后进行跳转至详情。
|
||||
|
||||
@ -69,64 +71,74 @@
|
||||
|
||||
### 显示非常长的表格
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" description="当系统性能是一个主要考虑因素时，适合使用分页器。" src="https://os.alipayobjects.com/rmsportal/ehDKShrNveYpTFK.png">
|
||||
|
||||
分页器：以分段的形式加载表格，将是否需要加载其他项的选择权交给用户。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" description="当需要对数据进行频繁操作时，分页器会导致操作变的笨拙，尤其是出现一些跨页选择时，所以适合用无限加载；当倾向显示用户的“个人所有”的数据时（例如：个人订单），或者数据不是临时性的，适合使用无限加载。" src="https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png">
|
||||
|
||||
无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。
|
||||
|
||||
### 全选数据
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/QqafGErOPnuDKyy.png">
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut.png">
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym.png">
|
||||
|
||||
当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。
|
||||
|
||||
### 跨页选数据
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="状态一：选中一行数据" src="https://os.alipayobjects.com/rmsportal/OcIWSystreURrPV.png">
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="状态二：切换分页后，记录所选的项目" src="https://os.alipayobjects.com/rmsportal/HuzwUWDzXszOkEI.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="状态三：在其他页中再选择一项，多记录一项选择" src="https://os.alipayobjects.com/rmsportal/yCjrxTSElzNUsFn.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="状态四：用户可以在记录条直接取消选择" src="https://os.alipayobjects.com/rmsportal/jtepHsDPApPnQlD.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="状态五：表格选择框同步取消选择" src="https://os.alipayobjects.com/rmsportal/OAVQZqxPyuAWvTh.png">
|
||||
|
||||
当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。
|
||||
|
||||
### 固定按钮组
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="顶部固定按钮" src="https://os.alipayobjects.com/rmsportal/AhgnVIhTIvtHpok.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="底部固定按钮" src="https://os.alipayobjects.com/rmsportal/hUHidNAJczLRVCg.png">
|
||||
|
||||
用在表格行数很多时（一般多于20行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。
|
||||
|
||||
### 某一项内容过长
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/vgNHOYAiuQbXCOi.png">
|
||||
|
||||
某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。
|
||||
|
||||
### 模块编辑
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/mUhSLOTjzGYTQaE.png">
|
||||
|
||||
适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。
|
||||
|
||||
### 直接编辑
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/VgvZjqTZBuAfGuO.png">
|
||||
|
||||
适用在易编辑性高于易读性时。
|
||||
|
||||
### 悬浮层编辑
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/QhIyXeNxAZEaLjT.png">
|
||||
|
||||
悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。
|
||||
|
||||
|
||||
## 规格
|
||||
## 规格（敬请期待）
|
||||
|
||||
### 行高
|
||||
|
||||
@ -154,26 +166,4 @@
|
||||
数值右对齐，其余左对齐。
|
||||
|
||||
|
||||
## 案例
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
- 基础表格
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
- 合并单元格
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
- 可内嵌表格
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
- 编辑表格
|
||||
## 案例（敬请期待）
|
||||
|
||||
@ -15,9 +15,9 @@ Ant Design 是面向中后台的 UI 设计语言。
|
||||
|
||||
### 金融云
|
||||
|
||||
<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/UkUJgmsRKhxwvSR.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/SeXqPPyixccDJBY.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
|
||||
<img as-cover class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/UkUJgmsRKhxwvSR.png">
|
||||
<img class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/SeXqPPyixccDJBY.png">
|
||||
<img class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
|
||||
|
||||
是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
|
||||
|
||||
@ -27,9 +27,9 @@ Ant Design 是面向中后台的 UI 设计语言。
|
||||
|
||||
### OceanBase Cloud Platform
|
||||
|
||||
<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/StdoWgtFplToSgd.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/lpzTKvgLpJgKGpq.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/GVJGaWbqfBFedWN.png">
|
||||
<img as-cover class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/StdoWgtFplToSgd.png">
|
||||
<img class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/lpzTKvgLpJgKGpq.png">
|
||||
<img class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/GVJGaWbqfBFedWN.png">
|
||||
|
||||
OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
|
||||
|
||||
@ -37,11 +37,11 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce
|
||||
|
||||
### 服务宝体验平台
|
||||
|
||||
<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/khisYONMFbBTOdh.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/vsoYArBwcPRZnVE.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/TMyfsUGQSjOdGIm.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/sBlmIcJXZdJTJbC.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/fRDuTjVbVApxyzU.png">
|
||||
<img as-cover class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/khisYONMFbBTOdh.png">
|
||||
<img class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/vsoYArBwcPRZnVE.png">
|
||||
<img class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/TMyfsUGQSjOdGIm.png">
|
||||
<img class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/sBlmIcJXZdJTJbC.png">
|
||||
<img class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/fRDuTjVbVApxyzU.png">
|
||||
|
||||
体验平台是将用户与公司所有的接触点包括来电咨询／微博等渠道数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，推动体验问题解决，实现良性运转流。
|
||||
|
||||
@ -49,9 +49,9 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce
|
||||
|
||||
### AntV
|
||||
|
||||
<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/yWNVSFBhKsoShvi.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/nvJftlNzfzhVDVW.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/LugOCvzybKsmQCj.png">
|
||||
<img as-cover class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/yWNVSFBhKsoShvi.png">
|
||||
<img class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/nvJftlNzfzhVDVW.png">
|
||||
<img class="preview-img" width="444" align="right" src="https://os.alipayobjects.com/rmsportal/LugOCvzybKsmQCj.png">
|
||||
|
||||
AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来，并用分享给所有需要数据可视理论的人。
|
||||
|
||||
|
||||
@ -107,6 +107,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
|
||||
margin-top: -42px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -173,16 +173,21 @@ const PriviewImg = React.createClass({
|
||||
src: this.props.src,
|
||||
alt: this.props.alt,
|
||||
}];
|
||||
const imgStyle = {};
|
||||
if (this.props.noPadding) {
|
||||
imgStyle.padding = '0';
|
||||
imgStyle.background = 'none';
|
||||
}
|
||||
const current = this.state.current;
|
||||
return (
|
||||
<div className="preview-image-box" style={{ width: this.props.width }}>
|
||||
<div className={`preview-image-wrapper ${goodCls} ${badCls}`}>
|
||||
<img src={this.props.src} onClick={this.showImageModal} alt="Sample Picture" />
|
||||
<img src={this.props.src} onClick={this.showImageModal} style={imgStyle} alt="Sample Picture" />
|
||||
</div>
|
||||
<div className="preview-image-title">{this.props.alt}</div>
|
||||
<div className="preview-image-description">{this.props.description}</div>
|
||||
<Modal className="image-modal" width="960" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
|
||||
<Carousel afterChange={this.handleImgChange} adaptiveHeight>
|
||||
<Carousel afterChange={this.handleImgChange} adaptiveHeight arrows>
|
||||
{
|
||||
imgsPack.map((img, i) =>
|
||||
<div key={i}>
|
||||
@ -194,7 +199,6 @@ const PriviewImg = React.createClass({
|
||||
}
|
||||
</Carousel>
|
||||
<div className="preview-image-title">{imgsPack[current].alt}</div>
|
||||
<a className="outside-link" href={imgsPack[current].src} target="_blank">查看原图</a>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
@ -225,8 +229,9 @@ InstantClickChangeFns.push(function() {
|
||||
} else {
|
||||
priviewImgNodes.each(function(i, img) {
|
||||
priviewImgs.push(
|
||||
<PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'}
|
||||
alt={img.alt} good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} />
|
||||
<PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'} alt={img.alt}
|
||||
noPadding={img.hasAttribute('noPadding')} description={img.getAttribute('description')}
|
||||
good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} />
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
@ -1257,8 +1257,7 @@ a.entry-link:hover .anticon-smile {
|
||||
.preview-image-boxes {
|
||||
float: right;
|
||||
margin: 0 0 30px 60px;
|
||||
width: 600px;
|
||||
overflow: hidden;
|
||||
width: 616px;
|
||||
}
|
||||
|
||||
.preview-image-box {
|
||||
@ -1267,17 +1266,9 @@ a.entry-link:hover .anticon-smile {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.preview-image-box:first-child {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.preview-image-box:last-child {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
.preview-image-wrapper {
|
||||
background: #F2F2F2;
|
||||
padding: 24px;
|
||||
background: #f4f4f4;
|
||||
padding: 16px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
@ -1308,24 +1299,28 @@ a.entry-link:hover .anticon-smile {
|
||||
|
||||
.preview-image-title {
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
margin-top: 5px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.preview-image-description {
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
margin-top: 2px;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.preview-image-box img {
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
transition: box-shadow 0.3s ease;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.preview-image-box img:hover {
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.outside-link:after {
|
||||
@ -1341,6 +1336,7 @@ a.entry-link:hover .anticon-smile {
|
||||
|
||||
.image-modal-container {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-modal .ant-modal-header {
|
||||
@ -1368,12 +1364,59 @@ a.entry-link:hover .anticon-smile {
|
||||
transform: translateX(-50%);;
|
||||
}
|
||||
|
||||
.image-modal .slick-prev {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.image-modal .slick-prev:after {
|
||||
content: "\e601";
|
||||
font-size: 28px;
|
||||
font-family: "anticon";
|
||||
color: #000;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.image-modal .slick-prev:hover:after {
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.image-modal .slick-next {
|
||||
right: 0;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.image-modal .slick-next:after {
|
||||
content: "\e600";
|
||||
font-size: 28px;
|
||||
font-family: "anticon";
|
||||
color: #000;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.image-modal .slick-next:hover:after {
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.image-modal .outside-link {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 12px;
|
||||
}
|
||||
|
||||
.image-modal img {
|
||||
width: 100%;
|
||||
.image-modal .ant-carousel .slick-slide img {
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user