This section explains the customization of styles, leading icons, avatar, and trailing icons in Chip control.
The Chip control has the following predefined styles that can be defined using the cssClass
property.
Class | Description |
---|---|
e-primary | Represents a primary chip. |
e-success | Represents a positive chip. |
e-info | Represents an informative chip. |
e-warning | Represents a chip with caution. |
e-danger | Represents a negative chip. |
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
class App extends React.Component<{}, {}> {
render() {
return (
<ChipListComponent id="chip-avatar">
<ChipsDirective>
<ChipDirective text="Primary" cssClass="e-primary"></ChipDirective>
<ChipDirective text="Success" cssClass="e-success"></ChipDirective>
<ChipDirective text="Info" cssClass="e-info"></ChipDirective>
<ChipDirective text="Warning" cssClass="e-warning"></ChipDirective>
<ChipDirective text="Danger" cssClass="e-danger"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('chip'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='chip'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
class App extends React.Component {
render() {
return (<ChipListComponent id="chip-avatar">
<ChipsDirective>
<ChipDirective text="Primary" cssClass="e-primary"></ChipDirective>
<ChipDirective text="Success" cssClass="e-success"></ChipDirective>
<ChipDirective text="Info" cssClass="e-info"></ChipDirective>
<ChipDirective text="Warning" cssClass="e-warning"></ChipDirective>
<ChipDirective text="Danger" cssClass="e-danger"></ChipDirective>
</ChipsDirective>
</ChipListComponent>);
}
}
ReactDom.render(<App />, document.getElementById('chip'));
You can add and customize the leading icon of chip using the leadingIconCss
property.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
class App extends React.Component<{}, {}> {
render() {
return (
<ChipListComponent id="chip-avatar">
<ChipsDirective>
<ChipDirective text="Andrew" leadingIconCss='andrew'></ChipDirective>
<ChipDirective text="Janet" leadingIconCss='janet'></ChipDirective>
<ChipDirective text="Laura" leadingIconCss='laura'></ChipDirective>
<ChipDirective text="Margaret" leadingIconCss='margaret'></ChipDirective>
</ChipsDirective>
</ChipListComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('chip'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='chip'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#chip-avatar .andrew {
background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/andrew.png')
}
#chip-avatar .margaret {
background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/margaret.png')
}
#chip-avatar .laura {
background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/laura.png')
}
#chip-avatar .janet {
background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
class App extends React.Component {
render() {
return (<ChipListComponent id="chip-avatar">
<ChipsDirective>
<ChipDirective text="Andrew" leadingIconCss='andrew'></ChipDirective>
<ChipDirective text="Janet" leadingIconCss='janet'></ChipDirective>
<ChipDirective text="Laura" leadingIconCss='laura'></ChipDirective>
<ChipDirective text="Margaret" leadingIconCss='margaret'></ChipDirective>
</ChipsDirective>
</ChipListComponent>);
}
}
ReactDom.render(<App />, document.getElementById('chip'));
You can add and customize the avatar of chip using the avatarIconCss
property.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
class App extends React.Component<{}, {}> {
render() {
return (
<ChipListComponent id="chip-avatar">
<ChipsDirective>
<ChipDirective text="Andrew" avatarIconCss='andrew'></ChipDirective>
<ChipDirective text="Janet" avatarIconCss='janet'></ChipDirective>
<ChipDirective text="Laura" avatarIconCss='laura'></ChipDirective>
<ChipDirective text="Margaret" avatarIconCss='margaret'></ChipDirective>
</ChipsDirective>
</ChipListComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('chip'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='chip'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#chip-avatar .andrew {
background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/andrew.png')
}
#chip-avatar .margaret {
background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/margaret.png')
}
#chip-avatar .laura {
background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/laura.png')
}
#chip-avatar .janet {
background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
class App extends React.Component {
render() {
return (<ChipListComponent id="chip-avatar">
<ChipsDirective>
<ChipDirective text="Andrew" avatarIconCss='andrew'></ChipDirective>
<ChipDirective text="Janet" avatarIconCss='janet'></ChipDirective>
<ChipDirective text="Laura" avatarIconCss='laura'></ChipDirective>
<ChipDirective text="Margaret" avatarIconCss='margaret'></ChipDirective>
</ChipsDirective>
</ChipListComponent>);
}
}
ReactDom.render(<App />, document.getElementById('chip'));
You can add and customize the avatar content of chip using the avatarText
property.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
class App extends React.Component<{}, {}> {
render() {
return (
<ChipListComponent id="chip-avatar">
<ChipsDirective>
<ChipDirective text="Andrew" avatarText='A'></ChipDirective>
<ChipDirective text="Janet" avatarText='J'></ChipDirective>
<ChipDirective text="Laura" avatarText='L'></ChipDirective>
<ChipDirective text="Margaret" avatarText='M'></ChipDirective>
</ChipsDirective>
</ChipListComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('chip'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='chip'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
class App extends React.Component {
render() {
return (<ChipListComponent id="chip-avatar">
<ChipsDirective>
<ChipDirective text="Andrew" avatarText='A'></ChipDirective>
<ChipDirective text="Janet" avatarText='J'></ChipDirective>
<ChipDirective text="Laura" avatarText='L'></ChipDirective>
<ChipDirective text="Margaret" avatarText='M'></ChipDirective>
</ChipsDirective>
</ChipListComponent>);
}
}
ReactDom.render(<App />, document.getElementById('chip'));
You can add and customize the trailing icon of chip using the trailingIconCss
property.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
class App extends React.Component<{}, {}> {
render() {
return (
<ChipListComponent id="chip-avatar">
<ChipsDirective>
<ChipDirective text="Andrew" trailingIconCss= 'e-dlt-btn'></ChipDirective>
<ChipDirective text="Janet" trailingIconCss= 'e-dlt-btn'></ChipDirective>
<ChipDirective text="Laura" trailingIconCss= 'e-dlt-btn'></ChipDirective>
<ChipDirective text="Margaret" trailingIconCss= 'e-dlt-btn'></ChipDirective>
</ChipsDirective>
</ChipListComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('chip'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='chip'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
class App extends React.Component {
render() {
return (<ChipListComponent id="chip-avatar">
<ChipsDirective>
<ChipDirective text="Andrew" trailingIconCss='e-dlt-btn'></ChipDirective>
<ChipDirective text="Janet" trailingIconCss='e-dlt-btn'></ChipDirective>
<ChipDirective text="Laura" trailingIconCss='e-dlt-btn'></ChipDirective>
<ChipDirective text="Margaret" trailingIconCss='e-dlt-btn'></ChipDirective>
</ChipsDirective>
</ChipListComponent>);
}
}
ReactDom.render(<App />, document.getElementById('chip'));
Outline chip has the border with the background transparent. It can be set using the cssClass
property.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
class App extends React.Component<{}, {}> {
render() {
return (
<div>
<ChipListComponent id="chip-avatar" cssClass="e-outline">
<ChipsDirective>
<ChipDirective text="Chai"></ChipDirective>
<ChipDirective text="Chang"></ChipDirective>
<ChipDirective text="Aniseed Syrup"></ChipDirective>
<ChipDirective text="Ikura"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
<ChipListComponent id="chip-avatar" cssClass="e-outline" enableDelete={true}>
<ChipsDirective>
<ChipDirective text="Andrew"></ChipDirective>
<ChipDirective text="Janet"></ChipDirective>
<ChipDirective text="Laura"></ChipDirective>
<ChipDirective text="Margaret"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
</div>
);
}
}
ReactDom.render(<App />,document.getElementById('chip'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='chip'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
class App extends React.Component {
render() {
return (<div>
<ChipListComponent id="chip-avatar" cssClass="e-outline">
<ChipsDirective>
<ChipDirective text="Chai"></ChipDirective>
<ChipDirective text="Chang"></ChipDirective>
<ChipDirective text="Aniseed Syrup"></ChipDirective>
<ChipDirective text="Ikura"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
<ChipListComponent id="chip-avatar" cssClass="e-outline" enableDelete={true}>
<ChipsDirective>
<ChipDirective text="Andrew"></ChipDirective>
<ChipDirective text="Janet"></ChipDirective>
<ChipDirective text="Laura"></ChipDirective>
<ChipDirective text="Margaret"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
</div>);
}
}
ReactDom.render(<App />, document.getElementById('chip'));