javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(searchbar): use back button config value (#19353)

Browse Source 
fixes #19347
This commit is contained in:
Michael Asimakopoulos
2019-10-16 18:41:25 +03:00
committed by Brandy Carney
parent 2981eaa501
commit ed6f3b9f3f
4 changed files with 25 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -942,7 +942,7 @@ ion-searchbar,scoped
ion-searchbar,prop,animated,boolean,false,false,false ion-searchbar,prop,animated,boolean,false,false,false
ion-searchbar,prop,autocomplete,"off" | "on",'off',false,false ion-searchbar,prop,autocomplete,"off" | "on",'off',false,false
ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
ion-searchbar,prop,cancelButtonIcon,string,'md-arrow-back',false,false ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', 'md-arrow-back') as string,false,false
ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false
ion-searchbar,prop,color,string | undefined,undefined,false,false ion-searchbar,prop,color,string | undefined,undefined,false,false

38
core/src/components/searchbar/readme.md
View File

@ -219,25 +219,25 @@ export const SearchbarExample: React.FC = () => (
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ----------------- | | ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| `animated` | `animated` | If `true`, enable searchbar animation. | `boolean` | `false` | | `animated` | `animated` | If `true`, enable searchbar animation. | `boolean` | `false` |
| `autocomplete` | `autocomplete` | Set the input's autocomplete property. | `"off" \| "on"` | `'off'` | | `autocomplete` | `autocomplete` | Set the input's autocomplete property. | `"off" \| "on"` | `'off'` |
| `autocorrect` | `autocorrect` | Set the input's autocorrect property. | `"off" \| "on"` | `'off'` | | `autocorrect` | `autocorrect` | Set the input's autocorrect property. | `"off" \| "on"` | `'off'` |
| `cancelButtonIcon` | `cancel-button-icon` | Set the cancel button icon. Only applies to `md` mode. | `string` | `'md-arrow-back'` | | `cancelButtonIcon` | `cancel-button-icon` | Set the cancel button icon. Only applies to `md` mode. | `string` | `config.get('backButtonIcon', 'md-arrow-back') as string` |
| `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. | `string` | `'Cancel'` | | `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. | `string` | `'Cancel'` |
| `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. | `string \| undefined` | `undefined` | | `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. | `string \| undefined` | `undefined` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` | | `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` | | `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `'search'` | | `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` | | `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` |
| `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` | | `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` |
| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `"always" \| "focus" \| "never"` | `'never'` | | `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `"always" \| "focus" \| "never"` | `'never'` |
| `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` | | `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` |
| `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` | | `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |
| `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` | | `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` |
## Events ## Events

2
core/src/components/searchbar/searchbar.tsx
View File

@ -54,7 +54,7 @@ export class Searchbar implements ComponentInterface {
/** /**
* Set the cancel button icon. Only applies to `md` mode. * Set the cancel button icon. Only applies to `md` mode.
*/ */
@Prop() cancelButtonIcon = 'md-arrow-back'; @Prop() cancelButtonIcon = config.get('backButtonIcon', 'md-arrow-back') as string;
/** /**
* Set the the cancel button text. Only applies to `ios` mode. * Set the the cancel button text. Only applies to `ios` mode.

4
core/src/components/searchbar/test/basic/index.html
View File

@ -78,6 +78,10 @@
<ion-searchbar show-cancel-button="focus" cancel-button-text="Really Long Cancel" color="danger"> <ion-searchbar show-cancel-button="focus" cancel-button-text="Really Long Cancel" color="danger">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Custom Cancel Button Icon through property</h5>
<ion-searchbar show-cancel-button="focus" cancel-button-icon="rewind">
</ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Value passed </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Value passed </h5>
<ion-searchbar value="mysearch" cancel-button-text="Really Long Cancel" color="dark" show-cancel-button="focus"> <ion-searchbar value="mysearch" cancel-button-text="Really Long Cancel" color="dark" show-cancel-button="focus">
</ion-searchbar> </ion-searchbar>