tencent cloud

Feedback

Fundamentals

Last updated: 2024-03-04 23:03:44

    icon

    Feature Description: Icon Component.
    Parameter and Description:
    Attribute
    Type
    Default value
    Description
    type
    string
    -
    The type of icon, whose valid values are: success, success_no_circle, info, warn, waiting, cancel, download, search, clear.
    size
    umber / string
    23
    The size of the icon, with the default unit in pixels.
    color
    string
    -
    The color of the icon, same as the CSS color.
    aria-label
    string
    -
    Accessibility, (Attribute) Additional description of the element.
    Sample Code
    Corresponding WXML file
    <view class="group">
    <block wx.for="{{iconSize}}">
    <icon type="success" size="{{item}}" />
    </block>
    </view>
    
    <view class="group">
    <block wx.for="{{iconType}}">
    <icon type="{{item}}" size="40" />
    </block>
    </view>
    
    <view class="group">
    <block wx.for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}" />
    </block>
    </view>
    Corresponding js file
    Page({
    data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
    'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
    'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
    }
    })
    

    progress

    Feature Description: Progress Bar.
    Parameter and Description:
    Attribute
    Type
    Default value
    Description
    percent
    float
    -
    Percentage range: 0-100
    show-info
    boolean
    false
    Display percentage on the right side of the progress bar
    border-radius
    number / string
    0
    Chamfer size, unit: px
    font-size
    number / string
    16
    Font size of the percentage on the right, unit: px
    stroke-width
    number / string
    6
    Width of the progress bar line
    color
    color
    #09BB07
    Progress bar color (use activeColor)
    activeColor
    color
    -
    Color of the selected progress bar
    backgroundColor
    color
    -
    Color of the unselected progress bar
    active
    boolean
    false
    Animation of the progress bar moving from left to right
    active-mode
    string
    backwards
    Backwards: Animation plays from the beginning
    Forwards: The animation continues from the point where it last ended.
    bindactiveend
    eventhandle
    -
    Animation completion event
    aria-label
    string
    -
    Accessibility, (Attribute) Additional description of the element.
    Sample Code
    <progress percent="20" show-info />
    <progress percent="40" stroke-width="12" />
    <progress percent="60" color="blue" />
    <progress percent="80" active />
    

    text

    Feature Description: Text.
    Parameter and Description:
    Attribute
    Type
    Default value
    Description
    selectable
    boolean
    false
    Text selection availability
    space
    string
    -
    Display consecutive spaces
    decode
    boolean
    false
    Whether to decode
    Value
    Description
    ensp
    Half-size space for Chinese characters
    emsp
    Full-size space for Chinese characters
    nbsp
    Space size set based on the font
    Note:
    decode can parse the following: &nbsp;  &lt;  &gt;  &amp;  &apos;  &ensp;  &emsp.
    The space standards across various operating systems are not consistent.
    The <text> component only supports nesting<text>.
    Nodes other than text nodes cannot be selected by long pressing.
    Corresponding WXML file
    <view class="btn-area">
    <view class="body-view">
    <text>{{text}}</text>
    <button bindtap="add">add line</button>
    <button bindtap="remove">remove line</button>
    </view>
    </view>
    Corresponding js file
    const initData = 'this is first line\\nthis is second line'
    const extraLine = []
    Page({
    data: {
    text: initData
    },
    add(e) {
    extraLine.push('other line')
    this.setData({
    text: initData + '\\n' + extraLine.join('\\n')
    })
    },
    remove(e) {
    if (extraLine.length > 0) {
    extraLine.pop()
    this.setData({
    text: initData + '\\n' + extraLine.join('\\n')
    })
    }
    }
    })
    

    rich-text

    Feature Description: Rich text.
    Parameter and Description:
    Attribute
    Type
    Default value
    Description
    nodes
    array / string
    -
    Node List / HTML String
    space
    string
    -
    Display consecutive spaces
    Valid values of space:
    Value
    Description
    ensp
    Half-size space for Chinese characters
    emsp
    Full-size space for Chinese characters
    nbsp
    Space size set based on the font
    Supports default events, including: tap, touchstart, touchmove, touchcancel, touchend, and longtap.
    nodes
    It is recommended to use the Array type for the nodes attribute, as the component will convert the String type into the Array type, resulting in a decrease in performance. Two types of nodes are now supported, distinguished by type, namely element nodes and text nodes. The default is the element node, which is the HTML node displayed in the rich text area.
    Element Node: type = node
    Attribute
    Description
    Type
    Required
    Remarks
    name
    Tag name
    string
    Yes
    Supports a subset of trusted HTML nodes
    attrs
    Attribute
    object
    No
    Supports a subset of recipient attributes, adhering to Pascal naming conventions.
    children
    List of child nodes
    array
    No
    Consistent with the structure and nodes
    Text node: type=text
    Attribute
    Description
    Type
    Required
    Remarks
    text
    Text
    string
    Yes
    Supports entities
    Trusted HTML nodes and attributes
    Globally supports class and style attributes and does not support ID attributes.
    Node
    Attribute
    Node
    Attribute
    a
    -
    img
    alt,src,height,width
    abbr
    -
    ins
    -
    b
    -
    label
    -
    br
    -
    legend
    -
    code
    -
    li
    -
    col
    span,width
    ol
    start,type
    colgroup
    span,width
    p
    -
    dd
    -
    q
    -
    del
    -
    span
    -
    div
    -
    strong
    -
    dl
    -
    sub
    -
    dt
    -
    sup
    -
    em
    -
    table
    width
    fieldset
    -
    tbody
    -
    h1
    -
    td
    colspan,height,rowspan,width
    h2
    -
    tfoot
    -
    h3
    -
    th
    colspan,height,rowspan,width
    h4
    -
    thead
    -
    h5
    -
    tr
    -
    h6
    -
    ul
    -
    hr
    -
    -
    -
    Sample Code
    <!-- rich-text.wxml -->
    <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
    // rich-text.js
    Page({
    data: {
    nodes: [{
    name: 'div',
    attrs: {
    class: 'div_class',
    style: 'line-height: 60px; color: red;'
    },
    children: [{
    type: 'text',
    text: 'Hello&nbsp;World!'
    }]
    }]
    },
    tap() {
    console.log('tap')
    }
    })
    Note:
    It is not recommended to use String type for nodes, as it may result in performance degradation.
     The rich-text component blocks all node events.
    The attrs attribute does not support id, but supports class.
    The name attribute is case-insensitive.
    If untrusted HTML nodes are used, the node and all its child nodes will be removed.
    The img tag only supports network images.
    If the rich-text component is used within a custom component, only the wxss style of the custom component will apply to the class in the rich-text. It is not recommended to use the String type for nodes, as it may result in performance degradation.
    
    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