Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(tabBar): update tabBar doc and demo #302

Merged
merged 1 commit into from
Oct 27, 2022
Merged

docs(tabBar): update tabBar doc and demo #302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions src/tab-bar/_example/badge-props.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop

This file was deleted.

172 changes: 16 additions & 156 deletions src/tab-bar/_example/mobile.jsx
View file
Open in desktop
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