index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import CardSecond from './CardSecond';
import './index.css';
ReactDOM.render(
<div>
<CardSecond />
</div>,
document.getElementById('root')
);
 
 
CardSecond.js:
 
import React from 'react';
import 'antd/dist/antd.css';
import { Card } from 'antd';
const tabListNoTitle = [{
key: 'ha',
tab: 'haha',
}, {
key: 'hei',
tab: 'heihei',
}, {
key: 'he',
tab: 'hehe',
}, {
key: 'ke',
tab: 'keke',
}, {
key: 'de',
tab: 'dede',
}];
const contentListNoTitle = {
ha: <p>haha</p>,
hei: <p>heihei</p>,
he: <p>hehe</p>,
ke: <p>keke</p>,
de: <p>dede</p>,
};
class TabsCard extends React.Component {
state = {
noTitleKey: 'hei',
}
onTabChange = (key, type) => {
console.log(key, type);
this.setState({ [type]: key });
}
render() {
return (
<div>
<Card
style={{ width: '100%' }}
tabList={tabListNoTitle}
activeTabKey={this.state.noTitleKey}
onTabChange={(key) => { this.onTabChange(key, 'noTitleKey'); }}
>
{contentListNoTitle[this.state.noTitleKey]}
</Card>
</div>
);
}
}
export default TabsCard
 
 
 
#result:
 

react+antd 选项卡切换的更多相关文章

  1. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  2. 封装react antd的form表单组件

    form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...

  3. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  4. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  5. 慕课编程题JS选项卡切换

    Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...

  6. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  8. Android ViewPager实现选项卡切换

    ViewPager实现选项卡切换,效果图如下: 步骤一:这里使用兼容低版本的v4包进行布局,这里eclipse没有输入提示,所以要手动输入,文件名称“activity_main.xml” <Re ...

  9. 7、JavaScript总结——实现选项卡切换的效果

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

随机推荐

  1. 扩展欧拉定理【洛谷P4139】 上帝与集合的正确用法

    P4139 上帝与集合的正确用法 \(2^{2^{2^{\dots}}}\bmod p\) 卡最优解倒数第一祭. 带一下扩展欧拉定理就好了. code: #include <iostream&g ...

  2. MAC系统从零开始

    刚从ubuntu转过来,使用mac多有不习惯的地方,下面记录一些使用中遇到的问题,与解决方法. 1.关于应用程序菜单 在mac中的应用程序菜单,不是在应用程序自身,而是在桌面的桌面的顶部栏上,这个栏会 ...

  3. 51 Nod 1050 dp

    1050 循环数组最大子段和 1 秒 131,072 KB 10 分 2 级题   N个整数组成的循环序列a[1],a[2],a[3],…,a[n],求该序列如a[i]+a[i+1]+…+a[j]的连 ...

  4. php post get 繁体、日文、韩文时 自动添加 反斜杠 问题

    做些二次开发项目,数据库.文件编码没法大规模的修改,比如二次开发一个日文系统,编码是JA16SJIS,$_POST或$_GET的信息中如果“申請”,得到的信息就会变成“申\請”,多出一个反斜杠! 先贴 ...

  5. 初识express

    初识Express 1.简介: express是基于Nodejs平台的快速,开放,极简的web开发框架 2.安装 npm install express --save 3.Hello world: c ...

  6. Shiro在SpringBoot中的使用

    Demo代码请参考:https://github.com/roostinghawk/ShiroDemo 以下为主要代码(经过验证,测试) 1. pom.xml:引用shiro <dependen ...

  7. Vue-cil结合Element-ui开发(一)

    前几天用了一下Vue.js结合Element-ui,踩了很多坑,现在总结一下以备以后复习-------------------------------------------------------- ...

  8. oracle表空间tablespace

    用户:用户是在实例下建立的.不同实例可以建相同名字的用户. 表空间:表空间是一个用来管理数据存储逻辑概念,表空间只是和数据文件(ORA或者DBF文件)发生关系,数据文件是物理的,一个表空间可以包含多个 ...

  9. Apache和Tomcat的整合过程(转载)

    一 Apache与Tomcat比较联系 apache支持静态页,tomcat支持动态的,比如servlet等. 一般使用apache+tomcat的话,apache只是作为一个转发,对jsp的处理是由 ...

  10. Monkey入门之如何在android虚拟机中安装apk包

    如果想把公司的产品apk包安装到android虚拟机中,应该进行如下操作: 1.首先将apk包放到C:\Program Files\Android\android-sdk\platform-tools ...