This library is developed to provide material bottom bar implemented using extended typescript.
npm install @ohos/material-bottombar --save
- Import files and code dependencies
import { BottomBar, NavigationIcon, FloatingActionButton, OptionMenu } from "@ohos/material-bottombar"
- Code for creating bottom bar design 1
Declaring models for creating bottom bar
let model: BottomBar.Model = new BottomBar.Model()
let navigationIcon = new NavigationIcon.Model()
.setIcon($r('app.media.menu'))
let floatingActionButton = new FloatingActionButton.Model()
.setFabIcon($r('app.media.plus'))
.setFabPosition(FabPosition.Center)
let options = [
new OptionMenu.Model(1)
.setIcon($r('app.media.search'))
.setText('search'),
new OptionMenu.Model(2)
.setIcon($r('app.media.settings'))
.setText('Settings'),
new OptionMenu.Model(3)
.setIcon($r('app.media.feedback'))
.setText('Send Feedback'),
new OptionMenu.Model(4)
.setIcon($r('app.media.help'))
.setText('Help')
]
this.bottomBarModel1
.setFabPosition(FabPosition.Center)
.setNavigationIcon(navigationIcon)
.setFabModel(floatingActionButton)
.setOptions(options)
.setBackgroundColor('rgb(145,0,255)')
.addNavigationListener(this.navigationIconClick)
.addFabListener(this.fabClick)
.addOptionListener(this.optionClick)
BottomBar({ model: this.model })
- Code for creating Bottom Bar Design 2
Declaring models for creating bottom bar
let model: BottomBar.Model = new BottomBar.Model()
let navigationIcon = new NavigationIcon.Model()
.setIcon($r('app.media.menu'))
let floatingActionButton = new FloatingActionButton.Model()
.setFabPosition(FabPosition.Right)
.setFabIcon($r('app.media.plus'))
let options = [
new OptionMenu.Model(1)
.setIcon($r('app.media.check_box'))
.setText("check_box"),
new OptionMenu.Model(2)
.setIcon($r('app.media.brush'))
.setText('brush'),
new OptionMenu.Model(3)
.setIcon($r('app.media.mic'))
.setText('mic')
.setWidth('16vp'),
new OptionMenu.Model(4)
.setIcon($r('app.media.images'))
.setText('images')
]
this.bottomBarModel2
.setFabPosition(FabPosition.Right)
.setNavigationIcon(navigationIcon)
.setFabModel(floatingActionButton)
.setOptions(options)
.setBackgroundColor('rgb(145,0,255)')
.addNavigationListener(this.navigationIconClick)
.addFabListener(this.fabClick)
.addOptionListener(this.optionClick)
BottomBar({ model: this.model })
let model: BottomBar.Model = new BottomBar.Model()
- Set navigation icon
model.setNavigationIcon() - Set floating action button model
model.setFabModel() - Set options
model.setOptions() - Set app bar background color
model.setBackgroundColor() - Set callback function for navigation icon click
model.addNavigationListener() - Set callback function for floating action button icon click
model.addFabListener() - Set callback function for option click
model.addOptionListener()
let navigationIcon = new NavigationIcon.Model()
- Set icon
model.setIcon() - Set width
model.setWidth() - Set height
model.setHeight()
let floatingActionButton = new FloatingActionButton.Model()
- Set icon
model.setFabIcon() - Set width
model.setFabWidth() - Set height
model.setFabHeight() - Set icon width
model.setIconWidth() - Set icon height
model.setIconHeight() - Set elevation
model.setFabElevation()
let optionMenu = new OptionMenu.Model(1, "Option Menu")
- Set id & label
new OptionMenu.Model(1, "Option Menu") - Set icon
model.setIcon() - Set width
model.setWidth() - Set height
model.setHeight()
Supports OpenHarmony API version 9
If you find any problems during usage, you can submit an Issue to us. Of course, we also welcome you to send us PR.
This project is based on Apache License 2.0, please enjoy and participate in open source freely.
Design by : Amir Ahmed Imtiaz
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent