javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(item): add helper text, error text, counter, shape, and fill mode (#23354)

Browse Source 
resolves #19619
This commit is contained in:
William Martin
2021-06-17 17:21:03 -04:00
committed by GitHub
parent dc48a9f1a2
commit faefe97da6
21 changed files with 1099 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
core/src/components/item/usage/angular.md
View File

@@ -306,6 +306,23 @@
<ion-input placeholder="Placeholder"></ion-input>
</ion-item>
<ion-item fill="solid">
<ion-label position="floating">Input (Fill: Solid)</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item fill="outline">
<ion-label position="floating">Input (Fill: Outline)</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label>Helper and Error Text</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
<ion-item>
<ion-label>Checkbox</ion-label>
<ion-checkbox slot="start"></ion-checkbox>

17
core/src/components/item/usage/javascript.md
View File

@@ -306,6 +306,23 @@
<ion-input placeholder="Placeholder"></ion-input>
</ion-item>
<ion-item fill="solid">
<ion-label position="floating">Input (Fill: Solid)</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item fill="outline">
<ion-label position="floating">Input (Fill: Outline)</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label>Helper and Error Text</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
<ion-item>
<ion-label>Checkbox</ion-label>
<ion-checkbox slot="start"></ion-checkbox>

19
core/src/components/item/usage/react.md
View File

@@ -1,6 +1,6 @@
```tsx
import React from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonDatetime, IonSelect, IonSelectOption, IonToggle, IonInput, IonCheckbox, IonRange } from '@ionic/react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonDatetime, IonSelect, IonSelectOption, IonToggle, IonInput, IonCheckbox, IonRange, IonNote } from '@ionic/react';
import { closeCircle, home, star, navigate, informationCircle, checkmarkCircle, shuffle } from 'ionicons/icons';
export const ItemExamples: React.FC = () => {
@@ -291,6 +291,23 @@ export const ItemExamples: React.FC = () => {
<IonInput placeholder="Placeholder"></IonInput>
</IonItem>
<IonItem fill="solid">
<IonLabel position="stacked">Input (Fill: Solid)</IonLabel>
<IonInput></IonInput>
</IonItem>
<IonItem fill="outline">
<IonLabel position="floating">Input (Fill: Outline)</IonLabel>
<IonInput></IonInput>
</IonItem>
<IonItem>
<IonLabel>Helper and Error Text</IonLabel>
<IonInput></IonInput>
<IonNote slot="helper">Helper Text</IonNote>
<IonNote slot="error">Error Text</IonNote>
</IonItem>
<IonItem>
<IonLabel>Checkbox</IonLabel>
<IonCheckbox slot="start" />

17
core/src/components/item/usage/stencil.md
View File

@@ -409,6 +409,23 @@ export class ItemExample {
<ion-input placeholder="Placeholder"></ion-input>
</ion-item>,
<ion-item fill="solid">
<ion-label position="floating">Input (Fill: Solid)</ion-label>
<ion-input></ion-input>
</ion-item>,
<ion-item fill="outline">
<ion-label position="floating">Input (Fill: Outline)</ion-label>
<ion-input></ion-input>
</ion-item>,
<ion-item>
<ion-label>Helper and Error Text</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>,
<ion-item>
<ion-label>Checkbox</ion-label>
<ion-checkbox slot="start"></ion-checkbox>

19
core/src/components/item/usage/vue.md
View File

@@ -321,6 +321,23 @@
<ion-input placeholder="Placeholder"></ion-input>
</ion-item>
<ion-item fill="solid">
<ion-label position="floating">Input (Fill: Solid)</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item fill="outline">
<ion-label position="floating">Input (Fill: Outline)</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label>Helper and Error Text</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
<ion-item>
<ion-label>Checkbox</ion-label>
<ion-checkbox slot="start"></ion-checkbox>
@@ -338,6 +355,7 @@ import {
IonButton,
IonCheckbox,
IonDatetime,
IonNote,
IonIcon,
IonInput,
IonItem,
@@ -366,6 +384,7 @@ export default defineComponent({
IonButton,
IonCheckbox,
IonDatetime,
IonNote,
IonIcon,
IonInput,
IonItem,