Neumorphism_Card

一Neumorphism Card design for OpenHarmony.

Download & Install

Install using npm inside pages directory

npm init -y

npm i hmos-neumorphism

Details about OpenHarmony NPM environment configuration, see at here

Usage Instructions

Note :

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

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

Avatar

Import:

<element name='neuavatar' src='hmos-neumorphism/avatar/avatar.hml'></element>

Usage:

<neuavatar icon="common/icons/user.png" width="100px" height="100px" border="50px"></neuavatar>

Card

Import:

<element name='neucard' src='hmos-neumorphism/card/card.hml'></element>

Usage:

<neucard width="300px" height="200px" border="10px" >
  <image src="common/placeholder.png" ></image>
</neucard>

Compatibility

Supports OpenHarmony API version 6

Code Contribution

If you find any problems during usage, you can submit an Issue to us. Of course, we also welcome you to send us PR.

Open source License

This project is based on Apache License 2.0 ，please enjoy and participate in open source freely.

Reference:

neumorphism.io

ismail9k.github.io/neomorphism