Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

select2-component

Package Overview
Dependencies
Maintainers
1
Versions
51
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

select2-component

A vuejs, reactjs and angular select component.

  • 3.1.5
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
237
decreased by-65.25%
Maintainers
1
Weekly downloads
 
Created
Source

Dependency Status devDependency Status Build Status: Linux Build Status: Windows npm version Downloads

select2-component

A vuejs, reactjs and angular select component.

features
  • vuejs component
  • reactjs component
  • angular component
  • select one
  • options or groups
  • scroll
  • local search
  • select by keyboard
  • disabled option
  • disabled component
  • hide search box
  • placeholder
  • custom component(vuejs and reactjs only)
  • multiple selection
  • material style(angular only)
  • form binding(angular only)
install

npm i select2-component

<link rel="stylesheet" href="./node_modules/select2-component/select2.min.css" />
vuejs component demo

npm i vue vue-class-component

import "select2-component/vue";
<select2 :data="data"
    :value="value"
    @update="update($event)">
</select2>

the online demo: https://plantain-00.github.io/select2-component/demo/vue/index.html

reactjs component demo
import { Select2 } from "select2-component/react";
<Select2 data={this.data}
    value={this.value}
    update={value => this.update(value)}>
</Select2>

the online demo: https://plantain-00.github.io/select2-component/demo/react/index.html

angular component demo
import { Select2Module } from "select2-component/angular";

@NgModule({
    imports: [BrowserModule, FormsModule, Select2Module],
    declarations: [MainComponent],
    bootstrap: [MainComponent],
})
class MainModule { }
<select2 [data]="data"
    [value]="value"
    (update)="update($event)">
</select2>

the online demo: https://plantain-00.github.io/select2-component/demo/angular/index.html

properties and events of the component
nametypedescription
dataSelect2Datathe data of the select2
valueSelect2Value?initial value
disabledboolean?whether the component is disabled
minCountForSearchnumber? = 6hide search box if options.length < minCountForSearch
placeholderstring?the placeholder string if nothing selected
customSearchEnabledboolean?will trigger search event, and disable inside filter
multipleboolean?select multiple options
material"" or trueenable material style(angular only)
editPattern(str: string) => stringuse it for change the pattern of the filter search(angular only)
ngModel/id/required/disabled/readonly/tabIndexjust like a select control(angular only)
update(value: Select2UpdateValue) => voidtriggered when user select an option
open() => voidtriggered when user open the options
search(text: string) => voidtriggered when search text changed
select2 data structure
type Select2Data = (Select2Group | Select2Option)[];

type Select2Group = {
    label: string;
    options: Select2Option[];
    classes?: string;
};

type Select2Option = {
    value: Select2Value;
    label: string;
    disabled?: boolean;
    component?: string | Function; // the component
    classes?: string;
};

type Select2Value = string | number;

type Select2UpdateValue = Select2Value | Select2Value[];
change log
// v3.1
import { Select2Module } from "select2-component/angular";
import { Select2 } from "select2-component/angular.component";

// v3.0
import { Select2Component } from "select2-component/angular";
// v3
<link rel="stylesheet" href="./node_modules/select2-component/select2.min.css" />
import "select2-component/vue";
import { Select2 } from "select2-component/react";
import { Select2Component } from "select2-component/angular";

// v2
<link rel="stylesheet" href="./node_modules/select2-component/dist/select2.min.css" />
import "select2-component/dist/vue";
import { Select2 } from "select2-component/dist/react";
import { Select2Component } from "select2-component/dist/angular";
// v2
<select2 [data]="data"
    [value]="value"
    (update)="update($event)">
</select2>

// v1
<select2 [data]="data"
    [value]="value"
    (select)="select($event)">
</select2>

FAQs

Package last updated on 09 Aug 2017

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc