Neumorphism_Checkbox

一Neumorphism checkbox design for OpenHarmony.

Download & Install

Install using npm

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;
}

Checkbox

Import:

<element name='neucheckbox' src='hmos-neumorphism/checkbox/checkbox.hml'></element>

Usage:

<neucheckbox color="" width="50px" height="50px" border="50px" checked="true" @check-event="checkboxClick"></neucheckbox>

Radio

Import:

<element name='neuradio' src='hmos-neumorphism/radio/radio.hml'></element>

Usage:

<neuradio width="50px" color="" height="50px" border="50px" checked="" @check-event="radioClick"></neuradio>

Switcher

Import:

<element name='neuswitcher' src='hmos-neumorphism/switcher/switcher.hml'></element>

Usage:

<neuswitcher width="60px" color="" height="30px" border="50px" toggle="off" @toggle-event="toggleClick"></neuswitcher>

Compatibility

Supports OpenHarmony API version 6

Directory Structure

|---- Neumorphism  
|     |---- entry  # sample app usage
|     |---- Neumorphism  # Neumorphism library
|           |---- checkbox  # Checkbox Component
|                 |---- checkbox.css  # Checkbox style component
|                 |---- checkbox.hml  # Checkbox hml file
|                 |---- checkbox.js  # Checkbox JS
|           |---- radio  # Radio Component
|                 |---- radio.css  # Radio style component
|                 |---- radio.hml  # Radio hml file
|                 |---- radio.js  # Radio JS
|           |---- switcher  # Switcher Component
|                 |---- switcher.css  # Switcher style component
|                 |---- switcher.hml  # Switcher hml file
|                 |---- switcher.js  # Switcher JS
|     |---- README.MD  # installation and usage                   

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