Ant-design

Solution To make accordion using ant design in react js, first install ant design library using npm install antd command then import and use Collapse component from it. Snippet In this snippet, see the short example of use Collapse and Panel component from ant design library. <div style={{ display: "block", width: 700, padding: 30 }} > <h4>Accordion using ant design in react js</h4> <Collapse> <Panel header="Accordion using Ant Design" key="1"> <p>Accordion using Ant Design in react js</p> </Panel> <Panel header="Computer Science" key="2"> <p>This is Best computer Science Portal</p> </Panel> </Collapse> </div> Example In this example, we will import the Collapse component from antd library, use the Panel component, and provide attribute details to make accordion using ant design....

Solution To make button group using ant design in react js, first install ant design library using npm install antd command import and use button component from it. Snippet In this snippet, see the short example to use button component of ant design library. <Button.Group> <Button type="primary">Button 1</Button> <Button type="primary">Button 2</Button> </Button.Group> Example In this example, we will import the button component from the ant library, and use button component as a primary type of ant design library....

Solution To add a custom icon in the ant design alert in react js, use the icon attribute and pass your desired icon in the attribute the alert component will show in the UI. Make sure you have added showIcon={true} in your alert component. Snippet In this snippet, see the short example of use alert component with icon from ant design library. <Alert message="Success Text" type="success" showIcon icon={<CheckOutlined />} style={{ margin: '30px', }}/> Example In this example, we will import the alert component from the antd library, use the icon component in the alert icon attribute, and provide attribute details to add a custom icon appearance....

Solution To change ant design button color in react js, first, install ant design library using npm install antd command, and use inline css style={{backgroundColor: "red"}} to change the color of the button. Snippet In this snippet, we will use inline css style={{backgroundColor: "red"}} to change the color of the button. <div> <Button type="primary" style={{ backgroundColor: "red" }}>Primary</Button> </div> Example In this example, we will improt the button component from the ant library, and the use of div element and button component use is simple text and type="primary"is a ant design and use inline css style={{backgroundColor: "red"}} to change the color of the button....

Solution To make button using ant design in react js, first install ant design library using npm install antd command import and use button component from it. Snippet In this snippet, see the short example to use button component ant design library. <div> <Button type="primary">Primary</Button> </div> Example In this example, we will import the button component from the ant library, and use button component as a primary type of ant design library....

Solution To make avatar using ant design in react js, first install ant design library using npm install antd command and install ant design icon library using npm install --save @ant-design/icons command then import and use avatar component from it. Snippet In this snippet, see the short example of use avatar component from ant design library. <div> <Avatar size={64} icon={<UserOutlined />} /> <Avatar shape="square" size={64} icon={<UserOutlined />} /> </div> Example In this example, we will import the avatar component from antd library, use the avatar component, and provide attribute details to change avatar’s appearance....

Solution To make autocomplete using ant design in react js, first install ant design library using npm install antd command and then import AutoComplete from it and use to create autocomplete using ant design. Snippet In this snippet, this is short example of make autocomplete component from the antd library. import { AutoComplete, Input } from 'antd'; <AutoComplete options={options} style={{ width: 200, }} onSelect={onSelect} onSearch={handleSearch} > <TextArea placeholder="input here" className="custom" style={{ height: 50, }} onKeyPress={handleKeyPress} /> </AutoComplete> Example In this example, we will import autocomplete from antd library, create autocomplete component, and provide appropriate data to make autocomplete....

Solution To make avatar with dropdown using ant design in react js, first install ant design library using npm install antd command and install ant design icon library using npm install --save @ant-design/icons command. Then make a dropdown component and add avatar component with in ant design. Snippet In this snippet, We are provided and example of using ant design dropdown component with avatar. <Dropdown overlay={<WidgetMenu />}> <Avatar icon={<UserOutlined />} /> </Dropdown> Example In this example, we will import import { Avatar, Menu, Dropdown } from "antd"; then use this code <Dropdown overlay={<WidgetMenu />}> <Avatar icon={<UserOutlined />} /> </Dropdown> make avatar with dropdown using ant design in react js....

Solution To alert with auto close using ant design in react js, first install ant design library using npm install antd command and then use api.info. it will allow auto close alert in default. Snippet In this snippet, we will use api.info({ message: Notification ${placement}}) and make alert with auto close using ant design. api.info({ message: `Notification ${placement}`, description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>, placement, }); Example In this example, we will import icon, button, notification, space etc....

Solution To make ant design alert in react js, first install ant design npm install antd and use in your code, use <Alert message="Success Text" type="success" />. it will make ant design alert in react js. Snippet In this snippet, we will use an alert component with a message of Success Text, a variant of Success, and a margin of 30 pixels. <Alert message="Success Text" type="success" style={{ margin: '30px', }}/> Example In this example, we will import the alert from antd library, and use Alert component....