Install using npm inside pages directory
npm init -y
npm i hmos-neumorphism
Add this css snippet when passing input or button through slot .
button, input{
width: 100%;
height: 100%;
background-color:transparent;
text-color: black;
}<element name='neutheme' src='../node_modules/hmos-neumorphism/theme/theme.hml'></element>
<element name='neualert' src='../node_modules/hmos-neumorphism/alert/alert.hml'></element>
<element name='neuavatar' src='../node_modules/hmos-neumorphism/avatar/avatar.hml'></element>
<element name='neubutton' src='../node_modules/hmos-neumorphism/button/button.hml'></element>
<element name='neubuttons' src='../node_modules/hmos-neumorphism/buttons/buttons.hml'></element>
<element name='neucard' src='../node_modules/hmos-neumorphism/card/card.hml'></element>
<element name='neucheckbox' src='../node_modules/hmos-neumorphism/checkbox/checkbox.hml'></element>
<element name='neudropdown' src='../node_modules/hmos-neumorphism/dropdown/dropdown.hml'></element>
<element name='neuform' src='../node_modules/hmos-neumorphism/form/form.hml'></element>
<element name='neuinput' src='../node_modules/hmos-neumorphism/input/input.hml'></element>
<element name='neulabel' src='../node_modules/hmos-neumorphism/label/label.hml'></element>
<element name='neunavbar' src='../node_modules/hmos-neumorphism/navbar/navbar.hml'></element>
<element name='neupagination' src='../node_modules/hmos-neumorphism/pagination/pagination.hml'></element>
<element name='neuprogress' src='../node_modules/hmos-neumorphism/progress/progress.hml'></element>
<element name='neuradio' src='../node_modules/hmos-neumorphism/radio/radio.hml'></element>
<element name='neuswitcher' src='../node_modules/hmos-neumorphism/switcher/switcher.hml'></element>
<element name='neucarousel' src='../node_modules/hmos-neumorphism/carousel/carousel.hml'></element>
Import:
<element name='neutheme' src='../node_modules/hmos-neumorphism/theme/theme.hml'></element>Usage:
<!--You can choose between following themes: -->
<!--white-->
<!--silver-->
<!--gray-->
<!--black-->
<!--red-->
<!--maroon-->
<!--yellow-->
<!--olive-->
<!--lime-->
<!--green-->
<!--aqua-->
<!--teal-->
<!--blue-->
<!--navy-->
<!--pink-->
<!--purple-->
<neutheme theme="silver" text="black">
</neutheme>
Import:
<element name='neualert' src='../node_modules/hmos-neumorphism/alert/alert.hml'></element>Usage:
<neualert icon="common/icons/heart.png" width="300px" height="60px" border="40px" >
<text>Alert !</text>
</neualert>
Import:
<element name='neuavatar' src='../node_modules/hmos-neumorphism/avatar/avatar.hml'></element>Usage:
<neuavatar icon="common/icons/user.png" width="100px" height="100px" border="50px"></neuavatar>
Import:
<element name='neubutton' src='../node_modules/hmos-neumorphism/button/button.hml'></element>Usage:
<neubutton icon="common/icons/heart.png" width="250px" height="60px" border="50px" @button-event="buttonClick">
<text>Button</text>
</neubutton>
Import:
<element name='neubuttons' src='../node_modules/hmos-neumorphism/buttons/buttons.hml'></element>Usage:
<neubuttons width="250px" height="60px" border="50px">
<button slot="first" onclick="buttonLeftClick">Left</button>
<button slot="second" onclick="buttonRightClick">Right</button>
</neubuttons>
Import:
<element name='neucard' src='../node_modules/hmos-neumorphism/card/card.hml'></element>Usage:
<neucard width="300px" height="200px" border="10px" >
<image src="common/placeholder.png" ></image>
</neucard>
Import:
<element name='neucheckbox' src='../node_modules/hmos-neumorphism/checkbox/checkbox.hml'></element>Usage:
<neucheckbox color="" width="50px" height="50px" border="50px" checked="true" @check-event="checkboxClick"></neucheckbox>
Import:
<element name='neudropdown' src='../node_modules/hmos-neumorphism/dropdown/dropdown.hml'></element>Usage:
<neudropdown width="200px" height="50px" border="10px" @change-event="dropdownSelect">
<select @change="dropdownSelect">
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
<option value="Item 4">Item 4</option>
<option value="Item 5" selected="true">Item 5</option>
</select>
</neudropdown>
Import:
<element name='neuform' src='../node_modules/hmos-neumorphism/form/form.hml'></element>Usage:
<neuform width="350px" height="300px" border="20px" @submit-event="buttonClick" @reset-event="buttonClick">
<neuinput icon="common/icons/user.png" type="email" maxlength="20" placeholder="Email" border="30px"></neuinput>
<neuinput icon="" type="password" maxlength="20" placeholder="Password" border="20px"></neuinput>
<div>
<neubutton icon="" width="150px" border="20px">
<input type='submit' style="border-radius:20px;">Submit</input>
</neubutton>
<neubutton icon="" width="150px" border="20px">
<input type='reset' style="border-radius:20px;">Reset</input>
</neubutton>
</div>
</neuform>
Import:
<element name='neuinput' src='../node_modules/hmos-neumorphism/input/input.hml'></element>Usage:
<neuinput icon="common/icons/user.png" type="text" maxlength="20" placeholder="Input" width="300px" height="50px" border="50px" ></neuinput>
Import:
<element name='neulabel' src='../node_modules/hmos-neumorphism/label/label.hml'></element>Usage:
<neulabel text="Label" icon="common/icons/heart.png" width="200px" height="50px" border="50px" ></neulabel>
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>
Import:
<element name='neupagination' src='../node_modules/hmos-neumorphism/pagination/pagination.hml'></element>Usage:
<neupagination color="" width="300px" height="50px" border="50px" @previous-event="previousEvent" @next-event="nextEvent">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</neupagination>
Import:
<element name='neuprogress' src='../node_modules/hmos-neumorphism/progress/progress.hml'></element>Usage:
<neuprogress progress="80%" width="300px" color="" height="20px" border="50px"></neuprogress>
Import:
<element name='neuradio' src='../node_modules/hmos-neumorphism/radio/radio.hml'></element>Usage:
<neuradio width="50px" color="" height="50px" border="50px" checked="" @check-event="radioClick"></neuradio>
Import:
<element name='neuswitcher' src='../node_modules/hmos-neumorphism/switcher/switcher.hml'></element>Usage:
<neuswitcher width="60px" color="" height="30px" border="50px" toggle="off" @toggle-event="toggleClick"></neuswitcher>
Import:
<element name='neucarousel' src='../node_modules/hmos-neumorphism/carousel/carousel.hml'></element>Usage:
<neucarousel width="300px" height="200px" color="black" border="10px" index="0" indicator="true" loop="true">
<image src="common/placeholder.png" ></image>
<image src="common/placeholder.png" ></image>
<image src="common/placeholder.png" ></image>
</neucarousel>