Interface for a class ChipList
Triggers before the click event of the chip is fired. This event can be used to prevent the further process and restrict the click action over a chip.
import { render } from 'react-dom';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
chipClick(e) {
alert('you have selected ' +e.text);
}
render() {
return (
<ChipListComponent id="chip-avatar" selection="Single" beforeClick={this.chipClick.bind(this)}>
<ChipsDirective>
<ChipDirective text="Andrew"></ChipDirective>
<ChipDirective text="Janet"></ChipDirective>
<ChipDirective text="Laura"></ChipDirective>
<ChipDirective text="Margaret"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
Triggers when a chip is clicked.
import { render } from 'react-dom';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
chipClick(e) {
alert('you have clicked ' + e.target.textContent);
}
render() {
return (
<ChipListComponent id="chip-avatar" onClick={this.chipClick.bind(this)}>
<ChipsDirective>
<ChipDirective text="Send a text"/>
<ChipDirective text="Set a remainder"/>
<ChipDirective text="Read my emails"/>
<ChipDirective text="Set alarm"/>
</ChipsDirective>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
EmitType<Event>
Triggers when the component is created successfully.
import { render } from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
createEvent(e) {
alert('Component Rendered Successfully');
}
render() {
return (
<ChipListComponent id="chip-default" text="Janet Leverling" onCreated={this.createEvent(this)}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
Fires before removing the chip element.
import { render } from 'react-dom';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
deleteEvent(e) {
alert('you have deleted ' + e.text);
}
render() {
return (
<ChipListComponent id="chip-avatar" enableDelete="true" delete={this.deleteEvent.bind(this)}>
<ChipsDirective>
<ChipDirective text="Andrew"/>
<ChipDirective text="Janet"/>
<ChipDirective text="Laura"/>
<ChipDirective text="Margaret"/>
</ChipsDirective>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
EmitType<ChipDeletedEventArgs>
Triggers when the chip item is removed.
string
Specifies the icon CSS class for the avatar in the chip.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
#chip .anne {
background-image: url('https://ej2.syncfusion.com/react/demos/src/chips/images/anne.png');
}
</style>
</head>
<body class="material">
<div id='sample'>
</body>
</html>
import { render } from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
Icon = "anne";
render() {
return (
<ChipListComponent id="chip" text="Janet Leverling" avatarIconCss={this.Icon}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
string
Specifies the customized text value for the avatar in the chip.
import { render } from 'react-dom';
import './index.css';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
text = 'J';
render() {
return (
<ChipListComponent id="chip-default" text="Janet Leverling" avatarText= {this.text}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
string[]
| number[]
| ChipModel[]
This chips property helps to render ChipList component.
import { render } from 'react-dom';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
render() {
return (
<ChipListComponent id="chip-avatar">
<ChipsDirective>
<ChipDirective text="Small"></ChipDirective>
<ChipDirective text="Medium"></ChipDirective>
<ChipDirective text="Large"></ChipDirective>
<ChipDirective text="Extra Large"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
string
Specifies the custom classes to be added to the chip element used to customize the ChipList component.
import { render } from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
style = "e-outline"
render() {
return (
<ChipListComponent text="Janet Leverling" cssClass={this.style}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
boolean
Enables or disables the delete functionality of a chip.
import { render } from 'react-dom';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
bool = "true"
render() {
return (
<ChipListComponent id="chip-avatar" enableDelete={this.bool}>
<ChipsDirective>
<ChipDirective text="Andrew"/>
<ChipDirective text="Janet"/>
<ChipDirective text="Laura"/>
<ChipDirective text="Margaret"/>
</ChipsDirective>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
boolean
Specifies a value that indicates whether the chip component is enabled or not.
{ [key: string]: string }
Allows additional HTML attributes such as aria labels, title, name, etc., and accepts n number of attributes in a key-value pair format.
string
Specifies the leading icon CSS class for the chip.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
#chip .janet {
background-image: url('https://ej2.syncfusion.com/react/demos/src/chips/images/janet.png');
}
</style>
</head>
<body class="material">
<div id='sample'>
</body>
</html>
import { render } from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
Icon = "janet";
render() {
return (
<ChipListComponent id="chip" text="Janet Leverling" leadingIconCss={this.Icon}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
string
Specifies the trailing icon url for the chip.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
string[]
| number[]
| number
Sets or gets the selected chip items in the chip list.
import { render } from 'react-dom';
import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
choice=[1,3];
render() {
return (
<ChipListComponent id="chip-filter" selectedChips={this.choice} selection="Multiple">
<ChipsDirective>
<ChipDirective text="Extra small"></ChipDirective>
<ChipDirective text="Small"></ChipDirective>
<ChipDirective text="Medium"></ChipDirective>
<ChipDirective text="Large"></ChipDirective>
<ChipDirective text="Extra large"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
Defines the selection type of the chip. The available types are:
string
Specifies the text content for the chip.
import { render } from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
name = "Janet Leverling";
render() {
return (
<ChipListComponent text={this.name}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
string
Specifies the trailing icon CSS class for the chip.
import { render } from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
Icon = "e-dlt-btn";
render() {
return (
<ChipListComponent id="chip" text="Janet Leverling" trailingIconCss={this.Icon}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));
string
Specifies the trailing icon url for the chip.