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

update usage docs

Browse Source
This commit is contained in:
Liam DeBeasi
2019-06-11 11:28:15 -04:00
parent b959e0b5ec
commit 0b78a00afb
5 changed files with 80 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,15 @@ A Searchbar should be used instead of an input to search lists. A clear button i
<!-- Default Searchbar --> <!-- Default Searchbar -->
<ion-searchbar></ion-searchbar> <ion-searchbar></ion-searchbar>
<!-- Searchbar with cancel button always shown -->
<ion-searchbar showCancelButton="always"></ion-searchbar>
<!-- Searchbar with cancel button never shown -->
<ion-searchbar showCancelButton="never"></ion-searchbar>
<!-- Searchbar with cancel button shown on focus -->
<ion-searchbar showCancelButton="focus"></ion-searchbar>
<!-- Searchbar with danger color --> <!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar> <ion-searchbar color="danger"></ion-searchbar>
@ -30,7 +39,7 @@ A Searchbar should be used instead of an input to search lists. A clear button i
<ion-searchbar disabled="true"></ion-searchbar> <ion-searchbar disabled="true"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text --> <!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar> <ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>
<!-- Searchbar with a custom debounce --> <!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar> <ion-searchbar debounce="500"></ion-searchbar>
@ -54,6 +63,15 @@ A Searchbar should be used instead of an input to search lists. A clear button i
<!-- Default Searchbar --> <!-- Default Searchbar -->
<ion-searchbar></ion-searchbar> <ion-searchbar></ion-searchbar>
<!-- Searchbar with cancel button always shown -->
<ion-searchbar show-cancel-button="always"></ion-searchbar>
<!-- Searchbar with cancel button never shown -->
<ion-searchbar show-cancel-button="never"></ion-searchbar>
<!-- Searchbar with cancel button shown on focus -->
<ion-searchbar show-cancel-button="focus"></ion-searchbar>
<!-- Searchbar with danger color --> <!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar> <ion-searchbar color="danger"></ion-searchbar>
@ -67,7 +85,7 @@ A Searchbar should be used instead of an input to search lists. A clear button i
<ion-searchbar disabled="true"></ion-searchbar> <ion-searchbar disabled="true"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text --> <!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar> <ion-searchbar show-cancel-button="focus" cancel-button-text="Custom Cancel"></ion-searchbar>
<!-- Searchbar with a custom debounce --> <!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar> <ion-searchbar debounce="500"></ion-searchbar>
@ -97,6 +115,15 @@ const Example: React.SFC<{}> = () => (
{/*-- Default Searchbar --*/} {/*-- Default Searchbar --*/}
<IonSearchbar></IonSearchbar> <IonSearchbar></IonSearchbar>
{/*-- Searchbar with cancel button always shown --*/}
<IonSearchbar showCancelButton="always"></IonSearchbar>
{/*-- Searchbar with cancel button never shown --*/}
<IonSearchbar showCancelButton="never"></IonSearchbar>
{/*-- Searchbar with cancel button shown on focus --*/}
<IonSearchbar showCancelButton="focus"></IonSearchbar>
{/*-- Searchbar with danger color --*/} {/*-- Searchbar with danger color --*/}
<IonSearchbar color="danger"></IonSearchbar> <IonSearchbar color="danger"></IonSearchbar>
@ -110,7 +137,7 @@ const Example: React.SFC<{}> = () => (
<IonSearchbar disabled="true"></IonSearchbar> <IonSearchbar disabled="true"></IonSearchbar>
{/*-- Searchbar with a cancel button and custom cancel button text --*/} {/*-- Searchbar with a cancel button and custom cancel button text --*/}
<IonSearchbar showCancelButton cancelButtonText="Custom Cancel"></IonSearchbar> <IonSearchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></IonSearchbar>
{/*-- Searchbar with a custom debounce --*/} {/*-- Searchbar with a custom debounce --*/}
<IonSearchbar debounce={500}></IonSearchbar> <IonSearchbar debounce={500}></IonSearchbar>
@ -139,6 +166,15 @@ export default Example;
<!-- Default Searchbar --> <!-- Default Searchbar -->
<ion-searchbar></ion-searchbar> <ion-searchbar></ion-searchbar>
<!-- Searchbar with cancel button always shown -->
<ion-searchbar showCancelButton="always"></ion-searchbar>
<!-- Searchbar with cancel button never shown -->
<ion-searchbar showCancelButton="never"></ion-searchbar>
<!-- Searchbar with cancel button shown on focus -->
<ion-searchbar showCancelButton="focus"></ion-searchbar>
<!-- Searchbar with danger color --> <!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar> <ion-searchbar color="danger"></ion-searchbar>
@ -152,7 +188,7 @@ export default Example;
<ion-searchbar disabled="true"></ion-searchbar> <ion-searchbar disabled="true"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text --> <!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar> <ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>
<!-- Searchbar with a custom debounce --> <!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar> <ion-searchbar debounce="500"></ion-searchbar>

11
core/src/components/searchbar/usage/angular.md
View File

@ -2,6 +2,15 @@
<!-- Default Searchbar --> <!-- Default Searchbar -->
<ion-searchbar></ion-searchbar> <ion-searchbar></ion-searchbar>
<!-- Searchbar with cancel button always shown -->
<ion-searchbar showCancelButton="always"></ion-searchbar>
<!-- Searchbar with cancel button never shown -->
<ion-searchbar showCancelButton="never"></ion-searchbar>
<!-- Searchbar with cancel button shown on focus -->
<ion-searchbar showCancelButton="focus"></ion-searchbar>
<!-- Searchbar with danger color --> <!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar> <ion-searchbar color="danger"></ion-searchbar>
@ -15,7 +24,7 @@
<ion-searchbar disabled="true"></ion-searchbar> <ion-searchbar disabled="true"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text --> <!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar> <ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>
<!-- Searchbar with a custom debounce --> <!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar> <ion-searchbar debounce="500"></ion-searchbar>

11
core/src/components/searchbar/usage/javascript.md
View File

@ -2,6 +2,15 @@
<!-- Default Searchbar --> <!-- Default Searchbar -->
<ion-searchbar></ion-searchbar> <ion-searchbar></ion-searchbar>
<!-- Searchbar with cancel button always shown -->
<ion-searchbar show-cancel-button="always"></ion-searchbar>
<!-- Searchbar with cancel button never shown -->
<ion-searchbar show-cancel-button="never"></ion-searchbar>
<!-- Searchbar with cancel button shown on focus -->
<ion-searchbar show-cancel-button="focus"></ion-searchbar>
<!-- Searchbar with danger color --> <!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar> <ion-searchbar color="danger"></ion-searchbar>
@ -15,7 +24,7 @@
<ion-searchbar disabled="true"></ion-searchbar> <ion-searchbar disabled="true"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text --> <!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar> <ion-searchbar show-cancel-button="focus" cancel-button-text="Custom Cancel"></ion-searchbar>
<!-- Searchbar with a custom debounce --> <!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar> <ion-searchbar debounce="500"></ion-searchbar>

11
core/src/components/searchbar/usage/react.md
View File

@ -8,6 +8,15 @@ const Example: React.SFC<{}> = () => (
{/*-- Default Searchbar --*/} {/*-- Default Searchbar --*/}
<IonSearchbar></IonSearchbar> <IonSearchbar></IonSearchbar>
{/*-- Searchbar with cancel button always shown --*/}
<IonSearchbar showCancelButton="always"></IonSearchbar>
{/*-- Searchbar with cancel button never shown --*/}
<IonSearchbar showCancelButton="never"></IonSearchbar>
{/*-- Searchbar with cancel button shown on focus --*/}
<IonSearchbar showCancelButton="focus"></IonSearchbar>
{/*-- Searchbar with danger color --*/} {/*-- Searchbar with danger color --*/}
<IonSearchbar color="danger"></IonSearchbar> <IonSearchbar color="danger"></IonSearchbar>
@ -21,7 +30,7 @@ const Example: React.SFC<{}> = () => (
<IonSearchbar disabled="true"></IonSearchbar> <IonSearchbar disabled="true"></IonSearchbar>
{/*-- Searchbar with a cancel button and custom cancel button text --*/} {/*-- Searchbar with a cancel button and custom cancel button text --*/}
<IonSearchbar showCancelButton cancelButtonText="Custom Cancel"></IonSearchbar> <IonSearchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></IonSearchbar>
{/*-- Searchbar with a custom debounce --*/} {/*-- Searchbar with a custom debounce --*/}
<IonSearchbar debounce={500}></IonSearchbar> <IonSearchbar debounce={500}></IonSearchbar>

11
core/src/components/searchbar/usage/vue.md
View File

@ -3,6 +3,15 @@
<!-- Default Searchbar --> <!-- Default Searchbar -->
<ion-searchbar></ion-searchbar> <ion-searchbar></ion-searchbar>
<!-- Searchbar with cancel button always shown -->
<ion-searchbar showCancelButton="always"></ion-searchbar>
<!-- Searchbar with cancel button never shown -->
<ion-searchbar showCancelButton="never"></ion-searchbar>
<!-- Searchbar with cancel button shown on focus -->
<ion-searchbar showCancelButton="focus"></ion-searchbar>
<!-- Searchbar with danger color --> <!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar> <ion-searchbar color="danger"></ion-searchbar>
@ -16,7 +25,7 @@
<ion-searchbar disabled="true"></ion-searchbar> <ion-searchbar disabled="true"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text --> <!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar> <ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>
<!-- Searchbar with a custom debounce --> <!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar> <ion-searchbar debounce="500"></ion-searchbar>