Ionic4で、ion-card内においたion-radioのチェック範囲を、card全体にしたい

Question

前提・実現したいこと

HTMLの話になってしまうかもしれませんが、Ionicのドキュメントを読んでもよくわからないので、質問させていただきました

こういった感じに表示させたいのですが、うまくいきません

Ionic4で、ion-cardの中にion-radioを置いて、そのチェックの選択範囲をcard全体にしたいです

上記のことを実現するためには、どういう風に書けばよろしいでしょうか？

発生している問題・エラーメッセージ

ion-label要素内で表示させようとしている内容が表示されない
ラジオボタンがあるであろう場所でクリックすることでしかチェックされない

試したこと

ion-itemでくくってみたが、ion-labelが表示されないので、p要素やその他で表示させても縦に長い要素で変な感じで表示されてしまう

         <ion-radio-group>
            <ion-grid>
                <ion-row>
                    <ion-col size="4">
                        <ion-item lines="none" type="reset">
                            <ion-icon name="subway" size="large"></ion-icon>
                            <ion-label>交通機関</ion-label>
                            <ion-radio class="facilityType" name="facilityType" value="1"
                                       (click)="radioChangeHandler($event)">
                            </ion-radio>
                        </ion-item>
                    </ion-col>
                    <ion-col size="4">
                        <ion-card>
                            <ion-icon name="aperture" size="large"></ion-icon>
                            <ion-label>レジャー施設</ion-label>
                            <ion-radio class="facilityType" name="facilityType" value="2"
                                       (click)="radioChangeHandler($event)">
                            </ion-radio>
                        </ion-card>
                    </ion-col>
                    <ion-col size="4">
                        <ion-card>
                            <ion-icon name="flower" size="large"></ion-icon>
                            <ion-label>文化施設</ion-label>
                            <ion-radio class="facilityType" name="facilityType" value="3"
                                       (click)="radioChangeHandler($event)">
                            </ion-radio>
                        </ion-card>
                    </ion-col>
                </ion-row>
以下略

補足情報（FW/ツールのバージョンなど）

ionic 4.10.2

Answer 1

いくつか作り方はありますが、私でしたらIonicでは ion-card だけを使って、他はHTML/CSSを書きます。以下みたいな感じでしょうか。

<div style="display: flex; align-items: stretch;">
  <ion-card></ion-card>
  <ion-card></ion-card>
  <ion-card></ion-card>
</div>

選択についても、 label と input[type=radio] をつかって自分で実装した方が早いと思います。IonicのComponentsは見栄えの部分のサポートと割り切って、必要に応じて使っていくぐらいの割り切りでいいと思っておりますー！