Skip to content

Neumorphism Navigtion Bar design for HarmonyOS.

License

Notifications You must be signed in to change notification settings

Applib-HarmonyOS/Navbar

Repository files navigation

Neumorphism_Navbar

Installation :

Install using npm

npm i hmos-neumorphism

Note :

Add this css snippet when passing input or button through slot .

button, input{
    width: 100%;
    height: 100%;
    background-color:transparent;
    text-color: black;
}

Navbar

Import:

<element name='neunavbar' src='../../../../../../node_modules/hmos-neumorphism/navbar/navbar.hml'></element>

Usage:

<neunavbar  width="300px" height="50px" border="50px" @right-event="buttonClick" @middle-event="buttonClick" @left-event="buttonClick">
  <image slot="first" src="common/icons/recent.png" style="width:20px; height: 20px;" ></image>
  <image slot="second" src="common/icons/home.png" style="width:20px; height: 20px;" ></image>
  <image slot="third" src="common/icons/return.png" style="width:20px; height: 20px;" ></image>
</neunavbar>

Reference:

neumorphism.io

ismail9k.github.io/neomorphism