我有一个标签和组单选按钮(两个),我想让它像图片一样水平对齐。
我试过这段代码:
`<ion-row radio-group [(ngModel)]="Sexe">
<ion-col>
<ion-item>
<ion-label color="primary">Sexe</ion-label>
<ion-radio value="Mr"></ion-radio>
<ion-radio value="Mme"></ion-radio>
</ion-item>
</ion-col>
</ion-row>`
以及此代码:
`<ion-row radio-group [(ngModel)]="Sexe">
<ion-col>
<ion-item>
<ion-label color="primary">Sexe</ion-label>
</ion-item>
<ion-item>
<ion-radio value="Mr"></ion-radio>
</ion-item>
<ion-item>
<ion-radio value="Mme"></ion-radio>
</ion-item>
</ion-col>
</ion-row>`
但我没有得到我想要的结果。
答案 0 :(得分:16)
您可以使用ion-row
和ion-col
元素。请查看this working plunker。
<ion-row radio-group [(ngModel)]="sexe">
<ion-col>
<ion-item>
Sexe
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>Homme</ion-label>
<ion-radio value="homme"></ion-radio>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>Femme</ion-label>
<ion-radio value="femme"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
由于我们使用单行和三列,标题和广播项目将全部放在同一行(水平对齐)。
答案 1 :(得分:0)
<ion-row>
<ion-label class="ion-label" color=dark>Save</ion-label>
</ion-row>
<ion-row radio-group [(ngModel)]="relationship" class="item">
<ion-col>
<ion-radio value="manually" checked></ion-radio>
<ion-label>Manually</ion-label>
</ion-col>
<ion-col>
<ion-radio value="automatic"></ion-radio>
<ion-label>Automatically</ion-label>
</ion-col>
</ion-row>
答案 2 :(得分:0)
<ion-radio-group>
<ion-row>
<ion-col size="4">
<ion-item>
<ion-label>Site Visit</ion-label>
<ion-radio value="site"></ion-radio>
</ion-item>
</ion-col>
<ion-col size="4">
<ion-item>
<ion-label>Call</ion-label>
<ion-radio value="call"></ion-radio>
</ion-item>
</ion-col>
<ion-col size="4">
<ion-item>
<ion-label>Final Deal</ion-label>
<ion-radio value="deal"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
</ion-radio-group>