代码之家 › 专栏 › 技术社区 › Pedro V. Coelho

如何在nativescript中实现底部导航栏和一个摇篮浮动操作按钮(fab)?

bottombar floating-action-button nativescript material-design angular

Pedro V. Coelho · 技术社区 · 5 年前

我需要实现一个底部导航栏,其中包含一个以水平居中的摇篮浮动操作按钮(fab),使用原生脚本(angular/typescript),如下所示:

BottomAppBar with a cradled FAB

对如何实现这个特性有什么想法吗?

有两个nativescript插件可以通过组合实现最终结果: Floating Action Button 和 Bottom Navigation 但是当试图将css clip path属性应用到底部导航栏以创建中心fab的摇篮效果时,它不起作用。

此外,还有一个很接近的解决方案,但只是缺少了我希望实现的“摇篮/间隙”效果: How to create a custom navigation bar in NativeScript?

0 回复 | 直到 5 年前

Henry Chávez 5 年前

实际上,这个实现需要用 bottomappbar 来自材料组件的组件。

这就是 repo 在那里您可以找到该组件的初始实现,可以随意贡献

推荐文章

coder-guy · 如何在角度应用程序中添加材质工具栏?

2 年前

Infii · 带有自定义数据模板的水平ListView

6 年前

ton1 · 如何添加borderTop以反应材质UI表?

6 年前

Demonic218 · 在Android中实现材质设计时出错

6 年前

Jus10 · 弗利特:你如何让卡片可以点击?

6 年前

Marko Zadravec · 带选项卡的引导导航

7 年前

James · 全宽材质UI网格无法正常工作

7 年前

HovSky · jQuery选项卡检查类未检查类

7 年前

Marko Zadravec · 更改django材质库中的选定颜色

7 年前

Geeta · 选定选项上未显示图像

7 年前