Skip to content
This repository has been archived by the owner on Jun 7, 2021. It is now read-only.

Commit

Permalink
Revert "[Doc] Update about wx (#491)" (#502)
Browse files Browse the repository at this point in the history
This reverts commit d1e6b69.
  • Loading branch information
YorkShen authored Sep 20, 2019
1 parent 4a8339a commit eb07431
Show file tree
Hide file tree
Showing 8 changed files with 11 additions and 47 deletions.
4 changes: 0 additions & 4 deletions docs/docs/components/text.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,6 @@ One can use the following code snippet to bind the content of text to a variable
* Support [common events](../events/common-events.html)

## Other

### `wx` unit
`font-size` and `line-height` support `wx` . For styles that should not be affected by screen width and viewPortWidth, please use `wx` as unit.

### Text height
The rules for computed height of text component is complicated, basically but not always, text in Weex obey the following rules in order:
1. The CSS style of `max-height`/`min-height` on your text
Expand Down
6 changes: 3 additions & 3 deletions docs/docs/modules/animation.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,13 @@ Ref [transition](../styles/common-styles.html#property) or [transform](../styles
:::

#### Animated properties in styles
* **`width`**, the `width` applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. The default value is `computed width`.support `wx` as unit.
* **`height`**, the `height` applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. The default value is `computed height`.support `wx` as unit.
* **`width`**, the `width` applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. The default value is `computed width`.
* **`height`**, the `height` applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. The default value is `computed height`.
* **`backgroundColor`**, the `backgroundColor` applied to the component after the animation finished. The default value is `computed backgroundColor`.
* **`opacity`**, the `opacity` applied to the component after the animation finished. The default value is `computed opacity`.
* **`transformOrigin`**, the `transformOrigin` indicate the pivot of the element being animated. The possible values for `x-axis` are `left`/`center`/`right`/length or percent, and possible values of `y-axis` are `top`/`center`/`bottom`/ length or percent. The default value is `center center`.
* **`transform`**, transform object, which may include `rotate`, `translate`, `scale` and etc. The detail of transform is illustrated below.
* `translate/translateX/translateY`: Specify the location which the element will be translated to.The unit is number or percent and the default value is 0.support `wx` as unit.
* `translate/translateX/translateY`: Specify the location which the element will be translated to.The unit is number or percent and the default value is 0.
* `rotate/rotateX/rotateY`**v0.14+**: Specify the angle of which the element will be rotated. The unit is **degree** and the default value is 0.
* `perspective`**v0.16+**: The distance between the z=0 plane and the user. Supported for **Android 4.1** and above. The unit is number and the default value is positive infinity.
* `scale/scaleX/scaleY`: Stretch or shrink the element. The unit is number and the default value is 1.
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/styles/common-styles.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ The supported styles is listed below, and some component may support custom styl
:::

::: warning
All Styles support `px` as length unit,part of them support `wx`. `%`, `rem`, `em` are not supported.Learn more at [CSS Units](https://weex.apache.org/docs/styles/css-units.html)
Weex supports `px`and `wx`(not affected by screen width and viewPortWidth) as length unit, `%`, `rem`, `em` are not supported.
:::

## Box Model
Expand Down
17 changes: 1 addition & 16 deletions docs/docs/styles/css-units.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@

## CSS `length` unit

All Styles support `px` as length unit,part of them support `wx`.

`px``wx` are supported as length units. For styles that should not be affected by screen width and viewPortWidth, please use `wx` as unit.

::: danger
Ignoring `px` or `wx` will cause render error on Webview.
Expand All @@ -13,20 +12,6 @@ Ignoring `px` or `wx` will cause render error on Webview.
`em``rem``pt`, `%`, etc. are not supported.
:::

### `wx` unit
Please use `wx` as unit for styles that should not be affected by screen width and viewPortWidth.The following are the styles that support `wx` unit.
* Box Model
* `width {length}`
* `height {length}`
* `padding {length}`
* `margin {length}`
* `border-width {length}`
* Transform:
* `translate {length}`
* Text Styles:
* `font-size {number}`
* `line-height {length}`

## CSS `number` units

CSS `number` unit is a pure number without `px`, styles like `opacity``lines``flex` only accept `number` unit, you can find detail in [common-style](./common-styles.html).
Expand Down
3 changes: 0 additions & 3 deletions docs/zh/docs/components/text.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,6 @@
* 支持 [通用事件](../events/common-events.html)

## 其他
### wx单位
`font-size``line-height`支持`wx`单位,可设置使样式不受屏幕宽度和viewportwidth影响。

### 文字高度
文字高度的计算规则比较复杂,但大致上遵循以下优先级进行计算,排在前面的优先级最高。
1. 文字节点的`max-height`/`min-height`样式。
Expand Down
8 changes: 4 additions & 4 deletions docs/zh/docs/modules/animation.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,13 @@ animation.transition(ref1, {
:::

#### styles中支持动画的属性
* **`width`**`width`表示动画执行后应用到组件上的宽度值。如果你需要影响布局,设置`needLayout``true`。默认值为`computed width`支持`wx`单位。
* **`height`**`height`表示动画执行后应用到组件上的高度值。如果你需要影响布局,设置设置为 `needLayout``true`。默认值为`computed width`支持`wx`单位。
* **`width`**`width`表示动画执行后应用到组件上的宽度值。如果你需要影响布局,设置`needLayout``true`。默认值为`computed width`
* **`height`**`height`表示动画执行后应用到组件上的高度值。如果你需要影响布局,设置设置为 `needLayout``true`。默认值为`computed width`
* **`backgroundColor`**`backgroundColor`动画执行后应用到组件上的背景颜色,默认值为computed backgroundColor。
* **`opacity`**`opacity`表示动画执行后应用到组件上的不透明度值,默认值为computed opacity。
* **`transformOrigin`**`transformOrigin`定义变化过程的中心点,如`transformOrigin: x-axis y-axis` 参数 `x-axis` 可能的值为 `left``center``right`、长度值或百分比值,参数 `y-axis` 可能的值为 `top``center``bottom`、长度值或百分比。默认值为`center center`
* **`transform`**`transform`变换类型,可能包含rotate``translate``scale`及其他属性。默认值为空。支持
* `translate`/`translateX`/`translateY`指定元素要移动到的位置。单位是长度或百分比,默认值是0。支持`wx`单位。
* **`transform`**`transform`变换类型,可能包含rotate``translate``scale`及其他属性。默认值为空。
* `translate`/`translateX`/`translateY`指定元素要移动到的位置。单位是长度或百分比,默认值是0.
* `rotate`/`rotateX`/`rotateY`**v0.16+** 指定元素将被旋转的角度。单位是度 *角度度*,默认值是0
* `scale`/`scaleX`/`scaleY`按比例放大或缩小元素。单位是数字,默认值是1
* `perspective`**v0.16+** 观察者距离z=0平面的距离,在**Android 4.1**及以上有效。单位值数字,默认值为正无穷。
2 changes: 1 addition & 1 deletion docs/zh/docs/styles/common-styles.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Weex所支持的通用样式已在本文档中全部列出,一些组件可能
:::

::: warning
对于长度值,Weex所有样式均支持`px`单位,部分样式支持`wx`单位,不支持相对单位(`em``rem`,详见[CSS单位](https://weex.apache.org/zh/docs/styles/css-units.html)
Weex 对于长度值目前只支持`px``wx`(不受屏幕宽度和viewPortWidth影响),不支持相对单位(`em``rem`)。
:::

## 盒模型
Expand Down
16 changes: 1 addition & 15 deletions docs/zh/docs/styles/css-units.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,13 @@

## CSS 长度单位

在 Weex 中,**所有样式支持`px`长度单位,部分样式支持`wx`**
在 Weex 中,我们**支持 `px``wx` 长度单位**。对于不希望受屏幕宽度和 viewPortWidth 影响的尺寸,请使用 `wx` 单位

::: warning 注意
- Weex 不支持类似 `em``rem``pt`,`%` 这样的 CSS 标准中的其他长度单位;
- 单位 `px``wx` 不可省略,否则在 H5 环境无法正确渲染;
:::

### wx单位
使用 `wx` 单位可使尺寸不受屏幕宽度和 viewPortWidth 影响。以下是支持`wx`单位的样式。
* 通用盒模型:
* `width {length}`
* `height {length}`
* `padding {length}`
* `margin {length}`
* `border-width {length}`
* Transform:
* `translate {length}`
* 文本样式:
* `font-size {number}`
* `line-height {length}`

## CSS 数值单位

在 Weex 中,除了长度单位外,还有数值单位,仅仅一个数值,后面没有 `px` 等单位。用于 `opacity``lines``flex` 等属性指定一个纯数值。
Expand Down

0 comments on commit eb07431

Please sign in to comment.