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.
simple-selector
Advanced tools
Readme
Simple Selector is an es6 class used to create easily styleable select input. Simple Selector will create an HTML template that visually takes the place of your standard select tag.
npm i simple-selector
yarn add simple-selector
npm i simple-selector@1.5.0
<select name="my-select" id="MySelect" class="js-select">
<option value="1">View All</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
</select>
import SimpleSelector from 'simple-selector';
const select = document.querySelector('.js-select');
const Selector = new SimpleSelector(select, {
placeholder: 'Select your favourite.',
});
Option | Type | Description |
---|---|---|
search | Boolean or String (default: 'Search') | True / False to enable / disable String will be true and change the placeholder text. |
class | String (default: 'selector') | If you want more than one style of selector, you can change this class to suit your needs |
placeholder | String (default: placeholder attribute or 'Select') | Will update the default text on the Simple Selector |
autoClose | Boolean (default: true) | When multiple is false, autoClose: true will close the Selector when an option is clicked |
If the options in the default select have been updated dynamically, simply call the reinit() method. You may also optionally need to call the update() method
SimpleSelector.reinit();
SimpleSelector.update();
Each of the following methods has a callback. These can be used with the on() method
SimpleSelector.on('update', (selector) => {
console.log('selector updated!');
});
.selector {
@include simple-selector (
$min-width: 32rem,
$border-radius: 0,
$border-width: .1rem,
$header-color: $black,
$header-border-color: rgba($black, .2),
$header-background-color: $white,
$header-padding: 1rem 4rem 1rem 2rem,
$chevron-color: $black,
$list-border-color: rgba($black, .2),
$list-background-color: $white,
$list-padding: 0,
$search-color: $black,
$search-border-color: rgba($black, .2),
$search-background-color: $white,
$option-color: $black,
$option-background-color: $white,
$option-transition-speed: 0.3s,
$option-color--hover: $black,
$option-background-color--hover: rgba($black, .1),
$option-color--active: $white,
$option-background-color--active: rgba($black, .6),
)
}
Desktop: Firefox 16+ ✓ Chrome 15+ ✓ Safari 5.1+ ✓ IE 10+ ✓
Mobile: Safari iOS 5.1+ ✓ Chrome Mobile 47+ ✓
Note: (Might work on earlier versions of chrome, but I couldn't test it.)
FAQs
An es6 class to replace default select inputs with easy to style HTML.
The npm package simple-selector receives a total of 1 weekly downloads. As such, simple-selector popularity was classified as not popular.
We found that simple-selector demonstrated a healthy version release cadence and project activity because the last version was released less than 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.