未验证 提交 d875dc6c 编写于 作者: O openharmony_ci 提交者: Gitee

!9759 更新docs文档

Merge pull request !9759 from wangshuainan1/master
...@@ -43,17 +43,10 @@ ...@@ -43,17 +43,10 @@
| icon-height | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的高,默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 | | icon-height | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的高,默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
| radius | &lt;length&gt; | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 | | radius | &lt;length&gt; | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 |
> **说明:**
> - 胶囊按钮(type=capsule)时,不支持border相关样式;
>
> - 圆形按钮(type=circle)时,不支持文本相关样式;
>
> - 文本按钮(type=text)时,自适应文本大小,不支持尺寸设置(radius,width,height),背景透明不支持background-color样式。
### type设置为arc ### type设置为arc
除支持[通用样式](../arkui-js/js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom外,还支持如下样式: 除支持[通用样式](../arkui-js/js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom]外,还支持如下样式:
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- | | ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
......
...@@ -127,7 +127,8 @@ import prompt from '@system.prompt'; ...@@ -127,7 +127,8 @@ import prompt from '@system.prompt';
export default { export default {
data: { data: {
direction: 'column', direction: 'column',
list: [] list: [],
listAdd: []
}, },
onInit() { onInit() {
this.list = [] this.list = []
......
...@@ -95,6 +95,7 @@ ...@@ -95,6 +95,7 @@
height: 300px; height: 300px;
} }
.stepperItem { .stepperItem {
width: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
......
...@@ -159,7 +159,7 @@ setCurrentTime(value: number, seekMode: SeekMode) ...@@ -159,7 +159,7 @@ setCurrentTime(value: number, seekMode: SeekMode)
@Entry @Entry
@Component @Component
struct VideoCreateComponent { struct VideoCreateComponent {
@State srcs: Resource = $rawfile('video1'); @State srcs: Resource = $rawfile('video1.mp4');
@State previewUris: Resource = $r('app.media.img'); @State previewUris: Resource = $r('app.media.img');
@State currentProgressRates: number = 1; @State currentProgressRates: number = 1;
@State autoPlays: boolean = false; @State autoPlays: boolean = false;
...@@ -202,7 +202,7 @@ struct VideoCreateComponent { ...@@ -202,7 +202,7 @@ struct VideoCreateComponent {
}) })
Row() { Row() {
Button("src").onClick(() => { Button("src").onClick(() => {
this.srcs = $rawfile('video2'); this.srcs = $rawfile('video2.mp4');
}); });
Button("previewUri").onClick(() => { Button("previewUri").onClick(() => {
this.previewUris = $r('app.media.img1'); this.previewUris = $r('app.media.img1');
......
...@@ -61,7 +61,7 @@ background: repeating-linear-gradient(direction/angle, color, color, ...); ...@@ -61,7 +61,7 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
```css ```css
/* 45度夹角,从红色渐变到绿色 */ /* 45度夹角,从红色渐变到绿色 */
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
``` ```
![222](figures/222.PNG) ![222](figures/222.PNG)
...@@ -70,7 +70,7 @@ background: repeating-linear-gradient(direction/angle, color, color, ...); ...@@ -70,7 +70,7 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
```css ```css
/* 从左向右渐变,在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */ /* 从左向右渐变,在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
``` ```
...@@ -82,4 +82,5 @@ background: repeating-linear-gradient(direction/angle, color, color, ...); ...@@ -82,4 +82,5 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
/* 从左向右重复渐变,重复渐变区域30px(60-30)透明度0.5 */ /* 从左向右重复渐变,重复渐变区域30px(60-30)透明度0.5 */
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
``` ```
![444](figures/444.PNG) ![444](figures/444.PNG)
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
| and | 将多个媒体特征(Media&nbsp;Feature)以“与”的方式连接成一个媒体查询,只有当所有媒体特征都为true,查询条件成立。另外,它还可以将媒体类型和媒体功能结合起来。<br/>例如:screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 | | and | 将多个媒体特征(Media&nbsp;Feature)以逻辑运算符“与”的方式连接成一个媒体查询,只有当所有媒体特征都为true,查询条件成立。另外,它还可以将媒体类型和媒体功能结合起来。<br/>例如:screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 |
| not | 取反媒体查询结果,媒体查询结果不成立时返回true,否则返回false。在媒体查询列表中应用not,则not仅取反应用它的媒体查询。<br/>例如:not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>使用not运算符时必须指定媒体类型。 | | not | 取反媒体查询结果,媒体查询结果不成立时返回true,否则返回false。在媒体查询列表中应用not,则not仅取反应用它的媒体查询。<br/>例如:not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>使用not运算符时必须指定媒体类型。 |
| only | 当整个表达式都匹配时,才会应用选择的样式,可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义,比如:<br/>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br/>老版本浏览器会将这句话理解成screen,从而导致仅仅匹配到媒体类型(screen),就应用了指定样式,使用only可以很好地规避这种情况。<br/>使用only时必须指定媒体类型。 | | only | 当整个表达式都匹配时,才会应用选择的样式,可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义,比如:<br/>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br/>老版本浏览器会将这句话理解成screen,从而导致仅仅匹配到媒体类型(screen),就应用了指定样式,使用only可以很好地规避这种情况。<br/>使用only时必须指定媒体类型。 |
| ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询,如果存在结果为true的媒体特征,则查询条件成立。其效果等同于or运算符。<br/>例如:screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;(round-screen:true)&nbsp;表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时,条件成立。 | | ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询,如果存在结果为true的媒体特征,则查询条件成立。其效果等同于or运算符。<br/>例如:screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;(round-screen:true)&nbsp;表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时,条件成立。 |
......
...@@ -74,13 +74,8 @@ button是按钮组件,其类型包括胶囊按钮、圆形按钮、文本按 ...@@ -74,13 +74,8 @@ button是按钮组件,其类型包括胶囊按钮、圆形按钮、文本按
> **说明:** > **说明:**
> - 胶囊按钮(type=capsule)不支持border相关样式。 >
> >- button组件使用的icon图标如果来自云端路径,需要添加网络访问权限 ohos.permission.INTERNET。
> - 圆形按钮(type=circle)不支持文本相关样式。
>
> - 文本按钮(type=text),自适应文本大小,不支持尺寸样式设置(radius,width,height),背景透明不支持background-color样式。
>
> - button组件使用的icon图标如果来自云端路径,需要添加网络访问权限 ohos.permission.INTERNET。
如果需要添加ohos.permission.INTERNET权限,则在resources文件夹下的config.json文件里进行权限配置。 如果需要添加ohos.permission.INTERNET权限,则在resources文件夹下的config.json文件里进行权限配置。
......
...@@ -150,7 +150,7 @@ export default{ ...@@ -150,7 +150,7 @@ export default{
<div class="container"> <div class="container">
<form onsubmit="formSubmit" onreset="formReset"> <form onsubmit="formSubmit" onreset="formReset">
<text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;"> <text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
<span > form </span> <span > Form </span>
</text> </text>
<div style="flex-direction: column;width: 90%;padding: 30px 0px;"> <div style="flex-direction: column;width: 90%;padding: 30px 0px;">
<text class="txt">Select 1 or more options</text> <text class="txt">Select 1 or more options</text>
......
...@@ -132,7 +132,7 @@ export default { ...@@ -132,7 +132,7 @@ export default {
<div class="page-container"> <div class="page-container">
<div class="content"> <div class="content">
<div class="image-container"> <div class="image-container">
<image class="testimage" src="{{testuri}}" style="display:{{displaytype}};opacity:{{imageopacity}};" onclick="changedisplaytype" onlongpress="changeopacity"> </image> <image class="testimage" src="{{testuri}}" style="opacity:{{imageopacity}};" onlongpress="changeopacity"> </image>
</div> </div>
<div class="text-container"> <div class="text-container">
<text style="font-size: 37px;font-weight:bold;color:orange;text-align: center;width: 100%;">Touch and hold the image</text> <text style="font-size: 37px;font-weight:bold;color:orange;text-align: center;width: 100%;">Touch and hold the image</text>
......
...@@ -11,7 +11,7 @@ picker是滑动选择器组件,类型支持普通选择器、日期选择器 ...@@ -11,7 +11,7 @@ picker是滑动选择器组件,类型支持普通选择器、日期选择器
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<picker> picker </picker> <picker> picker </picker>
<div> </div>
``` ```
```css ```css
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册