mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

chore(tabs): update demo (#39731)

Browse Source 
* 做重复了

* Revert "做重复了"

This reverts commit 79c59e79ea66c6592df9dca0e41e10399044ec7a.

* site(theme): demo block supports no inner margin configuration

ref: https://d.umijs.org/guide/write-demo#%E4%B8%8D%E9%9C%80%E8%A6%81%E5%86%85%E8%BE%B9%E8%B7%9D

* docs(tabs): update demo styles

* chore: update style

* test: update snapshot

* Revert "site(theme): demo block supports no inner margin configuration"

This reverts commit ee2ff25796.

* chore: update

* Revert "chore: update"

This reverts commit bbe449cb3f.

* Revert "Revert "site(theme): demo block supports no inner margin configuration""

This reverts commit 5eac19e7f2.

* chore: convert to debug demo

* chore: use emotion

* test: update snapshot
This commit is contained in:
Wuxh 2022-12-23 12:12:24 +08:00 committed by GitHub
parent 70115e75c8
commit 76241f5d0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 71 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.dumi/theme/builtins/Previewer/index.tsx
View File

@ -355,7 +355,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
let codeBox = (
<section className={codeBoxClass} id={meta.id}>
<section className="code-box-demo">
<section className="code-box-demo" data-compact={meta.compact}>
<ErrorBoundary>
<React.StrictMode>{this.liveDemo}</React.StrictMode>
</ErrorBoundary>

4
.dumi/theme/common/styles/Demo.tsx
View File

@ -40,6 +40,10 @@ export default () => {
&,
.code-box-demo {
background-color: ${token.colorBgContainer};
&[data-compact] {
padding: 0;
}
}
.markdown {

9
components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -465,7 +465,7 @@ exports[`renders ./components/tabs/demo/card.tsx extend context correctly 1`] =
exports[`renders ./components/tabs/demo/card-top.tsx extend context correctly 1`] = `
<div
class="card-container"
class="css-evmtdo"
>
<div
class="ant-tabs ant-tabs-top ant-tabs-card"
@ -941,8 +941,9 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.tsx extend context correc
<div>
<div />
<div
class="ant-tabs-nav site-custom-tab-bar"
class="ant-tabs-nav"
role="tablist"
style="z-index:1"
>
<div
class="ant-tabs-nav-wrap"
@ -997,6 +998,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.tsx extend context correc
</div>
<div
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
style="z-index:1"
>
<button
aria-controls="null-more-popup"
@ -1088,7 +1090,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx extend context c
style="transform:translate(0px, 0px)"
>
<div
class=""
style="margin-right:24px"
>
<div
@ -1106,7 +1107,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx extend context c
</div>
</div>
<div
class=""
style="margin-right:24px"
>
<div
@ -1124,7 +1124,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx extend context c
</div>
</div>
<div
class=""
style="margin-right:24px"
>
<div

9
components/tabs/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -408,7 +408,7 @@ exports[`renders ./components/tabs/demo/card.tsx correctly 1`] = `
exports[`renders ./components/tabs/demo/card-top.tsx correctly 1`] = `
<div
class="card-container"
class="css-evmtdo"
>
<div
class="ant-tabs ant-tabs-top ant-tabs-card"
@ -827,8 +827,9 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
<div>
<div />
<div
class="ant-tabs-nav site-custom-tab-bar"
class="ant-tabs-nav"
role="tablist"
style="z-index:1"
>
<div
class="ant-tabs-nav-wrap"
@ -883,6 +884,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
</div>
<div
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
style="z-index:1"
>
<button
aria-controls="null-more-popup"
@ -955,7 +957,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] =
style="transform:translate(0px, 0px)"
>
<div
class=""
style="margin-right:24px"
>
<div
@ -973,7 +974,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] =
</div>
</div>
<div
class=""
style="margin-right:24px"
>
<div
@ -991,7 +991,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] =
</div>
</div>
<div
class=""
style="margin-right:24px"
>
<div

50
components/tabs/demo/card-top.md
View File

@ -5,53 +5,3 @@
## en-US
Should be used at the top of container, needs to override styles.
```css
.card-container p {
margin: 0;
}
.card-container > .ant-tabs-card .ant-tabs-content {
height: 120px;
margin-top: -16px;
}
.card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
padding: 16px;
background: #fff;
}
.card-container > .ant-tabs-card > .ant-tabs-nav::before {
display: none;
}
.card-container > .ant-tabs-card .ant-tabs-nav-list > .ant-tabs-tab,
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-nav-list > .ant-tabs-tab {
background: transparent;
border-color: transparent;
}
.card-container > .ant-tabs-card .ant-tabs-nav-list > .ant-tabs-tab-active,
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-nav-list > .ant-tabs-tab-active {
background: #fff;
border-color: #fff;
}
#components-tabs-demo-card-top .code-box-demo {
padding: 24px;
overflow: hidden;
background: #f5f5f5;
}
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-content {
height: 120px;
margin-top: -8px;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab {
background: transparent;
border-color: transparent;
}
[data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
background: #000;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
background: #141414;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
background: #141414;
border-color: #141414;
}
```

48
components/tabs/demo/card-top.tsx
View File

@ -1,5 +1,41 @@
import React from 'react';
import { Tabs } from 'antd';
import { Tabs, theme } from 'antd';
import { css } from '@emotion/css';
const useStyle = () => {
const { token } = theme.useToken();
const antdTabsCls = '.ant-tabs';
return css`
background: ${token.colorBgLayout};
padding: ${token.paddingLG}px;
${antdTabsCls}${antdTabsCls}-card {
${antdTabsCls}-content {
padding: ${token.padding}px;
background: ${token.colorBgContainer};
}
${antdTabsCls}-nav {
margin: 0;
${antdTabsCls}-nav-wrap > ${antdTabsCls}-nav-list > ${antdTabsCls}-tab {
background: transparent;
border-color: transparent;
&-active {
border-color: ${token.colorBorderBg};
background: ${token.colorBgContainer};
}
}
&::before {
display: none;
}
}
}
`;
};
const items = new Array(3).fill(null).map((_, i) => {
const id = String(i + 1);
@ -16,10 +52,14 @@ const items = new Array(3).fill(null).map((_, i) => {
};
});
const App: React.FC = () => (
<div className="card-container">
const App = () => {
const style = useStyle();
return (
<div className={style}>
<Tabs type="card" items={items} />
</div>
);
);
};
export default App;

1
components/tabs/demo/custom-tab-bar-node.md
View File

@ -8,7 +8,6 @@ Use `react-dnd@15+` to make tabs draggable.
```css
.dropping {
background: #fefefe;
transition: all 0.3s;
}
```

12
components/tabs/demo/custom-tab-bar-node.tsx
View File

@ -12,7 +12,8 @@ interface DraggableTabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
const DraggableTabNode = ({ index, children, moveNode }: DraggableTabPaneProps) => {
const ref = useRef<HTMLDivElement>(null);
const [{ isOver, dropClassName }, drop] = useDrop({
const [{ isOver }, drop] = useDrop({
accept: type,
collect: (monitor) => {
const { index: dragIndex } = monitor.getItem() || {};
@ -21,7 +22,6 @@ const DraggableTabNode = ({ index, children, moveNode }: DraggableTabPaneProps)
}
return {
isOver: monitor.isOver(),
dropClassName: 'dropping',
};
},
drop: (item: { index: React.Key }) => {
@ -37,8 +37,14 @@ const DraggableTabNode = ({ index, children, moveNode }: DraggableTabPaneProps)
});
drop(drag(ref));
// Style
const style: React.CSSProperties = { marginRight: 24 };
if (isOver) {
style.transition = 'all 0.3s';
}
return (
<div ref={ref} style={{ marginRight: 24 }} className={isOver ? dropClassName : ''}>
<div ref={ref} style={style}>
{children}
</div>
);

13
components/tabs/demo/custom-tab-bar.md
View File

@ -5,16 +5,3 @@
## en-US
Use react-sticky.
```css
.site-custom-tab-bar {
z-index: 1;
background: #fff;
}
```
<style>
[data-theme="dark"] .site-custom-tab-bar {
background: #141414;
}
</style>

4
components/tabs/demo/custom-tab-bar.tsx
View File

@ -5,9 +5,7 @@ import { Sticky, StickyContainer } from 'react-sticky';
const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
<Sticky bottomOffset={80}>
{({ style }) => (
<DefaultTabBar {...props} className="site-custom-tab-bar" style={{ ...style }} />
)}
{({ style }) => <DefaultTabBar {...props} style={{ zIndex: 1, ...style }} />}
</Sticky>
);

2
components/tabs/index.en-US.md
View File

@ -28,7 +28,7 @@ Ant Design has 3 types of Tabs for different situations.
<code src="./demo/position.tsx">Position</code>
<code src="./demo/card.tsx">Card type tab</code>
<code src="./demo/editable-card.tsx">Add & close tab</code>
<code src="./demo/card-top.tsx">Container of card type Tab</code>
<code src="./demo/card-top.tsx" compact debug>Container of card type Tab</code>
<code src="./demo/custom-add-trigger.tsx">Customized trigger of new tab</code>
<code src="./demo/custom-tab-bar.tsx">Customized bar of tab</code>
<code src="./demo/custom-tab-bar-node.tsx">Draggable Tabs</code>

2
components/tabs/index.zh-CN.md
View File

@ -31,7 +31,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
<code src="./demo/position.tsx">位置</code>
<code src="./demo/card.tsx">卡片式页签</code>
<code src="./demo/editable-card.tsx">新增和关闭页签</code>
<code src="./demo/card-top.tsx">卡片式页签容器</code>
<code src="./demo/card-top.tsx" compact debug>卡片式页签容器</code>
<code src="./demo/custom-add-trigger.tsx">自定义新增页签触发器</code>
<code src="./demo/custom-tab-bar.tsx">自定义页签头</code>
<code src="./demo/custom-tab-bar-node.tsx">可拖拽标签</code>