1.3.6 • Published 5 months ago
@ylzcc/container v1.3.6
安装
npm install @ylzcc/container or
yarn add @ylzcc/container
使用
import { Container, Tab } from '@ylzcc/container'
const App = () => {
// 组件的props
const [docProps, setdocProps] = useState({
abc: 12
})
// 同时要监听组件的props变化,如果变化要重新改变tabs,组件的props才会改变
useEffect(() => {
setTabs([
{
id: '1',
title: 'Doc',
icon: docsvg,
component: Doc,
props: docProps
}
])
}, [docProps])
// 所有标签
const [tabs, setTabs] = useState<Tab[]>([
{
id: '1',
title: 'Doc',
icon: docsvg,
component: Doc,
menu: [
{
title: '打印',
callback: () => {
console.log(12)
}
}
],
props: docProps
},
{
id: '2',
title: 'MonacoEditor',
icon: docsvg,
component: MonacoEditor,
}
])
//more
const addMore = () => {
setTabs([
...tabs,
{
id: '5',
title: '新标签页',
component: More,
}
])
setCurrent('5')
}
// 当前标签
const [current, setCurrent] = useState('1')
// 关闭标签
const closeTab = (id: string) => {
const newTabs = tabs.filter(item => {
return item?.id !== id
})
if (id === current) {
newTabs.length ? setCurrent(newTabs[0].id as string) : setCurrent("")
}
setTabs(newTabs)
}
// 关闭其他标签页
const closeOtherTabs = () => {
const newTabs = tabs.filter(item => {
return item.id === current
})
setTabs(newTabs)
}
// 选择标签页
const changeCurrent = (id: string) => {
setCurrent(id)
}
return (
<div className='layout-content-show'>
<Container tabs={tabs} current={current} closeTab={closeTab} closeOtherTabs={closeOtherTabs} changeCurrent={changeCurrent} addMore={addMore} />
</div>
)
}
1.3.6
5 months ago
1.3.5
5 months ago
1.3.4
5 months ago
1.3.3
6 months ago
1.3.2
6 months ago
1.2.2
11 months ago
1.2.0
11 months ago
1.1.5
11 months ago
1.2.1
11 months ago
1.1.1
12 months ago
1.1.0
12 months ago
1.0.9
12 months ago
1.0.8
12 months ago
1.0.7
12 months ago
1.0.6
12 months ago
1.1.4
11 months ago
1.0.5
12 months ago
1.1.3
11 months ago
1.0.4
1 year ago
1.1.2
12 months ago
1.0.10
12 months ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago