酷站(www.ku0.com)-致力于为互联网从业者提供专业的网络资源资讯

热门关键词:  企业  as  baidu  c4rp3nt3r  美女

React手写tab切换的介绍

来源:互联网 作者:秩名 人气: 发布时间:2021-11-12
本篇文章主要介绍了React手写tab切换的介绍,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

在这里插入图片描述

父文件

import React, { useState } from 'react';
// import Module1 from './Module1';
// import Module2 from './Module2';
// import Module3 from './Module3';
// import Module4 from './Module4';
import HeaderTtabs, { tagType } from '@/components/Task/Tree/Common/component/TabsContent/ListContent/HeadTabs';
import { divide } from 'lodash';

export default function (props: any) {

  const tabsList: tagType[] = [
    { name: 'xxx况' },
    { name: '培育xxxxx', disabled: false },
    { name: '关xxxx', disabled: false },
    { name: '科xxxx', disabled: false },
    { name: '人xxxx', disabled: false },
  ];
  const [checkedTag, setCheckedTag] = useState(tabsList[0])
  return (<div>
    <HeaderTtabs tabsList={tabsList} checkedTag={checkedTag} setCheckedMenu={(tab) => setCheckedTag(tab)} />
    <div className={`pt5 px20 pb20`}>
    {checkedTag.name === tabsList[0].name && <div>11</div>}
      {checkedTag.name === tabsList[1].name && <div>22</div>}
      {checkedTag.name === tabsList[2].name && <div>33</div>}
      {checkedTag.name === tabsList[3].name && <div>44</div>}
      {checkedTag.name === tabsList[4].name && <div>55</div>}
      {/* {checkedTag.name === tabsList[0].name && <Module1 />}
      {checkedTag.name === tabsList[1].name && <Module2 />}
      {checkedTag.name === tabsList[2].name && <Module3 />}
      {checkedTag.name === tabsList[3].name && <Module4 />} */}
    </div>
  </div>);
}

子文件

import style from './index.scss';
import React from 'react';
import { message } from 'antd';

// 标签类型
export type tagType = {
  name: string, // 标签名称,唯一
  disabled?: boolean // 是否禁用
}

/**
 * 子页面 tab 栏
 * @param props
 */
export default function(props: {
  tabsList: tagType[], // 标签列表
  checkedTag: tagType, // 当前选中的标签
  setCheckedMenu: (menu: tagType) => void // 标签点击回调
}) {
  const {tabsList, checkedTag, setCheckedMenu} = props
  const setCheck = (menu: tagType) => {
    if (menu.disabled) {
      message.warning('功能暂未开放');
      return
    }
    setCheckedMenu(menu)
  }
  return (<div className={`${style.tag_area} ${style.epidemic_area}`}>
    {
      tabsList.map((item) => (
        <div className={`${style.tag} ${checkedTag.name === item.name ? style.checked : ''} ${style.epidemic}`} key={item.name} onClick={() => setCheck(item)}>
          {item.name}
        </div>
      ))
    }
  </div>)
}

 

子文件-tab样式:

在这里插入图片描述

.tag_area {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
  background-color: #fff;
  margin-bottom: 20px;
  @media only screen and (max-width: 768px) {
    & {
      margin-top: 10px;
    }
  }
}

.tag {
  // flex: 1;
  // margin: 0 15px;
  min-width: 130px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  height: 50px;
  color: #333;
  cursor: pointer;
  transition: .3s all;
  // box-shadow: 5px 3px 4px #999;
  font-size: 18px;
  // border-radius: 10px;
  border-radius: 6px 6px 0px 0px;
  @media only screen and (max-width: 768px) {
    & {
      font-size: 14px;
      margin: 0 5px;
      min-height: 30px;
      text-align: center;
      padding: 5px;
    }
  }

  &.checked {
    color: #fff;
    background-color: #1E9FFF;
  }
  &:hover {
    color: #fff;
    background-color: #1E9FFF;
  }
}


// 浙里防疫 四个tab样式
.epidemic_area{
  justify-content: left;
  margin: 10px 20px;
  padding:10px;
}

.epidemic{
  margin:0 10px;
  width: 200px;
  background: rgba(20, 146, 255, 0.1);
  border: 1px solid #1492FF;
  box-sizing: border-box;
  border-radius: 4px;
  height: 44px;
}

 

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/qq_34821328/article/details/121222441

相关文章

  • JavaScript实现余额数字滚动效果

    JavaScript实现余额数字滚动效果

    1.实现背景 上周在一个完成任务领取红包的活动需求中,需要实现一个用户点击按钮弹出领取红包弹窗后,在关 闭弹窗返回原来的页面时,页面余额数字部分要展示一个......
    12-24
  • JavaScript函数封装随机颜色验证码(完整代码)的介

    JavaScript函数封装随机颜色验证码(完整代码)的介

    数字或者字母或者数字字母混合的n位验证码带随机的颜色。下面是完整的代码,需要的自取哈! ? function verify(a = 6,b = num){ //定义三个随机验证码验证码库 var num =01234567......
    12-22
  • js实现数组的扁平化介绍

    js实现数组的扁平化介绍

    数组扁平化的方式 什么是数组扁平化? 数组扁平化:指将一个多维数组转化为一个一维数组。 例:将下面数组扁平化处理。 const arr = [1, [2, 3, [4, 5]]] // --- [ 1, 2, 3, 4, 5 ......
    12-11
  • JavaScript事件委托原理介绍

    JavaScript事件委托原理介绍

    一、什么是事件委托 事件委托也称为事件代理。就是利用事件冒泡,把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托就无法实现。 举个简单的......
    12-07
  • 使用react-color实现前端取色器的教程

    使用react-color实现前端取色器的教程

    我们可以通过react-color实现前端界面的取色器,效果如下图所示: 安装 npm i react-color -S 使用 import React, { Component, Fragment, createRef } from react; import { Popover } from antd; import {......
    11-12
  • React手写tab切换的介绍

    React手写tab切换的介绍

    父文件 import React, { useState } from react; // import Module1 from ./Module1; // import Module2 from ./Module2; // import Module3 from ./Module3; // import Module4 from ./Module4; import HeaderTtabs, { tagType } from......
    11-12
  • react路由Link配置的介绍

    react路由Link配置的介绍

    1、Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:/xx,search:?键值对,hash:#xxx,state:{键值对}}会自动将pathname、search、hash拼接在url路径上,state为传入的参数 可通......
    11-10
  • JavaScript实现橱窗展示的介绍

    JavaScript实现橱窗展示的介绍

    先搭架子: * { margin: 0; padding: 0; } .box { width: 800px; height: 190px; border: 1px solid #000; margin: 100px auto; } ul { list-style: none; display: flex; } ul img { vertical-align: top; } .progress { width: 100......
    11-08
  • 原型和原型链prototype和proto的区别介绍

    原型和原型链prototype和proto的区别介绍

    1、原型 原型是function对象下的属性,它定义了构造函数的共同祖先,也就是一个父子级的关系,子对象会继承父对象的方法和属性 prototype是函数下的属性,对象想要查看......
    10-31
  • Echats图表大屏自适应的实现方法介绍

    Echats图表大屏自适应的实现方法介绍

    使用图表结合数据可以很直观的视觉效应,大屏展示已经成为企业数据展示的常见场景,如何做到大屏自适应是我们需要解决的一个问题,下面是其中一种解决方案,利用......
    10-25