/ /同じページに複数の<ons-speed-dial>を使用することは可能ですか? - onsen-ui

複数の<ons-speed-dial>を同じページで使用できますか? - 温泉

2回定義した オンスピードダイヤル 同じページに。

このような。

<!-- Define first speed dial -->
<ons-speed-dial id="first-dial" direction="down">
<ons-fab>
<ons-icon icon="ion-android-more-vertical"></ons-icon>
</ons-fab>
<ons-speed-dial-item>
<ons-icon icon="ion-android-create"></ons-icon>
</ons-speed-dial-item>
</ons-speed-dial>

<!-- Define second speed dial -->
<ons-speed-dial id="second-dial" direction="down">
<ons-fab>
<ons-icon icon="ion-ios-eye-outline"></ons-icon>
</ons-fab>
<ons-speed-dial-item>
<ons-icon icon="ion-android-done"></ons-icon>
</ons-speed-dial-item>
</ons-speed-dial>

私がクリックすると セカンドダイヤルスピードダイヤル項目 の下に表示されます ファーストダイヤル.

セカンドダイヤルの下にons-speed-dial-itemを表示することは可能ですか。

回答:

回答№1は2

はい、そうです。両方に "position"属性を追加する必要があります <ons-speed-dial> たとえば、タグ position="top left"次に、それらの1つに「マリギン」を追加します。

したがって、コードは次のようになります。

<!-- Define first speed dial -->
<ons-speed-dial id="first-dial" direction="down" position="top left" >
<ons-fab>
<ons-icon icon="ion-android-more-vertical"></ons-icon>
</ons-fab>
<ons-speed-dial-item>
<ons-icon icon="ion-android-create"></ons-icon>
</ons-speed-dial-item>
</ons-speed-dial>

<!-- Define second speed dial -->
<ons-speed-dial id="second-dial" direction="down" position="top left" style="margin-left: 70px;">
<ons-fab>
<ons-icon icon="ion-ios-eye-outline"></ons-icon>
</ons-fab>
<ons-speed-dial-item>
<ons-icon icon="ion-android-done"></ons-icon>
</ons-speed-dial-item>
</ons-speed-dial>