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>

当我点击二次拨号时，第一次拨号下会显示 ons-speed-dial-item 。

是否可以以任何方式在第二个表盘下显示ons-speed-dial-item？

Answer 1

是的，确实如此。您必须为<ons-speed-dial>个标记添加“位置”属性，例如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>？

1 个答案: