Method Documentation

Getting started

Ready-to-use layouts and separate react-components easy to combine and create your own design project. Create-react-app technology was used. create-react-app

Getting Started#

  • Install Nodejs from Nodejs Official Page

  • Open your terminal.

  • Navigate to the project

  • Run npm install or yarn install if you use Yarn

  • Run npm start to start a local development server

You can also run additional npm tasks such as

npm run build to build your app for production

File structure


├── README.md
├── jarn.lock
├── package-lock.json
├── package.json
├── public
│   ├── robots.txt
│   ├── index.html
│   └── manifest.json
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
├── config
│   └── files ...
└── src
├── App.js
├── Index.css
├── Index.js
├── Index.css
├── serviceWorker.js
├── setupTest.js
├── components
│   │   ├── (included 18 files)
├── layouts
│   ├── CTALayouts
│   │   ├── (included 12 files)
│   ├── EcommerceLayouts
│   │   ├── (included 14 files)
│   ├── FeaturesLayouts
│   │   ├── (included 21 files)
│   ├── FootersLayouts
│   │   ├── (included 10 files)
│   ├── FormsLayouts
│   │   ├── (included 10 files)
│   ├── HeroLayouts
│   │   ├── (included 10 files)
│   ├── PortfolioLayouts
│   │   ├── (included 10 files)
│   ├── PricingLayouts
│   │   ├── (included 6 files)
│   ├── StatsLayouts
│   │   ├── (included 7 files)
│   ├── TeamLayouts
│   │   ├── (included 12 files)
│   ├── TestimonialsLayouts
│   │   ├── (included 10 files)
               

Layouts folder contains ready-to-use layouts, gathered in categories.

Components folder contains react-components, that are ready to combine and get your own layout or add to the existing layouts.

Introduction

An example of page creating which consists of 5 light theme blocks


//App.js 

import React from 'react'
import HeroLayoutsTypeFirst from "./layouts/HeroLayouts/HeroLayoutsTypeFirst/HeroLayoutsTypeFirst";
import CTALayoutsTypeTwelve from "./layouts/CTALayouts/CTALayoutsTypeTwelve/CTALayoutsTypeTwelve";
import PortfolioLayoutsTypeTenth from "./layouts/PortfolioLayouts/PortfolioLayoutsTypeTenth/PortfolioLayoutsTypeTenth";
import EcommerceLayoutsTypeFourteenth from "./layouts/Ecommerce/EcommerceLayoutsTypeFourteenth/EcommerceLayoutsTypeFourteenth";
import FootersLayoutsTypeFirst from "./layouts/FootersLayouts/FootersLayoutsTypeFirst/FootersLayoutsTypeFirst";



function App () {

return (
<div>
<HeroLayoutsTypeFirst/>
<CTALayoutsTypeTwelve/>
<PortfolioLayoutsTypeTenth/>
<EcommerceLayoutsTypeFourteenth/>
<FootersLayoutsTypeFirst/>
</div>
)
}

export default App;


An example of page creating which consists of 5 dark theme blocks


//App.js 

import React from 'react'
import HeroLayoutsTypeFirst from "./layouts/HeroLayouts/HeroLayoutsTypeFirst/HeroLayoutsTypeFirst";
import CTALayoutsTypeTwelve from "./layouts/CTALayouts/CTALayoutsTypeTwelve/CTALayoutsTypeTwelve";
import PortfolioLayoutsTypeTenth from "./layouts/PortfolioLayouts/PortfolioLayoutsTypeTenth/PortfolioLayoutsTypeTenth";
import EcommerceLayoutsTypeFourteenth from "./layouts/Ecommerce/EcommerceLayoutsTypeFourteenth/EcommerceLayoutsTypeFourteenth";
import FootersLayoutsTypeFirst from "./layouts/FootersLayouts/FootersLayoutsTypeFirst/FootersLayoutsTypeFirst";



function App () {

return (
<div>
<HeroLayoutsTypeFirst dark={true}/>
<CTALayoutsTypeTwelve dark={true}/>
<PortfolioLayoutsTypeTenth dark={true}/>
<EcommerceLayoutsTypeFourteenth dark={true}/>
<FootersLayoutsTypeFirst dark={true}/>
</div>
)
}

export default App;

Please pay attention. To apply the dark theme theme for a component you have to pass dark={true} to the component.



An example of page creating which consists of 7 blocks using layouts copies


//App.js 

import React from 'react'
import HeroLayoutsTypeFirst from "./layouts/HeroLayouts/HeroLayoutsTypeFirst/HeroLayoutsTypeFirst";
import CTALayoutsTypeTwelve from "./layouts/CTALayouts/CTALayoutsTypeTwelve/CTALayoutsTypeTwelve";
import CTALayoutsTypeTwelveClone from "./layouts/CTALayouts/CTALayoutsTypeTwelveClone/CTALayoutsTypeTwelveClone";
import PortfolioLayoutsTypeTenth from "./layouts/PortfolioLayouts/PortfolioLayoutsTypeTenth/PortfolioLayoutsTypeTenth";
import PortfolioLayoutsTypeTenthClone from "./layouts/PortfolioLayouts/PortfolioLayoutsTypeTenthClone/PortfolioLayoutsTypeTenthClone";
import EcommerceLayoutsTypeFourteenth from "./layouts/Ecommerce/EcommerceLayoutsTypeFourteenth/EcommerceLayoutsTypeFourteenth";
import FootersLayoutsTypeFirst from "./layouts/FootersLayouts/FootersLayoutsTypeFirst/FootersLayoutsTypeFirst";



function App () {

return (
<div>
<HeroLayoutsTypeFirst/>
<CTALayoutsTypeTwelve/>
<CTALayoutsTypeTwelveClone/>
<PortfolioLayoutsTypeTenth/>
<PortfolioLayoutsTypeTenthClone/>
<EcommerceLayoutsTypeFourteenth/>
<FootersLayoutsTypeFirst/>
</div>
)
}

export default App;

Please pay attention. If you want to create your own layout using existing one, or if you want to insert two or more the same layouts on the one page , then in the project folder you need to create the layout copy and import it into the page. The name of the file copy can be random.

Avatar

Avatars can be used to represent people or objects. It supports images, Icons, or letters.

Before use Avatar, you need to import:

import { Switch } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

Examples

Basic

The most basic usage. Two shapes are available.

Type

Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.

API

Property Description Type Default Version
icon Custom icon type for an icon avatar ReactNode -
shape The shape of avatar circle | square circle
size The size of the avatar number | large | small | default default
src The address of the image for an image avatar string -
srcSet A list of sources to use for different screen resolutions string -
alt This attribute defines the alternative text describing the image string -
onError Handler when img load error, return false to prevent default fallback behavior () => boolean -

Badge

Stores badge

When To Use

Badge for going to the corresponding market page

Examples

Basic

The most basic usage.

Customize

Customize color and border-radius

Badge

Property Description Type Default
isAppStore A choice between market badges presenting boolean false
color Background color of the badge string #345dee
radius Badge border-radius property changing number 8

Button

To trigger an operation.

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Basic

The most basic usage. Three sizes and three colors are available.

Icons

To add Icons from the one side

Outline

Outline style

Outline and Icons

Outline Style with Icons

Button

Property Description Type Default
radius Button border-radius number 8
type To choose the button type: button, submit, reset string button
size To choose the button size: large, big,small string large
link Switch between two types: button or link boolean false
href URL link address string -
className The additional class to Button. Possible classes for the button: simple, outline, left-icon, right-icon, primary, secondary, neutral string -
leftIcon The Icon at the left side of the button ReactNode -
rightIcon The Icon at the right side of the button ReactNode -
value Text content inside the button string -
onClick Trigger when clicked function(checked: boolean, event: Event) -

Button Social

To trigger an operation.

A variety of the Button component. Used for going to the social network page or to log in to the site through the social network

Examples

Basic

The most basic usage. Three sizes and two colors are available.

Outline

Outline style

Button Social

Property Description Type Default
radius border-radius кнопки number 8
size To choose the button size: large, big,small string large
href URL link address string -
className The additional class to ButtonSocial. Possible classes for the button: simple, outline, primary, secondary string -
icon Social networks icon ReactNode -
value Текст внутри кнопки string -
onClick Trigger when clicked function(checked: boolean, event: Event) -

ButtonGroup

Group a series of buttons together on a single line with the button group.

Before use Tabs, you need to import:

import { Button, ButtonGroup  } from 'react-bootstrap'

And import stylesheets manually:

import 'bootstrap/dist/css/bootstrap.min.css';

Examples

Basic

Basic use. Available in two color options

ButtonGroup

Property Description Type Default
as

You can use a custom element type for this component.

elementType
<div>
role

An ARIA role describing the button group. Usually the default "group" role is fine. An aria-label or aria-labelledby prop is also recommended.

string
'group'
array Values for drawing array -
className The additional class to Button string -
onClick Trigger when clicked function(checked: boolean, event: Event) -

Chart

Component for graphic data represending. Before use Rate, you have to import:

import { Bar, Lines, Pie } from 'react-chartjs-2'

And import plugin (label customizing):

import 'chartjs-plugin-datalabels'

And import plugin (assigning a unique id while component mounting):

import { v4 as uuidv4 } from 'uuid'

Examples

Bar

The view of the Bar graphic

Bar Customization

The customization of the Bar graphic

Lines

The view of the Lines graphic

Pie

The view of the Piegraphic label

Chart

Detailed documentation and examples of Chart component use you can find by theLink.

Detailed documentation and examples of charts-plugin-datalabels component use you can find by the Link

For the correct work of the component, add a unique id key = {uuidv4 ()} to the key attribute

Checkbox

Checkbox component. Before use Checkbox, you need to import :

import { Checkbox } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.

Examples

Basic

The most basic usage.

Checkbox

Property Description Type Default Version
autoFocus If get focus when component mounted boolean false
checked Specifies whether the checkbox is selected boolean false
defaultChecked Specifies the initial state: whether or not the checkbox is selected boolean false
disabled If disable checkbox boolean false
onChange The callback function that is triggered when the state changes function(e:Event) -

Methods

Checkbox

Name Description Version
blur() Remove focus
focus() Get focus

Collapse

A content area which can be collapsed and expanded. Before use Collapse, you need to import

import { Collapse } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

When To Use#

  • Can be used to group or hide complex regions to keep the page clean.

  • Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.

Examples

Collapse

By default, any number of panels can be expanded at a time. The first panel is expanded in this example.

Ghost Collapse

Making collapse's background to transparent.

Bordered

A bordered style of Collapse.

Accordion

In accordion mode, only one panel can be expanded at a time.

Collapse

Property Description Type Default Version
activeKey Key of the active panel string[] | string
number[] | number
No default value. In accordion mode, it's the key of the first panel
defaultActiveKey Key of the initial active panel string[] | string
number[] | number
-
bordered Toggles rendering of the border around the collapse block boolean true
accordion If true, Collapse renders as Accordion boolean false
onChange Callback function executed when active panel is changed function -
expandIcon Allow to customize collapse icon (panelProps) => ReactNode -
expandIconPosition Set expand icon position left | right -
destroyInactivePanel Destroy Inactive Panel boolean false
ghost Make the collapse borderless and its background transparent boolean false 4.4.0
dark Apply dark theme styles boolean false

Collapse.Panel

Property Description Type Default Version
disabled If true, panel cannot be opened or closed boolean false
forceRender Forced render of content on panel, instead of lazy rending after clicking on header boolean false
header Title of the panel string | ReactNode -
key Unique key identifying the panel from among its siblings string | number -
showArrow If false, panel will not show arrow icon boolean true
extra The extra element in the corner ReactNode -

Custom Input

A basic widget for getting the user input is a text field.

Before use CustomInput, you need to import:

import { Form, InputGroup  } from 'react-bootstrap'

And import stylesheets manually:

import 'bootstrap/dist/css/bootstrap.min.css'; // or 'antd/dist/antd.less'

When To Use

  • A user input in a form field is needed.

  • A search input is required.

Examples

Basic

Basic use. Possible types: label, placeholder, icon

Big

Customize size of input


<Form>
  <CustomInput controlId="FormInputName"></CustomInput>
</Form>
                

Form component is used to submit the form. Details from the documentation can be found by the link

CustomInput

Property Description Type Default
radius The type of input, see: MDN( use Input.TextArea instead of type="textarea") string text
simple Used to turn on the Icons displaying inside the field boolean true
className The additional class to Input. (For example, Bootstrap, col-lg-5, mx-auto) string -
size To choose the field size: large, big string large
controlId The ID for input string -
name The name for input string -
label The label content value string -
placeholder The placeholder content value string -
leftIcon Icon displaying mode in the text field (left) boolean false
rightIcon Icon displaying mode in the text field (right) boolean false
icon The icon that displaying in the text field ReactNode -
onClick Trigger when clicked function(checked: boolean, event: Event) -

Divider

A divider line separates different content.

When To Use

  • Divide sections of article.

  • Divide inline text and links such as the operation column of table.

Examples

Basic

Two available drawing options: horizontal and vertical

Divider

Property Description Type Default
types Choosing between horizontal and vertical orientation horizontal | vertical horizontal
className The additional class to Divider string -

Frame

Area or container

Area or container. Usually used with the Icons component as an area in which an icon can be placed.

Examples

Basic

The most basic usage. Three sizes and two shapes are available.

Customize

Customize color, sizes and border-radius

Frame

Property Description Type Default
shape The shape of frame circle | square circle
variant The size of the avatar large | small | default default
size The size of the avatar number -
color Text and icon color string #18214D
color background-color of frame string #eff2f6
children The object passed to be presented inside the frame ReactNode -

Icons

Vector icons

When To Use

Icon library includes 62 vector images

Examples

Basic

The most basic usage.

Customize

Customize icon color

Icons

Property Description Type Default
fill Icon background color string #18214D

Input Number

Enter a number within certain range with the mouse.

When To Use

When a numeric value needs to be provided.

Examples

Basic

The most basic usage. Three sizes are available.

Customize

Alternative option

Input Number

Property Description Type Default Version
min A minimum value of input data number 0
max A maximum value of input data number -
decrease The callback function that is triggered when the value in the field decreases function(e:Event) -
increase The callback function that is triggered when the value in the field increases function(e:Event) -
className The additional class to InputNumber. string -
custom Apply standard or alternative style of InputNumber boolean false
value The value passed to the field number 0
dark Apply dark theme styles boolean false

List

Simple List. Before use List, you need to import :

import { List } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css';

When To Use

A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

Examples

Basic

The simplest usage. Supports a default list size as well as a large and small size.

Customization

Icon adding, text parameters changing

List

Property Description Type Default Version
bordered Toggles rendering of the border around the list boolean false
footer List footer renderer string | ReactNode -
header List header renderer string | ReactNode -
itemLayout The layout of list, default is horizontal, If a vertical list is desired, set the itemLayout property to vertical string -
rowKey Item's unique key, could be a string or function that returns a string string | Function(record): string key
loadMore Shows a load more content string | ReactNode -
locale The i18n text including empty text object {emptyText: No Data}
dark Apply dark theme styles boolean false
split Toggles rendering of the split under the list item boolean true
dataSource DataSource array for list any[] -
renderItem Customize list item when using dataSource (item) => ReactNode -

List.Item

Property Description Type Default Version
actions The actions content of list item. If itemLayout is vertical, shows the content on bottom, otherwise shows content on the far right Array<ReactNode> -
extra The extra content of list item. If itemLayout is vertical, shows the content on right, otherwise shows content on the far right string | ReactNode -

List.Item.Meta

Property Description Type Default Version
avatar The avatar of list item ReactNode -
description The description of list item string | ReactNode -
title The title of list item string | ReactNode -

Play Button

Play button

When To Use

Most commonly used as a trigger for the popup appearance on the page

Examples

Basic

The most basic usage. Three sizes and two shapes are available.

Customize

Customize background-color

Play Button

Property Description Type Default
fill Button background color string #345DEE
type A choice between button shape: round or elliptical round | ellipse round
size A choice between button size: large or normal large | normal large
href URL link address string -
className The additional class to Switch string 4
onClick Trigger when clicked function(checked: boolean, event: Event) -

Rate

Rate component. Before use Rate, you need to import :

import { Rate } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css';

When To Use

  • Show evaluation.

  • A quick rating operation on something.

Examples

Basic

The simplest usage.

Read only

Read only, can't use mouse to interact.

Rate

Property Description type Default Version
allowClear Whether to allow clear when click again boolean true
autoFocus If get focus when component mounted boolean false
character The custom character of rate ReactNode | (RateProps) => ReactNode <StarFilled /> function(): 4.4.0
className The custom class name of rate string -
count Star count number 5
defaultValue The default value number 0
disabled If read only, unable to interact boolean false
style The custom style object of rate CSSProperties -
tooltips Customize tooltip by each character string[] -
value The current value number -
onBlur Callback when component lose focus function() -
onChange Callback when select value function(value: number) -
onFocus Callback when component get focus function() -
onHoverChange Callback when hover item function(value: number) -
onKeyDown Callback when keydown on component function(event) -

Methods

Name Description
blur() Remove focus
focus() Get focus

Select

Select component to select value from options.

For displaying choices - an elegant alternative to the native select element.

Before use Select, you need to import:

import { Select } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

Examples

Basic

The most basic usage.

Customization

Adding an icon to Option


<Select>
  <Option value="lucy">lucy</Option>
</Select>
                

Select props

Property Description Type Default Version
autoFocus Get focus by default boolean false
className The additional class to Select. Possible classes for the element: big, large string -
defaultActiveFirstOption Whether active first option by default boolean true
defaultValue Initial selected option string | string[]
number | number[]
LabeledValue | LabeledValue[]
-
disabled Whether disabled select boolean false
options Select options. Will get better perf than jsx definition { label, value }[] -
placeholder Placeholder of select string | ReactNode -
showArrow Whether to show the drop-down arrow boolean true(for single select), false(for multiple select)
showSearch Whether show search input in single mode boolean false
value Current selected option string | string[]
number | number[]
LabeledValue | LabeledValue[]
-
onChange Called when select an option or input value change function(value, option:Option | Array<Option>) -
dark Apply dark theme styles boolean false

Select Methods

Name Description Version
blur() Remove focus
focus() Get focus

Simple Badge

Small numerical value or status descriptor for UI elements.

When To Use#

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Examples

Basic

The most basic usage.

Customize

Customize color and border-radius

SimpleBadge

Property Description Type Default
value Text content inside the element string -
color Background color of the element string #EE3465
radius The additional class to Switch number 4

Simple Rating

Variety of the SimpleBadge component

When To Use

To show the rating or grade of an item

Examples

Basic

The most basic usage.

Customize

Customize color and border-radius

Simple Rating

Property Description Type Default
dark Apply dark theme styles boolean false
value Text content inside the element number -
color Text and icon color string #18214D
backgroundColor Background color of the element string #EFF2F6
radius The value of the border-radius property number 4

Socials

Socials

Container for social networks displaying. Works with Frame and Icons components

Examples

Basic

The most basic usage. Two options of displaying: with and without a stroke

Customize

To change the icon and stroke color

Socials

Property Description Type Default
dark Apply dark theme styles boolean false
children The object passed to be presented inside the frame ReactNode -

Slider

Simple List. Before use Slider, you need to import :

import { Swiper } from 'swiper'

And import stylesheets manually:

import 'swiper/css/swiper.min.css';

The example of component creating


//app.js 

import React,{Component} from 'react'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import classes from './app.module.css' //considers app.css in the same dir



class App extends Component{
componentDidMount(){
this.swiper=new Swiper(`.${classes.swiperContainer}`,{...})

//add necessary parameters required by checking the offical docs of swiper

}
render(){
return(
<div className=`swiper-container ${classes.swiperContainer}`>
<div className=`swiper-wrapper ${classes.swiperWrapper}`>
<div className=`swiper-slide ${swiperSlide}`>Slide 1</div>
<div className=`swiper-slide ${swiperSlide}`>Slide 1</div>
<div className=`swiper-slide ${swiperSlide}`>Slide 1</div>
<div className=`swiper-slide ${swiperSlide}`>Slide 1</div>
</div>
</div>
)
}
}

Style file


//app.module.css 

.swiperContainer
{
width: 100%;
height: 100%;
/*this gives the dimension of slider container*/
/*these values will make the container as big as the parent div*/
overflow: hidden;
/*important parameter to not disrupt the container when slides increases in coverflow and other effect*/
}


.swiperSlide
{
width:300px;
height:300px;
/*this one holds the dimension of each slides and can be changed according to the user wish*/
}


.swiperWrapper {}

For the correct work of the component each react-component should be a module (for example, app.module.css instead of app.css). While adding classes, we use an entry like `swiper-container $ {classes.swiperContainer}`, where swiper-container is the standard class of the Swiper library, classes.swiperContainer is a custom class. It's important to have two classes.

Please pay attention. If you need to add two or more identical slider components to the one page, you have to create a copy of your slider component (for example slider.js and slider-custom.js)

Examples

Basic

Pagination use

Basic

Pagination and navigation use

Basic

Scrollbar use

Slider

Detailed documentation and examples of component use you can find on the development official page by the corresponding links.

Detailed information about Implementing Swiper In React you can find by the Link

Switch

Switching Selector. Before use Switch, you need to import:

import { Switch } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

When To Use#

  • If you need to represent the switching between two states or on-off state.

  • The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.

Examples

Basic

The most basic usage in two styles

Customization

Adding the text from the left and dark sides of Switch

Switch

Property Description Type Default
autoFocus Whether get focus when component mounted boolean false
checked Determine whether the Switch is checked boolean false
checkedChildren The content to be shown when the state is checked string | ReactNode -
defaultChecked Whether to set the initial state boolean false
disabled Disable switch boolean false
loading Loading state of switch boolean false
unCheckedChildren The content to be shown when the state is unchecked string | ReactNode -
onChange Trigger when the checked state is changing function(checked: boolean, event: Event) -
onClick Trigger when clicked function(checked: boolean, event: Event) -
className The additional class to Switch string -
left Adding the text description from the left side of Switch string -
right Adding the text description from the right side of Switch string -

Methods

Name Description
blur() Remove focus
focus() Get focus

Tabs

Tabs make it easy to switch between different views. Before use Tabs, you need to import

import { Tabs } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

When To Use#

  • For managing too many closeable views.

  • For functional aspects of a page.

Examples

Basic

Default activate first tab.

Icon

The Tab with Icon.

Centered

Centered tabs.

Disabled

Disabled a tab.

Tabs

Property Description Type Default Version
addIcon Customize add icon ReactNode - 4.4.0
activeKey Current TabPane's key string -
animated Whether to change tabs with animation. Only works while tabPosition="top" | "bottom" boolean | {inkBar: boolean, tabPane: boolean} false
renderTabBar Replace the TabBar (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement -
defaultActiveKey Initial active TabPane's key, if activeKey is not set string -
hideAdd Hide plus icon or not. Only works while type="editable-card" boolean false
size Preset tab bar size large | default | small default
centered Centers tabs boolean false 4.4.0
tabBarExtraContent Extra content in tab bar ReactNode -
tabBarGutter The gap between tabs number -
tabBarStyle Tab bar style object object -
tabPosition Position of tabs top | right | bottom | left top
type Basic style of tabs line | card | editable-card line
onChange Callback executed when active tab is changed function(activeKey) {} -
onEdit Callback executed when tab is added or removed. Only works while type="editable-card" (targetKey, action) => void -
onTabClick Callback executed when tab is clicked function(key: string, event: MouseEvent) -
onTabScroll Trigger when tab scroll function({ direction: left | right | top | bottom }) - 4.3.0
keyboard Whether to turn on keyboard navigation boolean true

Tabs.TabPane

Property Description Type Default
forceRender Forced render of content in tabs, not lazy render after clicking on tabs boolean false
key TabPane's key string -
tab Show text in TabPane's head string | ReactNode -
closeIcon Customize close icon in TabPane's head. Only works while type="editable-card" ReactNode -

Text Button

An element consisting of icon and text description.

Used in conjunction with Frame and Icon components

Examples

Basic

Simple example of use. Two directions of the text.

Text Button

Property Description Type Default
text Text content inside the element string -
link URL link address string -
position The position of the inserted element (Icon or Frame) left | right right
className The additional class to Switch string 4
onClick Trigger when clicked function(checked: boolean, event: Event) -
children The object passed to be presented inside the frame/td> ReactNode -

Tree Select

Tree selection control.

import { TreeSelect } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

When To Use#

TreeSelect is similar to Select, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control.

Examples

Basic

The most basic usage. Two sizes are available.

Tree Select

Property Description Type Default Version
className The additional class to Tree Select. Possible classes for the element: big, large string -
dark Apply dark theme styles boolean false

TreeNode props

Property Description Type Default Version
selectable Whether can be selected boolean true
checkable When Tree is checkable, set TreeNode display Checkbox or not boolean -
disableCheckbox Disables the checkbox of the treeNode boolean false
disabled Disabled or not boolean false
isLeaf Leaf node or not boolean false
key Required property (unless using treeDataSimpleMode), should be unique in the tree string -
title Content showed on the treeNodes ReactNode ---
value Will be treated as treeNodeFilterProp by default, should be unique in the tree string -