zhsw_wechat/miniprogram_npm/tdesign-miniprogram/search

API

Search Props

name | type | default | description | required -- | -- | -- | -- | -- style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N action | String / Slot | '' | see more ts definition | N adjust-position | Boolean | true | - | N always-embed | Boolean | false | - | N center | Boolean | false | - | N clear-trigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N clearable | Boolean | true | - | N confirm-hold | Boolean | false | - | N confirm-type | String | search | options: send/search/next/go/done | N cursor | Number | - | required | Y cursor-spacing | Number | 0 | - | N disabled | Boolean | false | - | N focus | Boolean | false | - | N hold-keyboard | Boolean | false | - | N label | String | '' | deprecated | N left-icon | String / Slot | 'search' | see more ts definition | N maxcharacter | Number | - | The maximum number of characters that the user can enter. One Chinese character represents two characters in length. Use either maxcharacter or maxlength | N maxlength | Number | -1 | - | N placeholder | String | '' | - | N placeholder-class | String | input-placeholder | - | N placeholder-style | String | - | required | Y readonly | Boolean | undefined | - | N result-list | Array | [] | Typescript：Array<string> | N right-icon | String / Slot | 'close-circle-filled' | deprecated。see more ts definition | N selection-end | Number | -1 | - | N selection-start | Number | -1 | - | N shape | String | 'square' | options: square/round | N type | String | 'text' | options: text/number/idcard/digit/nickname | N value | String | '' | - | N

Search Events

name | params | description -- | -- | -- action-click | ({}) | - blur | ({ value: string }) | - change | ({ value: string }) | - clear | ({ value: string }) | - focus | ({ value: string }) | - submit | ({ value: string }) | -

Search External Classes

className | Description -- | -- t-class | - t-class-action | - t-class-clear | - t-class-input | - t-class-input-container | - t-class-left | -

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- --td-search-action-color | @brand-color | - --td-search-bg-color | @bg-color-secondarycontainer | - --td-search-clear-icon-color | @text-color-placeholder | - --td-search-clear-icon-font-size | 48rpx | - --td-search-font-size | @font-size-m | - --td-search-height | 80rpx | - --td-search-icon-color | @text-color-placeholder | - --td-search-icon-font-size | 48rpx | - --td-search-label-color | @text-color-primary | - --td-search-padding | 16rpx 24rpx | - --td-search-placeholder-color | @text-color-placeholder | - --td-search-result-high-light-color | @brand-color | - --td-search-square-radius | @radius-default | - --td-search-text-color | @text-color-primary | -