提交 6ad4af15 编写于 作者: H HelloCrease

update docs

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 30f9af46
......@@ -4,7 +4,7 @@
> **说明:**
>
> 该组件从API Version&nbsp;9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 本组件为系统接口。
......
......@@ -10,10 +10,10 @@
## 属性
| 名称 | 参数说明 | 描述 |
| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| width | [Length](ts-types.md#length) | 设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽,则会画出父组件的范围。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
| height | [Length](ts-types.md#length) | 设置组件自身的高度,缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高,则会画出父组件的范围。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
| 名称 | 参数说明 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| width | [Length](ts-types.md#length) | 设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽,则会画出父组件的范围。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
| height | [Length](ts-types.md#length) | 设置组件自身的高度,缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高,则会画出父组件的范围。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
| size | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>} | 设置高宽尺寸。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
| padding | [Padding](ts-types.md#padding)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置内边距属性。<br/>参数为Length类型时,四个方向内边距同时生效。<br>默认值:0 <br>padding设置百分比时,上下左右内边距均以父容器的width作为基础值。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
| margin | [Margin](ts-types.md#margin)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置外边距属性。<br/>参数为Length类型时,四个方向外边距同时生效。<br>默认值:0 <br>margin设置百分比时,上下左右外边距均以父容器的width作为基础值。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
......@@ -21,14 +21,14 @@
## constraintSize取值对width/height影响
|大小排列|结果|
|-----|------|
|minWidth/minHeight < width/height< maxWidth/maxHeight|width/height|
|minWidth/minHeight < maxWidth/maxHeight < width/height| maxWidth/maxHeight|
|maxWidth/maxHeight < minWidth/minHeight < width/height| minWidth/minHeight|
|maxWidth/maxHeight < width/height< minWidth/minHeight| minWidth/minHeight|
|width/height < maxWidth/maxHeight < minWidth/minHeight| minWidth/minHeight|
|width/height < minWidth/minHeight < maxWidth/maxHeight| minWidth/minHeight|
| 大小排列 | 结果 |
| ---------------------------------------- | ------------------ |
| minWidth/minHeight < width/height< maxWidth/maxHeight | width/height |
| minWidth/minHeight < maxWidth/maxHeight < width/height | maxWidth/maxHeight |
| maxWidth/maxHeight < minWidth/minHeight < width/height | minWidth/minHeight |
| maxWidth/maxHeight < width/height< minWidth/minHeight | minWidth/minHeight |
| width/height < maxWidth/maxHeight < minWidth/minHeight | minWidth/minHeight |
| width/height < minWidth/minHeight < maxWidth/maxHeight | minWidth/minHeight |
## 示例
```ts
......
......@@ -23,7 +23,7 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
每个页面目录下存在一个与布局hml文件同名的css文件,用来描述该hml页面中组件的样式,决定组件应该如何显示。
1. 内部样式,支持使用style、class属性来控制组件的样式。例如:
```html
<!-- index.hml -->
<div class="container">
......@@ -31,7 +31,7 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
</div>
```
```css
/* index.css */
.container {
......@@ -40,7 +40,7 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
```
2. 文件导入,合并外部样式文件。例如,在common目录中定义样式文件style.css,并在index.css中进行导入:
```css
/* style.css */
.title {
......@@ -48,7 +48,7 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
}
```
```css
/* index.css */
@import '../../common/style.css';
......@@ -62,10 +62,10 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
css选择器用于选择需要添加样式的元素,支持的选择器如下表所示:
| 选择器 | 样例 | 样例描述 |
| -------- | -------- | -------- |
| 选择器 | 样例 | 样例描述 |
| ------ | ---------- | ------------------------- |
| .class | .container | 用于选择class="container"的组件。 |
| \#id | \#titleId | 用于选择id="titleId"的组件。 |
| \#id | \#titleId | 用于选择id="titleId"的组件。 |
示例:
......
......@@ -258,4 +258,4 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
}
```
![GIF](figures/GIF.gif)
![floating_button](figures/floating_button.gif)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册