11 componentes comúnmente utilizados por iónico
componente de encabezado
componente de la lista
Componentes de la tarjeta
Componente casilla de verificación
Componente del botón de radio
Componente de selección desplegable
Componente del botón
componente de chip
Componente de gráficos
Componente de entrada
Componente de la tabla
1. El componente de encabezado
Código de demostración
<ion-header >
<ion-toolbar>
<ion-title>ionic组件header部分</ion-title>
<ion-button slot="end" size="small">浏览</ion-button>
</ion-toolbar>
</ion-header>
<ion-content >
Efecto corriente
2. componente de la lista
Código de demostración
<ion-list>
<ion-item>
<ion-label> 元素1</ion-label>
<ion-button>元素1</ion-button>
</ion-item>
<ion-item>
<ion-label> 元素2</ion-label>
<ion-button>元素2</ion-button>
</ion-item>
<ion-item>
<ion-label> 元素3</ion-label>
<ion-button>元素3</ion-button>
</ion-item>
<ion-item>
<ion-label> 元素4</ion-label>
<ion-button>元素4</ion-button>
</ion-item>
<ion-item>
<ion-label> 元素5</ion-label>
<ion-button>元素5</ion-button>
</ion-item>
<ion-item>
<ion-label> 元素6</ion-label>
<ion-button>元素6</ion-button>
</ion-item>
</ion-list>
Efecto corriente
3. Componentes de la tarjeta
Código de demostración
<ion-card>
<ion-card-header>
<ion-card-title>主标题</ion-card-title>
<ion-card-subtitle>副标题</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
Keep close to Nature's heart... and break clear away, once in awhile,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
</ion-card-content>
</ion-card>
Efecto corriente
4. Componente de casilla de verificación
Código de demostración
<ion-list>
<ion-item >
<ion-label>选项1</ion-label>
<ion-checkbox slot="end" ></ion-checkbox>
</ion-item>
<ion-item >
<ion-label>选项2</ion-label>
<ion-checkbox slot="end" ></ion-checkbox>
</ion-item>
<ion-item >
<ion-label>选项3</ion-label>
<ion-checkbox slot="end" ></ion-checkbox>
</ion-item>
<ion-item >
<ion-label>选项4</ion-label>
<ion-checkbox slot="end" ></ion-checkbox>
</ion-item>
<ion-item >
<ion-label>选项5</ion-label>
<ion-checkbox slot="end" ></ion-checkbox>
</ion-item>
<ion-item >
<ion-label>选项6</ion-label>
<ion-checkbox slot="end" ></ion-checkbox>
</ion-item>
</ion-list>
Efecto corriente
5. Componente de caja de radio
Código de demostración
<ion-list>
<ion-radio-group value="biff">
<ion-list-header>
<ion-label>你中午想吃什么</ion-label>
</ion-list-header>
<ion-item>
<ion-label>米线</ion-label>
<ion-radio slot="start" value="biff"></ion-radio>
</ion-item>
<ion-item>
<ion-label>面条</ion-label>
<ion-radio slot="start" value="griff"></ion-radio>
</ion-item>
<ion-item>
<ion-label>炒饭</ion-label>
<ion-radio slot="start" value="buford"></ion-radio>
</ion-item>
<ion-item>
<ion-label>盖饭</ion-label>
<ion-radio slot="start" value="fan"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
Efecto corriente
6. Tire hacia abajo para seleccionar componentes
Código de demostración (elimine el atributo multiple = "true" y conviértalo en una caja de radio)
<ion-list>
<ion-item>
<ion-label>Gender</ion-label>
<ion-select placeholder="Select One" multiple="true" cancelText="取消" okText="确定">
<ion-select-option value="f">Female</ion-select-option>
<ion-select-option value="m">Male</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
Efecto corriente
7. Componentes del botón
Código de demostración
<ion-list>
<ion-item>
<ion-label>按钮组件1</ion-label>
<ion-button color="danger" expand="block" shape="round" size="large">按钮组件</ion-button>
</ion-item>
<ion-item>
<ion-label>按钮组件2</ion-label>
<ion-button color="success" expand="block" shape="round" size="large">按钮组件</ion-button>
</ion-item>
<ion-item>
<ion-label>按钮组件3</ion-label>
<ion-button color="warning" expand="block" shape="round" size="large">按钮组件</ion-button>
</ion-item>
</ion-list>
Efecto corriente
8. Componentes de chip
Código de demostración
<ion-chip color="danger">
<ion-label>用户名</ion-label>
<ion-icon name="person-outline"></ion-icon>
</ion-chip>
<ion-chip>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label color="secondary">Secondary Label</ion-label>
</ion-chip>
<ion-chip color="secondary">
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip>
<ion-icon name="pin"></ion-icon>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-icon name="heart" color="dark"></ion-icon>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Button Chip</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
<ion-chip>
<ion-icon name="pin" color="primary"></ion-icon>
<ion-label>Icon Chip</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Avatar Chip</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
Efecto corriente
9. Componentes gráficos
Código de demostración
<ion-img src="https://www.cztcms.cn/wp-content/uploads/2020/01/logo4.png"></ion-img>
Efecto corriente
10. Componentes de entrada
Código de demostración
<ion-item>
<ion-label position="stacked">用户名</ion-label>
<ion-input placeholder="在这里输入用户名"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">留言内容</ion-label>
<ion-textarea placeholder="在这里输入留言内容" rows="4"></ion-textarea>
</ion-item>
<ion-item>
<ion-label position="stacked">出生日期</ion-label>
<ion-datetime displayFormat="YYYY-MM-DD" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>
Efecto corriente
11. Componente de formulario
Código de demostración
<ion-grid>
<ion-row>
<ion-col size="4">
<ion-avatar>
<ion-img src="https://www.cztcms.cn/img/login_logo.png">
</ion-img>
</ion-avatar>
</ion-col >
<ion-col size="8">
<ion-row>
<ion-col>姓名</ion-col>
<ion-col>微笑涛声</ion-col>
</ion-row>
<ion-row>
<ion-col>身高</ion-col>
<ion-col>保密</ion-col>
</ion-row>
<ion-row>
<ion-col>体重</ion-col>
<ion-col>保密</ion-col>
</ion-row>
</ion-col>
</ion-row>
Efecto corriente