Material FAB replicates the floating action buttons(FAB) using material design 3 specifications in openHarmony.
For using materialfab in your app, add the below dependency in entry/package.json
"dependencies": {
"@ohos/materialfab": "file:../materialfab"
}
Import all components at once
import {FAB_extended, FAB_regular, FabType, FabExtendedModel, FabRegularModel} from '@ohos/materialfab'
Name | Return Type | Description |
---|---|---|
setFabIcon(fabIcon: ResourceStr) |
CommonProperties |
sets icon for the fab. |
getFabIcon() |
ResourceStr |
return fab icon. |
setIconSize(iconSize: SizeOptions) |
CommonProperties |
sets custom icon size. |
getIconSize() |
SizeOptions |
returns icon size. |
setIconPadding(iconPadding: Padding) |
CommonProperties |
sets padding to the icon. |
getIconPadding() |
Padding |
return icon padding. |
setRippleModel(rippleModel: RippleModel.Model) |
CommonProperties |
sets custom ripple model. |
getRippleModel() |
RippleModel.Model |
return current ripple model. |
setFabSize(fabSize: SizeOptions) |
CommonProperties |
sets custom fab size. |
getFabSize() |
SizeOptions |
return current fab size. |
setBackgroundColor(backgroundColor: ResourceColor) |
CommonProperties |
sets fab background color. |
getBackgroundColor() |
ResourceColor |
return fab background color. |
setBorder(border: BorderOptions) |
CommonProperties |
sets custom border for the fab. |
getBorder() |
BorderOptions |
return current border specs. |
setPosition(position: Position) |
CommonProperties |
sets fab position. |
getPosition() |
BorderOptions |
return current position of the fab. |
setRippleColor(rippleColor : ResourceColor) |
CommonProperties |
sets custom ripple color. |
getRippleColor() |
ResourceColor |
return current ripple color. |
Implementation of Regular FAB buttons with size options as SMALL, MEDIUM and LARGE.
Name | Return Type | Description |
---|---|---|
setFabType(fabType : FabType) |
FabRegularModel.Model |
sets fab type. Defaults to FabType.MEDIUM |
getFabType() |
FabType |
return current fab type. |
Name | Description |
---|---|
SMALL |
Small fab as per material design 3 specifications. |
MEDIUM |
Medium fab as per material design 3 specifications. |
LARGE |
Large fab as per material design 3 specifications. |
import {FAB_regular, FabRegularModel, FabType} from '@ohos/materialfab'
@Entry
@Component
struct SMALL_fab_demo {
model : FabRegularModel.Model = new FabRegularModel.Model().setFabType(FabType.SMALL)
aboutToAppear(){
this.model.setPosition({x : 100, y : 300})
}
build() {
Column() {
FAB_regular({
model : this.model,
onClick : (event) => {
AlertDialog.show({ message: 'You clicked SMALL fab' })
}
})
}.height('100%')
}
}
import {FAB_regular, FabRegularModel, FabType} from '@ohos/materialfab'
@Entry
@Component
struct MEDIUM_fab_demo {
model : FabRegularModel.Model = new FabRegularModel.Model().setFabType(FabType.MEDIUM)
aboutToAppear(){
this.model.setPosition({x : 100, y : 300})
this.model.setBackgroundColor(Color.Green)
}
build() {
Column() {
FAB_regular({
model : this.model,
onClick : (event) => {
AlertDialog.show({ message: 'You clicked MEDIUM fab' })
}
})
}.height('100%')
}
}
import {FAB_regular, FabRegularModel, FabType} from '@ohos/materialfab'
@Entry
@Component
struct LARGE_fab_demo {
model : FabRegularModel.Model = new FabRegularModel.Model().setFabType(FabType.LARGE)
aboutToAppear(){
this.model.setPosition({x : 100, y : 300})
this.model.setBackgroundColor(Color.Red)
}
build() {
Column() {
FAB_regular({
model : this.model,
onClick : (event) => {
AlertDialog.show({ message: 'You clicked LARGE fab' })
}
})
}.height('100%')
}
}
Implementation of Extended FAB buttons with an options for addition of leading icon.
Name | Return Type | Description |
---|---|---|
setFabLabel(fabLabel : string or Resource) |
FabExtendedModel.Model |
sets label text. |
getFabLabel() |
string or Resource |
return label text. |
setFontColor(fontColor : ResourceColor) |
FabExtendedModel.Model |
sets text color. |
getFontColor() |
ResourceColor |
return text color. |
setFontStyle(fontStyle : FontStyle) |
FabExtendedModel.Model |
sets font style. |
getFontStyle() |
FontStyle |
returns font style. |
setFontSize(fontSize : number or string or Resource) |
FabExtendedModel.Model |
sets text size. |
getFontSize() |
number or string or Resource |
returns current text size. |
setFontWeight(fontWeight : FontWeight) |
FabExtendedModel.Model |
sets font weight. |
getFontWeight() |
FontWeight |
returns font weight. |
setTextPadding(textPadding : Padding) |
FabExtendedModel.Model |
sets text padding. |
getTextPadding() |
Padding |
return current text padding. |
setFabMaxWidth(fabMaxWidth : number) |
FabExtendedModel.Model |
sets maximum allowed width for fab. |
getFabMaxWidth() |
number |
return maximum allowed width for the fab. |
import {FAB_extended, FabExtendedModel} from '@ohos/materialfab'
@Entry
@Component
struct extended_fab_demo {
model : FabExtendedModel.Model = new FabExtendedModel.Model()
aboutToAppear(){
this.model.setPosition({x : 100, y : 300})
this.model.setFabIcon($r('app.media.add_icon'))
}
build() {
Column() {
FAB_extended({
model : this.model,
onClick : (event) => {
AlertDialog.show({ message: 'You clicked extended fab' })
}
})
}.height('100%')
}
}
import {FAB_extended, FabExtendedModel} from '@ohos/materialfab'
@Entry
@Component
struct extended_fab_demo {
model : FabExtendedModel.Model = new FabExtendedModel.Model()
aboutToAppear(){
this.model.setPosition({x : 100, y : 300})
this.model.setBackgroundColor(Color.Gray)
}
build() {
Column() {
FAB_extended({
model : this.model,
onClick : (event) => {
AlertDialog.show({ message: 'You clicked extended fab' })
}
})
}.height('100%')
}
}
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.