React UI组件库Ant Design

最新推荐文章于 2023-01-26 20:57:34 发布

奔奔和空空

最新推荐文章于 2023-01-26 20:57:34 发布

阅读量151

点赞数

分类专栏： React 文章标签： reactjs javascript

本文链接：https://blog.csdn.net/xyyxuyanying/article/details/108265585

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

React UI组件库 AntDesign

Ant Design 官方文档

首先在项目里安装

npm install antd --save
# 或
yarn add antd

使用示例

1.在`index.js`中引入样式

在全局都可以使用样式

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' // 样式引入

2.在`list1.js`中使用走马灯`Carousel`组件

import React from 'react'
import { Carousel } from 'antd'


const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
}

function onChange(current) {
  console.log(current)
}

class List1 extends React.Component {

  render () {
    return (
      <div>
        <h1>list1111</h1>
        <Carousel autoplay  afterChange={onChange}>
          <div>
            <h3 style={contentStyle}>1</h3>
          </div>
          <div>
            <h3 style={contentStyle}>2</h3>
          </div>
          <div>
            <h3 style={contentStyle}>3</h3>
          </div>
          <div>
            <h3 style={contentStyle}>4</h3>
          </div>
        </Carousel>
      </div>
    )
  }

}

export default List1