Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Tonvia
Docs
提交
bd9c60f2
D
Docs
项目概览
Tonvia
/
Docs
与 Fork 源项目一致
Fork自
OpenHarmony / Docs
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
bd9c60f2
编写于
4月 02, 2022
作者:
Y
yaoyuchi
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
自定义组件支持继承父组件样式
Signed-off-by:
N
yaoyuchi
<
yaoyuchi@huawei.com
>
上级
706e80de
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
53 addition
and
0 deletion
+53
-0
zh-cn/application-dev/reference/arkui-js/Readme-CN.md
zh-cn/application-dev/reference/arkui-js/Readme-CN.md
+1
-0
zh-cn/application-dev/reference/arkui-js/js-components-custom-style.md
...tion-dev/reference/arkui-js/js-components-custom-style.md
+52
-0
未找到文件。
zh-cn/application-dev/reference/arkui-js/Readme-CN.md
浏览文件 @
bd9c60f2
...
...
@@ -94,6 +94,7 @@
-
[
animateTransform
](
js-components-svg-animatetransform.md
)
-
自定义组件
-
[
基本用法
](
js-components-custom-basic-usage.md
)
-
[
继承样式
](
js-components-custom-style.md
)
-
[
自定义事件
](
js-components-custom-events.md
)
-
[
Props
](
js-components-custom-props.md
)
-
[
事件参数
](
js-components-custom-event-parameter.md
)
...
...
zh-cn/application-dev/reference/arkui-js/js-components-custom-style.md
0 → 100644
浏览文件 @
bd9c60f2
# 继承样式
自定义组件可以通过inhert-class继承父组件的样式,只支持class选择器,多个class之间用空格分隔。
代码示例如下:
自定义组件的hml文件,其中fatherclass1和fatherclass1是从父组件继承的样式。
```
js
<!--
comp
.
hml
-->
<
div
class
=
"
item
"
>
<
text
class
=
"
fatherclass1
"
>
继承父组件的样式1
<
/text
>
<
text
class
=
"
fatherclass2
"
>
继承父组件的样式2
<
/text
>
<
/div>
```
页面的hml文件,页面中comp自定组件通过inhert-class继承了父组件的fatherclass1和fatherclass2样式。
```
html
<!-- xxx.hml -->
<element
name=
'comp'
src=
'../../common/component/comp.hml'
></element>
<div
class=
"container"
>
<comp
inhert-class=
"fatherclass1 fatherclass2"
></comp>
</div>
```
页面的css文件
```
html
// xxx.css
.fatherclass1 {
background-color:red;
border:2px;
}
.fatherclass2 {
background-color:green;
border:2px;
}
```
<div
class=
"container"
>
<comp
title=
"自定义组件"
inhert-class=
"fatherclass1"
></comp>
</div>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录