Skip to content

Commit 68fd2a6

Browse files
prograpeprogrape
committed
update README.md
1 parent 36ac5d3 commit 68fd2a6

File tree

1 file changed

+4
-281
lines changed

1 file changed

+4
-281
lines changed

‎README.md‎

Lines changed: 4 additions & 281 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ WeUI 为微信 Web 服务量身设计 ![](https://travis-ci.org/weui/weui.svg?b
33

44
## 概述
55

6-
WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、 `progress`、 `toast`、`article`、`icon`等各式元素。
6+
WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、 `progress`、 `toast`、`article`、`actionsheet`、`icon`等各式元素。
77

88
## 使用
99

@@ -43,7 +43,7 @@ git clone https://github.com/weui/weui.git
4343
cd weui
4444
npm install -g gulp
4545
npm install
46-
gulp -ws
46+
npm start
4747
```
4848
运行`gulp -ws`命令，会监听`src`目录下所有文件的变更，并且默认会在`8080`端口启动服务器，然后在浏览器打开 `http://localhost:8080/example`。
4949

@@ -67,286 +67,9 @@ gulp -ws
6767
- [ZTfer/weui-sketch](https://github.com/ZTfer/weui-sketch)
6868
- [i5ting/weui-practice](https://github.com/i5ting/weui-practice)
6969

70-
## Button
70+
## 文档
7171

72-
按钮可以使用`a`或者`button`标签。wap上要触发按钮的active态，必须触发ontouchstart事件，可以在`body`上加上`ontouchstart=""`全局触发。
73-
74-
按钮常见的操作场景：确定、取消、警示，分别对应class：`weui_btn_primary`、`weui_btn_default`、`weui_btn_warn`，每种场景都有自己的置灰态`weui_btn_disabled`，除此外还有一种镂空按钮`weui_btn_plain_xxx`，客户端webview里的按钮尺寸有两类，默认宽度100%，小型按钮宽度自适应，两边边框与文本间距0.75em：
75-
76-
![](./dist/example/snapshot/button.png)
77-
78-
```html
79-
<a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a>
80-
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
81-
<a href="javascript:;" class="weui_btn weui_btn_warn">确认</a>
82-
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
83-
<a href="javascript:;" class="weui_btn weui_btn_default">按钮</a>
84-
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>
85-
<div class="button_sp_area">
86-
<a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮</a>
87-
<a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮</a>
88-
89-
<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
90-
<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
91-
</div>
92-
```
93-
94-
95-
## Cell
96-
97-
`Cell`，列表视图，用于将信息以列表的结构显示在页面上，是wap上最常用的内容结构。`Cell`由多个section组成，每个section包括section header`weui_cells_title`以及cells`weui_cells`。
98-
99-
`cell`由thumbnail`weui_cell_hd`、body`weui_cell_bd`、accessory`weui_cell_ft`三部分组成，`cell`采用自适应布局，在需要自适应的部分加上class`weui_cell_primary`即可：
100-
101-
![](./dist/example/snapshot/cell.png)
102-
103-
带说明的列表项
104-
105-
```html
106-
<div class="weui_cells_title">带说明的列表项</div>
107-
<div class="weui_cells">
108-
<div class="weui_cell">
109-
<div class="weui_cell_bd weui_cell_primary">
110-
<p>标题文字</p>
111-
</div>
112-
<div class="weui_cell_ft">
113-
说明文字
114-
</div>
115-
</div>
116-
</div>
117-
```
118-
119-
`Cell`可根据需要进行各种自定义扩展，包括辅助说明、跳转、单选、复选等。下面以带图标、说明、跳转的列表项，其他情况可以直接参考`example`下的代码：
120-
121-
```html
122-
<div class="weui_cells_title">带图标、说明、跳转的列表项</div>
123-
<div class="weui_cells weui_cells_access">
124-
125-
<a class="weui_cell" href="javascript:;">
126-
<div class="weui_cell_hd">
127-
<img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
128-
</div>
129-
<div class="weui_cell_bd weui_cell_primary">
130-
<p>cell standard</p>
131-
</div>
132-
<div class="weui_cell_ft">
133-
说明文字
134-
</div>
135-
</a>
136-
<a class="weui_cell" href="javascript:;">
137-
<div class="weui_cell_hd">
138-
<img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
139-
</div>
140-
<div class="weui_cell_bd weui_cell_primary">
141-
<p>cell standard</p>
142-
</div>
143-
<div class="weui_cell_ft">
144-
说明文字
145-
</div>
146-
</a>
147-
</div>
148-
```
149-
150-
151-
## Dialog
152-
153-
若系统的alert窗体无法满足网页的临时视图内容需求，则可以自定义实现与alert形式相似的dialog，并且在dialog中可以自定义地使用各种控件，来满足需求。
154-
155-
![](./dist/example/snapshot/dialog1.png)
156-
157-
```html
158-
<div class="weui_dialog_confirm">
159-
<div class="weui_mask"></div>
160-
<div class="weui_dialog">
161-
<div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
162-
<div class="weui_dialog_bd">自定义弹窗内容，居左对齐显示，告知需要确认的信息等</div>
163-
<div class="weui_dialog_ft">
164-
<a href="javascript:;" class="weui_btn_dialog default">取消</a>
165-
<a href="javascript:;" class="weui_btn_dialog primary">确定</a>
166-
</div>
167-
</div>
168-
</div>
169-
```
170-
171-
![](./dist/example/snapshot/dialog2.png)
172-
```html
173-
<div class="weui_dialog_alert">
174-
<div class="weui_mask"></div>
175-
<div class="weui_dialog">
176-
<div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
177-
<div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
178-
<div class="weui_dialog_ft">
179-
<a href="javascript:;" class="weui_btn_dialog primary">确定</a>
180-
</div>
181-
</div>
182-
</div>
183-
```
184-
185-
## Progress
186-
187-
progress用于上传、下载等耗时并且需要显示进度的场景，用户可以随时中断该操作。
188-
189-
![](./dist/example/snapshot/progress.png)
190-
191-
```html
192-
<div class="weui_progress">
193-
<div class="weui_progress_bar">
194-
<div class="weui_progress_inner_bar" style="width: 50%;"></div>
195-
</div>
196-
<a href="javascript:;" class="weui_progress_opr">
197-
<i class="weui_icon_cancel"></i>
198-
</a>
199-
</div>
200-
```
201-
202-
## Toast
203-
204-
toast用于临时显示某些信息，并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。
205-
206-
![](./dist/example/snapshot/toast1.png)
207-
208-
```html
209-
<div id="toast" style="display: none;">
210-
<div class="weui_mask_transparent"></div>
211-
<div class="weui_toast">
212-
<i class="weui_icon_toast"></i>
213-
<p class="weui_toast_content">已完成</p>
214-
</div>
215-
</div>
216-
```
217-
218-
![](./dist/example/snapshot/toast2.png)
219-
220-
```html
221-
<div id="loadingToast" class="weui_loading_toast" style="display:none;">
222-
<div class="weui_mask_transparent"></div>
223-
<div class="weui_toast">
224-
<div class="weui_loading">
225-
<!-- :) -->
226-
<div class="weui_loading_leaf weui_loading_leaf_0"></div>
227-
<div class="weui_loading_leaf weui_loading_leaf_1"></div>
228-
<div class="weui_loading_leaf weui_loading_leaf_2"></div>
229-
<div class="weui_loading_leaf weui_loading_leaf_3"></div>
230-
<div class="weui_loading_leaf weui_loading_leaf_4"></div>
231-
<div class="weui_loading_leaf weui_loading_leaf_5"></div>
232-
<div class="weui_loading_leaf weui_loading_leaf_6"></div>
233-
<div class="weui_loading_leaf weui_loading_leaf_7"></div>
234-
<div class="weui_loading_leaf weui_loading_leaf_8"></div>
235-
<div class="weui_loading_leaf weui_loading_leaf_9"></div>
236-
<div class="weui_loading_leaf weui_loading_leaf_10"></div>
237-
<div class="weui_loading_leaf weui_loading_leaf_11"></div>
238-
</div>
239-
<p class="weui_toast_content">数据加载中</p>
240-
</div>
241-
</div>
242-
```
243-
244-
## Msg Page
245-
246-
结果页通常来说可以认为进行一系列操作步骤后，作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节（可用于确认之前的操作是否有误）等信息；若该流程用于开启或关闭某些重要功能，可在结果页增加与该功能相关的描述性内容；除此之外，结果页也可以承载一些附加价值操作，例如提供抽奖、关注公众号等功能入口。
247-
248-
![](./dist/example/snapshot/result.png)
249-
250-
```html
251-
<div class="weui_msg">
252-
<div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
253-
<div class="weui_text_area">
254-
<h2 class="weui_msg_title">操作成功</h2>
255-
<p class="weui_msg_desc">内容详情，可根据实际需要安排</p>
256-
</div>
257-
<div class="weui_opr_area">
258-
<p class="weui_btn_area">
259-
<a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>
260-
<a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
261-
</p>
262-
</div>
263-
<div class="weui_extra_area">
264-
<a href="">查看详情</a>
265-
</div>
266-
</div>
267-
```
268-
269-
## Article
270-
271-
文字视图显示大段文字，这些文字通常是页面上的主体内容。`Article`支持分段、多层标题、引用、内嵌图片、有/无序列表等富文本样式，并可响应用户的选择操作。
272-
273-
在微信客户端webview中使用`Article`，必须保证文字有足够的可读性和可辨识性、使用规范字体、保证足够的段间距、段首无缩进。
274-
275-
![](./dist/example/snapshot/text.png)
276-
277-
```html
278-
<article class="weui_article">
279-
<h1>大标题</h1>
280-
<section>
281-
<h2 class="title">章标题</h2>
282-
<section>
283-
<h3>1.1 节标题</h3>
284-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
285-
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
286-
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
287-
consequat. Duis aute</p>
288-
</section>
289-
<section>
290-
<h3>1.2 节标题</h3>
291-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
292-
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
293-
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
294-
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
295-
</section>
296-
</section>
297-
</article>
298-
```
299-
## ActionSheet
300-
`ActionSheet`用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。
301-
302-
![](./dist/example/snapshot/actionSheet.png)
303-
304-
```html
305-
<div id="actionSheet_wrap">
306-
<div class="weui_mask_transition" id="mask"></div>
307-
<div class="weui_actionsheet" id="weui_actionsheet">
308-
<div class="weui_actionsheet_menu">
309-
<div class="weui_actionsheet_cell">示例菜单</div>
310-
<div class="weui_actionsheet_cell">示例菜单</div>
311-
<div class="weui_actionsheet_cell">示例菜单</div>
312-
<div class="weui_actionsheet_cell">示例菜单</div>
313-
</div>
314-
<div class="weui_actionsheet_action">
315-
<div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
316-
</div>
317-
</div>
318-
</div>
319-
```
320-
321-
## Icon
322-
323-
![](./dist/example/snapshot/icons.png)
324-
```html
325-
<i class="weui_icon_msg weui_icon_success"></i>
326-
<i class="weui_icon_msg weui_icon_info"></i>
327-
<i class="weui_icon_msg weui_icon_warn"></i>
328-
<i class="weui_icon_msg weui_icon_waiting"></i>
329-
<i class="weui_icon_safe weui_icon_safe_success"></i>
330-
<i class="weui_icon_safe weui_icon_safe_warn"></i>
331-
<div class="icon_sp_area">
332-
<i class="weui_icon_success"></i>
333-
<i class="weui_icon_success_circle"></i>
334-
<i class="weui_icon_success_no_circle"></i>
335-
<i class="weui_icon_info"></i>
336-
<i class="weui_icon_waiting"></i>
337-
<i class="weui_icon_waiting_circle"></i>
338-
<i class="weui_icon_circle"></i>
339-
<i class="weui_icon_warn"></i>
340-
<i class="weui_icon_download"></i>
341-
<i class="weui_icon_info_circle"></i>
342-
<i class="weui_icon_cancel"></i>
343-
</div>
344-
```
345-
346-
## TODO
347-
348-
- 更多的组件
349-
- react-weui
72+
WeUI 说明文档参考 [Wiki](https://github.com/weui/weui/wiki)
35073

35174
## License
35275
The MIT License(http://opensource.org/licenses/MIT)

0 commit comments

Comments
 (0)