是否可以在同一页面中使用多个 <ons-speed-dial>？

Question

我在同一个页面定义了两次ons-speed-dial。

像这样。

<!-- 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>

当我点击 second-dial 时，ons-speed-dial-item 显示在 下方第一次拨号.

是否可以通过任何方式在第二个拨号下显示ons-speed-dial-item？

Answer 1

是的，是的。您必须向两个 <ons-speed-dial> 标签添加 "position" 属性，例如 position="top left"，然后向其中一个添加 "marigin"。

因此您的代码应如下所示：

<!-- 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>

是否可以在同一页面中使用多个 <ons-speed-dial>？

Is it possible to use multiple <ons-speed-dial> in a same page?

onsen-ui