You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by so...@apache.org on 2017/04/17 04:14:31 UTC
[16/48] incubator-weex git commit: * [doc] add documentation for
waterfall component
* [doc] add documentation for waterfall component
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/1b9da064
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/1b9da064
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/1b9da064
Branch: refs/heads/0.12-dev
Commit: 1b9da064173e905be46b237920e9f9921a9d2eb6
Parents: 0d441c0
Author: \u9690\u98ce <cx...@apache.org>
Authored: Wed Mar 29 15:28:24 2017 +0800
Committer: \u9690\u98ce <cx...@apache.org>
Committed: Wed Mar 29 15:28:24 2017 +0800
----------------------------------------------------------------------
.../cn/references/components/waterfall.md | 69 ++++++++++++++++++++
doc/source/references/components/waterfall.md | 60 +++++++++++++++++
2 files changed, 129 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/1b9da064/doc/source/cn/references/components/waterfall.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/references/components/waterfall.md b/doc/source/cn/references/components/waterfall.md
new file mode 100644
index 0000000..08b01ac
--- /dev/null
+++ b/doc/source/cn/references/components/waterfall.md
@@ -0,0 +1,69 @@
+\---
+
+title: <waterfall>
+
+type: references
+
+order: 2.5
+
+version: 2.1
+
+\---
+
+# waterfall
+
+<span class="weex-version">v0.11.0+</span>
+
+\u63d0\u4f9b\u7011\u5e03\u6d41\u5e03\u5c40\u7684\u7ec4\u4ef6
+
+### \u5b50\u7ec4\u4ef6
+
+\u6ce8\u610f: \u548clist\u4e00\u6837, waterfall \u53ea\u652f\u6301\u7279\u5b9a\u7c7b\u578b\u7684\u7ec4\u4ef6: cell, header, refresh, loading \u548c fixed-position \u7ec4\u4ef6.
+
+- `cell`: \u7011\u5e03\u6d41\u4e2d\u7684\u6bcf\u4e2a\u5143\u7d20
+- `header`: \u4e3b\u8981\u7528\u4e8e\u8868\u793a\u6a2a\u8de8\u591a\u5217\u7684\u5143\u7d20\uff0c\u53ef\u4ee5\u901a\u8fc7css\u7684position\u5c5e\u6027\u8bbe\u7f6e\u4e3asticky
+
+### \u7279\u6027
+
+- **column-width** : \u63cf\u8ff0\u7011\u5e03\u6d41\u6bcf\u4e00\u5217\u7684\u5217\u5bbd
+ - `auto`: \u610f\u5473\u7740\u5217\u5bbd\u662f\u88ab\u5176\u4ed6\u5c5e\u6027\u6240\u51b3\u5b9a\u7684(\u6bd4\u5982 column-count)
+ - `<length>`: \u6700\u4f73\u5217\u5bbd\uff0c\u5b9e\u9645\u7684\u5217\u5bbd\u53ef\u80fd\u4f1a\u66f4\u5bbd(\u9700\u8981\u586b\u5145\u5269\u4f59\u7684\u7a7a\u95f4)\uff0c \u6216\u8005\u66f4\u7a84(\u5982\u679c\u5269\u4f59\u7a7a\u95f4\u6bd4\u5217\u5bbd\u8fd8\u8981\u5c0f)\u3002 \u8be5\u503c\u5fc5\u987b\u5927\u4e8e0
+- **column-count**: \u63cf\u8ff0\u7011\u5e03\u6d41\u7684\u5217\u6570
+ - `auto`: \u610f\u5473\u7740\u5217\u6570\u662f\u88ab\u5176\u4ed6\u5c5e\u6027\u6240\u51b3\u5b9a\u7684(\u6bd4\u5982 column-width)
+ - `<integer>`: \u6700\u4f73\u5217\u6570\uff0ccolumn-width \u548c column-count \u90fd\u6307\u5b9a\u975e0\u503c\uff0c \u5219 column-count \u4ee3\u8868\u6700\u5927\u5217\u6570\u3002
+- **column-gap**: \u5217\u4e0e\u5217\u7684\u95f4\u9699. \u5982\u679c\u6307\u5b9a\u4e86 `normal` \uff0c\u5219\u5bf9\u5e94 `32`.
+
+\u5176\u4ed6\u652f\u6301\u7684\u5c5e\u6027\u53c2\u89c1 [List Component Attributes](./list.html)
+
+### \u6837\u5f0f
+
+\u901a\u7528\u6837\u5f0f\uff1a\u652f\u6301\u6240\u6709\u901a\u7528\u6837\u5f0f
+
+- \u76d2\u6a21\u578b
+- `flexbox` \u5e03\u5c40
+- `position`
+- `opacity`
+- `background-color`
+
+\u67e5\u770b [\u7ec4\u4ef6\u901a\u7528\u6837\u5f0f](../common-style.html)
+
+### \u4e8b\u4ef6
+
+- \u901a\u7528\u4e8b\u4ef6
+
+ \u652f\u6301\u6240\u6709\u901a\u7528\u4e8b\u4ef6\uff1a
+
+ - `click`
+ - `longpress`
+ - `appear`
+ - `disappear`
+
+ \u67e5\u770b [\u901a\u7528\u4e8b\u4ef6](../common-event.html)
+
+### API
+
+\u6eda\u52a8\u5230\u5217\u8868\u67d0\u4e2a\u6307\u5b9a\u9879\u662f\u5e38\u89c1\u9700\u6c42\uff0c`<waterfall>` \u62d3\u5c55\u4e86\u8be5\u529f\u80fd\u652f\u6301\u6eda\u52a8\u5230\u6307\u5b9a `<cell>` \u6216\u8005 `<header>`\u3002\u901a\u8fc7 `dom` module \u8bbf\u95ee\uff0c\u66f4\u591a\u4fe1\u606f\u53ef\u53c2\u8003 [dom module](../modules/dom.html) \u3002
+
+### \u793a\u4f8b
+
+\u53c2\u89c1 [playground waterfall example](http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/1b9da064/doc/source/references/components/waterfall.md
----------------------------------------------------------------------
diff --git a/doc/source/references/components/waterfall.md b/doc/source/references/components/waterfall.md
new file mode 100644
index 0000000..5c035d0
--- /dev/null
+++ b/doc/source/references/components/waterfall.md
@@ -0,0 +1,60 @@
+\---
+
+title: <waterfall>
+
+type: references
+
+order: 2.5
+
+version: 2.1
+
+\---
+
+# waterfall
+
+<span class="weex-version">v0.11.0+</span>
+
+A component providing waterfall layout.
+
+### Child Components
+
+Notes: The waterfall now supports the following child components: cell, header, refresh, loading and fixed-position components. Other kinds of components will not be guaranteed to be displayed correctly.
+
+* cell: presents the content for a single data item in waterfall
+* header: components that need to stretch across multiple columns. It can be sticky by using css position.
+
+### Attributes
+
+* **column-width** : This property describes the width of columns in waterfall elements.
+ * `auto`: means that the column width will be determined by other properties(e.g., column-count, if it has a non-auto value).
+ * `<length>`: describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). Specified values must be greater than 0.
+* **column-count**:This property describes the number of columns of a multicol element.
+ * `auto`: means that the number of columns will be determined by other properties (e.g., column-width, if it has a non-auto value).
+ * `<integer>`: describes the optimal number of columns into which the content of the element will be flowed. Values must be greater than 0. If both column-width and column-count have non-auto values, the integer value describes the maximum number of columns.
+* **column-gap**:sets the gap between columns. if `normal` is specified, the gap will be `32`.
+
+To see other attributes, please checkout [List Component Attributes](./list.html)
+
+### Styles
+
+common styles: check out [common styles for components](../common-style.html)
+
+* support flexbox related styles
+* support box model related styles
+* support position related styles
+* support opacity, background-color etc.
+
+### Events
+
+common events: check out the [common events](../common-event.html)
+
+* support onclick event. Check out [common events](../common-event.html)
+* support onappear / ondisappear event. Check out [common events](../common-event.html)
+
+### API
+
+All subcomponents in waterfall support the scrollToElement API in [dom module](../modules/dom.html)
+
+### Example
+
+see [playground waterfall example](http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0)
\ No newline at end of file