Skip to content

Commit

Permalink
docs(tabBar): update tabBar doc and demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuanmeda
yuanmeda committed Oct 26, 2022
1 parent 6b658f2 commit 963ea85
Show file tree
Hide file tree
Showing 7 changed files with 131 additions and 340 deletions.
36 changes: 36 additions & 0 deletions src/tab-bar/_example/badge-props.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React, { useState, useEffect } from 'react';
import { TabBar, TabBarItem } from 'tdesign-mobile-react';
import { AppIcon } from 'tdesign-icons-react';

function TabBarBaseDemo() {
const list = [
{ name: 'label_1', text: '文字', icon: <AppIcon />, badgeProps: { count: 16 } },
{ name: 'label_2', text: '文字', icon: <AppIcon />, badgeProps: { dot: true } },
{ name: 'label_3', text: '文字', icon: <AppIcon />, badgeProps: { count: 'New' } },
{ name: 'label_4', text: '文字', icon: <AppIcon />, badgeProps: { count: '···' } },
];
const [value, setValue] = useState('label_1');

const change = (changeValue) => {
setValue(changeValue);
console.log('TabBar 值改变为：', changeValue);
};

useEffect(() => {
console.log('当前值：', value);
}, [value]);

return (
<div className="demo-tab-bar">
<TabBar value={value} onChange={change}>
{list.map((item, i) => (
<TabBarItem key={item.name || i} icon={item.icon} value={item.name} badgeProps={item.badgeProps}>
{item.text}
</TabBarItem>
))}
</TabBar>
</div>
);
}

export default TabBarBaseDemo;
53 changes: 14 additions & 39 deletions src/tab-bar/_example/base.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,15 @@
import React, { useState, useEffect } from 'react';
import { TabBar, TabBarItem } from 'tdesign-mobile-react';
import { AppIcon } from 'tdesign-icons-react';

function TabBarBaseDemo() {
const list1 = [
{
name: 'label_1',
text: '标签一',
icon: undefined,
},
{
name: 'label_2',
text: '标签二',
icon: undefined,
},
const list = [
{ name: 'label_1', text: '文字', icon: <AppIcon /> },
{ name: 'label_2', text: '文字', icon: <AppIcon /> },
{ name: 'label_3', text: '文字', icon: <AppIcon /> },
{ name: 'label_4', text: '文字', icon: <AppIcon /> },
];
const list2 = [
...list1,
{
name: 'label_3',
text: '标签三',
icon: undefined,
},
];
const list3 = [
...list2,
{
name: 'label_4',
text: '标签四',
icon: undefined,
},
];
const [value, setValue] = useState('label_2');
const [value, setValue] = useState('label_1');

const change = (changeValue) => {
setValue(changeValue);
Expand All @@ -41,19 +20,15 @@ function TabBarBaseDemo() {
console.log('当前值：', value);
}, [value]);

const demoList = [list1, list2, list3];

return (
<div className="demo-tab-bar">
{demoList.map((demo, idx) => (
<TabBar key={idx} value={value} onChange={change}>
{demo.map((item, i) => (
<TabBarItem key={item.name || i} icon={item.icon} value={item.name}>
{item.text}
</TabBarItem>
))}
</TabBar>
))}
<TabBar value={value} onChange={change}>
{list.map((item, i) => (
<TabBarItem key={item.name || i} icon={item.icon} value={item.name}>
{item.text}
</TabBarItem>
))}
</TabBar>
</div>
);
}
Expand Down
69 changes: 0 additions & 69 deletions src/tab-bar/_example/icon-text.jsx
View file

This file was deleted.

172 changes: 16 additions & 156 deletions src/tab-bar/_example/mobile.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,173 +1,33 @@
import React, { useCallback, useState } from 'react';
import { TabBar, TabBarItem } from 'tdesign-mobile-react';
import { AppIcon } from 'tdesign-icons-react';

import React from 'react';
import TDemoBlock from '../../../site/mobile/components/DemoBlock';
import TDemoHeader from '../../../site/mobile/components/DemoHeader';

import './style/index.less';

const list1 = [
{
name: 'label_1',
text: '标签一',
children: [],
badge: {},
},
{
name: 'label_2',
text: '标签二',
children: [],
badge: {},
},
];
const list2 = [
...list1,
{
name: 'label_3',
text: '标签三',
children: [],
badge: {},
},
];
const list3 = [
...list2,
{
name: 'label_4',
text: '标签四',
children: [],
badge: {},
},
];
const list4 = [
...list3,
{
name: 'label_5',
text: '标签五',
children: [],
badge: {},
},
];

const list5 = [
...list1,
{
name: 'label_3',
text: '此处展开',
children: [
{
value: 'spread_1',
label: '展开项一',
},
{
value: 'spread_2',
label: '展开项二',
},
{
value: 'spread_3',
label: '展开项三',
},
],
},
];

const list6 = [
{
name: 'label_1',
text: '标签一',
children: [],
badge: {
count: '16',
},
},
{
name: 'label_2',
text: '标签二',
children: [],
badge: {
dot: true,
},
},
{
name: 'label_3',
text: '标签三',
children: [],
badge: {
count: 'New',
},
},
{
name: 'label_4',
text: '标签四',
children: [],
badge: {
count: '···',
},
},
];
import BaseDemo from './base';
import BadgePropsDemo from './badge-props';
import TextDemo from './text';
import PureIconDemo from './pure-icon';
import TextSpreadDemo from './text-spread';

const demoList1 = [list1, list2, list3];
const demoList2 = [list1, list2, list3, list4, list6];
const demoList3 = [list1, list2, list3, list4];

const defaultValue = 'label_1';
import './style/index.less';

function TabBarMobileDemo() {
const [value, setValue] = useState(1);

const change = useCallback((changeValue) => {
setValue(changeValue);
console.log('TabBar 值改变为：', changeValue);
}, []);

return (
<div className="tdesign-mobile-demo">
<TDemoHeader title="TabBar 标签栏" summary="移动端的主导航，用做功能模块之间的切换"></TDemoHeader>
<TDemoBlock title="01 类型" summary="单层级纯文本标签栏">
{demoList1.map((demo, index) => (
<TabBar key={index} defaultValue={defaultValue} onChange={change}>
{demo.map((item, idx) => (
<TabBarItem name={item.name} key={item.name || idx} value={item.name}>
{item.text}
</TabBarItem>
))}
</TabBar>
))}
<TDemoBlock title="01 类型" summary="基础标签栏">
<BaseDemo />
</TDemoBlock>
<TDemoBlock summary="带徽章标签栏">
<BadgePropsDemo />
</TDemoBlock>
<TDemoBlock summary="文本加图标标签栏">
{demoList2.map((demo, index) => (
<TabBar key={index} defaultValue={defaultValue} onChange={change}>
{demo.map((item, idx) => (
<TabBarItem
name={item.name}
key={item.name || idx}
badgeProps={item.badge}
icon={<AppIcon />}
value={item.name}
>
{item.text}
</TabBarItem>
))}
</TabBar>
))}
<TDemoBlock summary="纯文本标签栏">
<TextDemo />
</TDemoBlock>
<TDemoBlock summary="纯图标标签栏">
{demoList3.map((demo, index) => (
<TabBar key={index} defaultValue={defaultValue} onChange={change}>
{demo.map((item, idx) => (
<TabBarItem name={item.name} key={item.name || idx} icon={<AppIcon />} value={item.name}></TabBarItem>
))}
</TabBar>
))}
<PureIconDemo />
</TDemoBlock>
<TDemoBlock summary="双层级纯文本标签栏">
<TabBar value={value} onChange={change} fixed bordered={false}>
{list5.map((item, idx) => (
<TabBarItem name={item.name} key={item.name || idx} subTabBar={item.children}>
{item.text}
</TabBarItem>
))}
</TabBar>
<TextSpreadDemo />
</TDemoBlock>
</div>
);
Expand Down
Loading

0 comments on commit 963ea85

Please sign in to comment.