質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Q&A

1回答

1303閲覧

Ionic2 Button設定について

ac12

総合スコア21

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

0グッド

0クリップ

投稿2017/04/11 09:01

Ionic2でアコーディオンを実装して、その中にボタンを設置したのですが、案の定ボタンを押す前にアコーディオンが反応してしまい、ボタンをことが出来ません。
toFront(最前面へ)のようなものはないのでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

accordionの実装がどのようになっているかですが、以下の場合だと厳しいと思います。

html

1<button *ngFor="let item of items" ion-item (click)="toggle()"> 2 <div>{{item}}</div> 3 <button (click)="nest()">nest item</button> 4</button>

上記のコードですとアコーディオン内も含めて全体にtoggle()の処理がかかってきます。内部のエレメントを最前面にということもできないと思われます。

解決策としては、アコーディオンの開閉を行う箇所と、実際にトグルする箇所を分けるといった感じでしょうか。

html

1<div class="accordion-item" *ngFor="let item of items"> 2 <button ion-item (click)="toggle()"></button> 3 <div class="accordion-item">{{item}}</div> 4 <button (click)="nest()">nest item</button> 5</div>

上記のようにすれば、内部のボタン(nest())押下時にtoggle()が反応することはありません。

投稿2017/04/22 12:12

scrpgil

総合スコア109

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問