React Suite Cascader Appearance
React Suite is a front-end library designed for the middle platform and back-end products. React Suite Cascader component is used as a single selection of data with a hierarchical relationship structure.
The appearance prop defines the way how the Cascader will visually appear to the users. It has two options, it takes a value either “default” or “subtle”.
Syntax:
<Cascader appearance="" />
Prerequisite:
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: now install the dependency by using the following command:
npm install rsuite
Project Structure: It will look like this:
Example: We are importing the Cascader Component from “rsuite” and applying the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.
We are adding a Cascader component and we are passing a list named data containing the names of countries to the data prop of the component, to the placeholder and the appearance we are passing “default”.
App.js
import { Cascader } from "rsuite" ;
import "rsuite/dist/rsuite.min.css" ;
function App() {
const countries = [
{
label: "India" ,
value: "India" ,
children: [
{
label: "Haryana" ,
value: "Haryana" ,
},
{
label: "Assam" ,
value: "Assam" ,
},
{
label: "West Bengal" ,
value: "West Bengal" ,
},
{
label: "Nagaland" ,
value: "Nagaland" ,
},
],
},
{
label: "Germany" ,
value: "Germany" ,
},
{
label: "Sri Lanka" ,
value: "Sri Lanka" ,
},
];
return (
<div className= "App" >
<h4> React Suite Cascader Appearance</h4>
<p>
<b style={{ marginLeft: 30 }}>
appearance = "default" </b>
</p>
<Cascader
placeholder= "default"
data={countries}
appearance= "default"
style={{ marginLeft: 30, marginTop: 10 }}
/>
</div>
);
}
export default App;
|
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example: We are adding a Cascade component and we are passing a list named data containing the names of countries to the data prop of the component, to the placeholder, and the appearance we are passing “subtle”.
App.js
import { Cascader } from "rsuite" ;
import "rsuite/dist/rsuite.min.css" ;
function App() {
const countries = [
{
label: "India" ,
value: "India" ,
children: [
{
label: "Haryana" ,
value: "Haryana" ,
},
{
label: "Assam" ,
value: "Assam" ,
},
{
label: "West Bengal" ,
value: "West Bengal" ,
},
{
label: "Nagaland" ,
value: "Nagaland" ,
},
],
},
{
label: "Germany" ,
value: "Germany" ,
},
{
label: "Sri Lanka" ,
value: "Sri Lanka" ,
},
];
return (
<div className= "App" >
<h4> React Suite Cascader Appearance</h4>
<p>
<b style={{ marginLeft: 30 }}>
appearance = "subtle" </b>
</p>
<Cascader
placeholder= "subtle"
data={countries}
appearance= "subtle"
style={{ marginLeft: 30, marginTop: 10 }}
/>
</div>
);
}
export default App;
|
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Reference: https://rsuitejs.com/components/cascader/#appearance
Last Updated :
07 Jul, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...