如何将fab按钮放置在div边缘上？

在页面的顶部，我已经有了一个为其设置了背景图像的div。我想把这个fab按钮放在这个div的右下角。完全像下面的图片。我怎样才能做到这一点？如何将fab按钮放置在div边缘上？

2017-10-13 Meysam

使用'edge'它放置FAB按钮DIV中，这是我们要分配背景图像，这样我们就可以使用relative定位很重要FAB属性不适合你？ https://ionicframework.com/docs/components/#fabs –

@GabrielBarreto不，它只将FAB放置在屏幕的底部或顶部边缘。 – Meysam

发布您的代码，我们可以看看 –

这是我能得到的工作。这可以通过创建一个将在此页面上覆盖主容器的fab容器来实现。为了这个工作，你需要知道他们的高度。然后，我们使fab-container z-index为1。然后我们可以使用flex来使晶圆厂位于右下角。然后，我们可以在晶圆厂容器上增加一半尺寸的晶圆厂，让晶圆厂在半途中盘旋。最后，我们可以添加保证金 - 右侧将晶圆厂从右侧移开。

这可能不是最好的方法，因为它需要知道容器的高度，但这是我接近这个任务的方式。

<ion-content> 
    <div class="container"></div> 
    <div class="fab-conatainer"> 
     <ion-fab class="fab"> 
      <button ion-fab> 
       <ion-icon name="camera"></ion-icon> 
      </button> 
     </ion-fab> 
    </div> 
    <div class="contacts-container"> 
     <ion-list> 
      <ion-item> 
       <ion-input placeholder="Name"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-input placeholder="Phone"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-input placeholder="Email"></ion-input> 
      </ion-item> 
     </ion-list> 
    </div> 
</ion-content>

CSS

.container { 
    width: 100%; 
    background: #333; 
    height: 500px; 
} 

.fab-conatainer { 
    display: flex; 
    justify-content: flex-end; 
    align-items: flex-end; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 500px; 
    z-index: 1; 
    margin-top: 28px; 
} 

.fab { 
    margin-right: 14px; 
}

来源

2017-10-13 16:31:07

感谢您的帮助，请看看我的答案。 – Meysam

只需使用edge属性与fabs走来：

<ion-fab bottom right edge> 
    <button ion-fab><ion-icon name="camera"></ion-icon></button> 
</ion-fab>

对于这项工作具有晶圆厂div（或标签）内必须有position设为relative，absolute或fixed即可工作，根据父定位，也可能工作。

希望这会有所帮助。

来源

2017-10-13 18:58:05

感谢您的帮助，请看看我的答案。 – Meysam

感谢@Garrett和@Gabriel，我使用以下标记和scss工作。

<ion-content> 

    <div id="header"> 
    <ion-fab bottom right edge> 
     <button ion-fab><ion-icon name="camera"></ion-icon></button> 
    </ion-fab> 
    </div> 

</ion-content>

而且scss文件：

#header { 
    background-image: url('../assets/images/anonymous.jpg')!important; 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    height: 25vh; 
} 

ion-fab { 
    position: relative; 
} 

ion-fab[bottom][edge] { 
    bottom: -21vh; 
} 

.fab { 
    margin-right: 3vw; 
}

来源

2017-10-13 20:05:54 Meysam

如何将fab按钮放置在div边缘上？

回答

相关问题