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

!4968 3008 处理完成:自定义组件支持继承父组件样式

Merge pull request !4968 from ester.zhou/TR-3008
上级 873a74bf c7a2fb04
master OpenHarmony-3.2-Beta2 OpenHarmony-3.2-Beta3 OpenHarmony-3.2-Beta4 OpenHarmony-3.2-Beta5 OpenHarmony-3.2-Release OpenHarmony-4.0-Beta1 OpenHarmony-4.0-Beta2 OpenHarmony_filemanager_develop_20220614 TR4270 bak_OpenHarmony-4.0-Beta1_20230529 docs-modify feature_IDL_20220811 monthly_20220614 monthly_20220816 monthly_20221018 monthly_20230815 revert-merge-17651-master revert-merge-19334-OpenHarmony-4.0-Beta1 revert-merge-19586-master revert-merge-20613-master revert-merge-21757-OpenHarmony-4.0-Beta2 revert-merge-21765-OpenHarmony-4.0-Beta2 revert-merge-23766-master revert-merge-5580-master weekly_20220607 weekly_20220614 weekly_20220621 weekly_20220628 weekly_20220705 weekly_20220712 weekly_20220719 weekly_20220726 weekly_20220802 weekly_20220809 weekly_20220816 weekly_20220823 weekly_20220830 weekly_20220906 weekly_20220913 weekly_20220920 weekly_20220927 weekly_20221004 weekly_20221011 weekly_20221018 weekly_20221025 weekly_20221101 weekly_20221108 weekly_20221115 weekly_20221122 weekly_20221129 weekly_20221206 weekly_20221213 weekly_20221220 weekly_20221227 weekly_20230103 weekly_20230110 weekly_20230117 weekly_20230124 weekly_20230131 weekly_20230207 weekly_20230214 weekly_20230221 weekly_20230228 weekly_20230307 weekly_20230314 weekly_20230321 weekly_20230328 weekly_20230404 weekly_20230411 weekly_20230418 weekly_20230425 weekly_20230502 weekly_20230509 weekly_20230516 weekly_20230523 weekly_20230530 weekly_20230606 weekly_20230613 weekly_20230619 weekly_20230626 weekly_20230627 weekly_20230704 weekly_20230712 weekly_20230725 weekly_20230801 weekly_20230808 weekly_20230815 weekly_20230822 weekly_20230829 weekly_20230905 OpenHarmony-v4.0-Beta2 OpenHarmony-v4.0-Beta1 OpenHarmony-v3.2.3-Release OpenHarmony-v3.2.2-Release OpenHarmony-v3.2.1-Release OpenHarmony-v3.2-Release OpenHarmony-v3.2-Beta5 OpenHarmony-v3.2-Beta4 OpenHarmony-v3.2-Beta3 OpenHarmony-v3.2-Beta2
无相关合并请求
......@@ -101,6 +101,7 @@
- Custom Components
- [Basic Usage](js-components-custom-basic-usage.md)
- [Style Inheritance](js-components-custom-style.md)
- [Custom Events](js-components-custom-events.md)
- [props](js-components-custom-props.md)
- [Event Parameter](js-components-custom-event-parameter.md)
......
# Style Inheritance
> **NOTE**<br/>
> The APIs of this module are supported since API 9. Updates will be marked with a superscript to indicate their earliest API version.
A custom component has the **inherit-class** attribute, which is defined in the following table.
| Name | Type | Default Value| Mandatory| Description |
| ------------ | ------ | ------ | ---- | ------------------------------------------------------ |
| inherit-class | string | - | No | Class styles inherited from the parent component, seperated by spaces.|
To enable a custom component to inherit the styles of its parent component, set the **inherit-calss** attribute for the custom component.
The example below is a code snippet in the HML file of the parent page that references a custom component named **comp**. This component uses the **inherit-class** attribute to inherit the styles of its parent component: **parent-class1** and **parent-class2**.
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
<div class="container">
<comp inherit-class="parent-class1 parent-class2" ></comp>
</div>
```
Code snippet in the CSS file of the parent page:
```html
// xxx.css
.parent-class1 {
background-color:red;
border:2px;
}
.parent-class2 {
background-color:green;
border:2px;
}
```
Code snippet in the HML file of the custom component, where **parent-class1** and **parent-class2** are styles inherited from the parent component:
```html
<!--comp.hml-->
<div class="item">
<text class="parent-class1">Style 1 inherited from the parent component</text>
<text class="parent-class2">Style 2 inherited from the parent component</text>
</div>
```
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册
反馈
建议
客服 返回
顶部