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

Revert "update about wx" #502

Merged
merged 1 commit into from
Sep 20, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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