Component Templates and Styles

Recent Pages

Component Templates and Styles

Last updated: 2024-03-04 23:13:54

Within the realm of Tencent Cloud's Mini Program development, custom components possess their own WXML templates and WXSS styles. These can be crafted by defining the WXML and WXSS files of the custom components, thereby establishing the structure and styles of the components.
Component Template
The composition of a component template mirrors that of a page template. The node tree, generated by the combination of the component template and component data, will be seamlessly integrated into the reference location of the component.
Within the component template, a <slot> node can be provided, serving as a vessel for child nodes provided at the time of component reference.
Sample code:
<!-- Component Template -->
<view class="wrapper">
  <view>This is an internal node of the component</view>
  <slot></slot>
</view>
<!-- Page Template Referencing the Component -->
<view>
  <component-tag-name>
    <!-- This content will be placed in the component's <slot> position -->
    <view>This is the content inserted into the component's slot</view>
  </component-tag-name>
</view>
Note:
The custom components and their corresponding node names referenced in the template need to be explicitly defined in the json file. Otherwise, they will be treated as meaningless nodes. In addition, node names can also be declared as abstract nodes.
Template Data Binding
Similar to ordinary WXML templates, data binding can be used to pass dynamic data to the attributes of subcomponents.
Sample Code:
<!-- Page Template Referencing the Component -->
<view>
  <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
    <!-- This content will be placed in the component's <slot> position -->
    <view>This is the content inserted into the component's slot</view>
  </component-tag-name>
</view>
In the above, the component attributes propA and propB will receive data passed from the page. The page can change the bound data field through setData.
Note:
Such data binding can only transmit JSON-compatible data.
Component WXML's Slot
The component's WXML can include slot nodes, which are used to carry the WXML structure provided by the component user.
By default, a component's WXML can only have one slot. When multiple slots are required, they can be declared for activation in the component's JS.
Component({
  options: {
    multipleSlots: true // Enable multi-slot support in the component definition options.
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})
At this point, multiple slots can be used in the component's WXML, distinguished by different names.
<!-- Component Template -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>These are the internal details of the component.</view>
  <slot name="after"></slot>
</view>
When in use, the slot attribute is used to insert nodes into different slots.
<!-- Page Template Referencing the Component -->
<view>
  <component-tag-name>
    <!-- This content will be placed in the component's <slot name="before"> position -->
    <view slot="before">This is the content inserted into the component slot name="before".</view>
    <!-- This content will be placed in the component's <slot name="after"> position -->
    <view slot="after">This is the content inserted into the component slot name="after".</view>
  </component-tag-name>
</view>
Component styles
The style of the corresponding wxss file for the component only affects the nodes within the component wxml. When composing component styles, mind the following points:
The component and the page referencing the component cannot use id selectors (#a), attribute selectors ([a]), or tag name selectors. Use class selectors instead.
In the component and the page referencing the component, the use of descendant selectors (.a .b) may exhibit unexpected behavior in some extreme cases. If encountered, please refrain from using them.
The child element selector (.a>.b) can only be used between the view component and its child nodes. Using it with other components may lead to unexpected situations.
Inherited styles, such as font and color, will be passed from outside the component to inside the component.
Apart from inherited styles, the styles in app.wxss and the styles of the page where the component is located do not affect the custom component.
#a {
} /* Cannot be used within the component */
[a] {
} /* Cannot be used within the component */
button {
} /* Cannot be used within the component */
.a > .b {
} /* Unless .a is a view component node, it may not necessarily take effect. */
In addition, a component can specify the default style of its node using the :host selector.
Sample code:
/* Component custom-component.wxss */
:host {
  color: yellow;
}
<!-- Page's WXML -->
<custom-component>This text is in yellow</custom-component>
External Style Class
At times, a component may wish to accept externally passed style classes. In such cases, several external style classes can be defined in the Component using the externalClasses definition section.
This feature can be used to implement attributes similar to the hover-class attribute of the view component: a page can provide a style class, assigned to the view's hover-class, with the style class itself being written within the page rather than within the implementation of the view component.
Note:
When employing both regular style classes and external style classes on the same node, the precedence of the two classes is undefined, hence it is advisable to avoid such circumstances.
Sample code:
/* Component custom-component.js */
Component({
  externalClasses: ['my-class']
})
<!-- Component custom-component.wxml -->
<custom-component class="my-class">
  The color of this text is determined by the class outside the component.
</custom-component>
In this manner, the user of the component can specify the class corresponding to this style class, much like using a standard attribute.
Sample code:
<!-- Page's WXML -->
<custom-component my-class="red-text" />
.red-text {
  color: red;
}
Enabling the component to accept global styles
By default, the style of a custom component is only influenced by the custom component's wxss, unless in the following two scenarios:
In app.wxss or the page's wxss, if tag name selectors (or some other special selectors) are used to directly specify styles, these selectors will affect the page and all components. Generally, this is not a recommended practice.
In specific custom components, the addGlobalClass option has been activated, allowing this custom component to be influenced by all style definitions in app.wxss or the page's wxss.
To activate the addGlobalClass option, simply set the options.addGlobalClass field to true within the Component constructor.
Note:
Upon activation of the addGlobalClass option, there is a risk of external styles contaminating the component styles. Please make selection carefully.
Sample code:
/* Component custom-component.js */
Component({
  options: {
    addGlobalClass: true,
  }
})
<!-- Component custom-component.wxml -->
<text class="red-text">
  The color of this text is determined by the style definitions in app.wxss and the page's wxss.
</text>
/* app.wxss */
.red-text {
  color: red;
}
﻿

Contact Us

Contact our sales team or business advisors to help your business.

Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

7x24 Phone Support

tencent cloud

Recent Pages

Component Templates and Styles

Component Template

Template Data Binding

Component WXML's Slot

Component styles

External Style Class

Enabling the component to accept global styles

Was this page helpful?

Was this page helpful?

tencent cloud

Sign Up

Log in

Recent Pages

Component Templates and Styles

Component Template

Template Data Binding

Component WXML's Slot

Component styles

External Style Class

Enabling the component to accept global styles

Was this page helpful?

Was this page helpful?