Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
icheck-material
Advanced tools
Readme
icheck-material is pure css solution for displaying material style checkboxes and radio buttons. Try Demo.
You may also like to try icheck-bootstrap.
Love cool tech? Check out CoolTechUnder.com
Several quick start options are available:
yarn add icheck-material
npm install icheck-material
Install-Package icheck-material
Then link icheck-material.css
file inside head
tag of your page.
<div class="icheck-material-teal">
<input type="checkbox" id="someCheckboxId" />
<label for="someCheckboxId">Click to check</label>
</div>
<div class="icheck-material-teal">
<input type="radio" id="someRadioId1" name="someGroupName" />
<label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-material-teal">
<input type="radio" id="someRadioId2" name="someGroupName" />
<label for="someRadioId2">Option 2</label>
</div>
To have checkboxes or radio buttons inline use .icheck-inline class
<div class="icheck-material-teal icheck-inline">
<input type="checkbox" id="chb1" />
<label for="chb1">Label 1</label>
</div>
<div class="icheck-material-teal icheck-inline">
<input type="checkbox" id="chb2" />
<label for="chb2">Label 2</label>
</div>
Use disabled attribute on your input (checkbox or radio) to have disabled style.
To have components without label, you still have to have label control with empty text.
<div class="icheck-material-teal">
<input type="checkbox" id="someCheckboxId" />
<label for="someCheckboxId"></label>
</div>
<div class="icheck-material-teal">
@Html.CheckBoxFor(m => m.SomeProperty, new { id = "someCheckboxId" })
<label for="someCheckboxId">Click to check</label>
</div>
<div class="icheck-material-teal">
@Html.RadioButtonFor(m => m.SomeProperty, SomeValue1, new { id = "someRadioId1" })
<label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-material-teal">
@Html.RadioButtonFor(m => m.SomeProperty, SomeValue2, new { id = "someRadioId2" })
<label for="someRadioId2">Option 2</label>
</div>
Try Demo
Material Design Colors: As you can see in previous examples, icheck-material-teal class used for styling. materialpalette.com You can use following classes for material colors:
.icheck-material-red
.icheck-material-pink
.icheck-material-purple
.icheck-material-deeppurple
.icheck-material-indigo
.icheck-material-blue
.icheck-material-lightblue
.icheck-material-cyan
.icheck-material-teal
.icheck-material-green
.icheck-material-lightgreen
.icheck-material-lime
.icheck-material-yellow
.icheck-material-amber
.icheck-material-orange
.icheck-material-deeporange
.icheck-material-brown
.icheck-material-grey
.icheck-material-bluegrey
You can also have your custom color formatting by using icheck-material-custom.scss
sass file.
icheck-material released under the MIT license. Feel free to use it in personal and commercial projects.
FAQs
Pure css material checkboxes and radio buttons.
The npm package icheck-material receives a total of 11 weekly downloads. As such, icheck-material popularity was classified as not popular.
We found that icheck-material demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.