您好,登錄后才能下訂單哦!
小編給大家分享一下React如何手寫tab切換問(wèn)題,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
父文件
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: '關(guān)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'; // 標(biāo)簽類型 export type tagType = { name: string, // 標(biāo)簽名稱,唯一 disabled?: boolean // 是否禁用 } /** * 子頁(yè)面 tab 欄 * @param props */ export default function(props: { tabsList: tagType[], // 標(biāo)簽列表 checkedTag: tagType, // 當(dāng)前選中的標(biāo)簽 setCheckedMenu: (menu: tagType) => void // 標(biāo)簽點(diǎn)擊回調(diào) }) { const {tabsList, checkedTag, setCheckedMenu} = props const setCheck = (menu: tagType) => { if (menu.disabled) { message.warning('功能暫未開(kāi)放'); 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; } } // 浙里防疫 四個(gè)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; }
以上是“React如何手寫tab切換問(wèn)題”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。