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

docs(Layout): use sticky instead of fixed (#52411)
Some checks failed
Publish Any Commit / build (push) Waiting to run
Details
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
Details
✅ test / lint (push) Waiting to run
Details
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
Details
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
Details
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
Details
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
Details
✅ test / test-node (push) Waiting to run
Details
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
Details
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
Details
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
Details
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
Details
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
Details
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
Details
✅ test / test-coverage (push) Blocked by required conditions
Details
✅ test / build (push) Waiting to run
Details
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
Details
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
Details
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
Details
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
Details
👁️ Visual Regression Persist Start / test image (push) Waiting to run
Details
Issue Check Inactive / issue-check-inactive (push) Has been cancelled
Details

Browse Source 
* docs(Layout): use sticky instead of fixed

* test: update snap

---------

Co-authored-by: thinkasany <480968828@qq.com>
This commit is contained in:
Guo Yunhe 2025-01-15 17:58:21 +08:00 committed by GitHub
parent af63c666d8
commit 1138f29cef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1361,7 +1361,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
> >
<aside <aside
class="ant-layout-sider ant-layout-sider-dark" class="ant-layout-sider ant-layout-sider-dark"
style="overflow: auto; height: 100vh; position: fixed; inset-inline-start: 0; top: 0px; bottom: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;" style="overflow: auto; height: 100vh; position: sticky; inset-inline-start: 0; top: 0px; bottom: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
> >
<div <div
class="ant-layout-sider-children" class="ant-layout-sider-children"
@ -1776,7 +1776,6 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
</aside> </aside>
<div <div
class="ant-layout" class="ant-layout"
style="margin-inline-start: 200px;"
> >
<header <header
class="ant-layout-header" class="ant-layout-header"

3
components/layout/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -755,7 +755,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
> >
<aside <aside
class="ant-layout-sider ant-layout-sider-dark" class="ant-layout-sider ant-layout-sider-dark"
style="overflow:auto;height:100vh;position:fixed;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-gutter:stable;flex:0 0 200px;max-width:200px;min-width:200px;width:200px" style="overflow:auto;height:100vh;position:sticky;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-gutter:stable;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
> >
<div <div
class="ant-layout-sider-children" class="ant-layout-sider-children"
@ -1026,7 +1026,6 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
</aside> </aside>
<div <div
class="ant-layout" class="ant-layout"
style="margin-inline-start:200px"
> >
<header <header
class="ant-layout-header" class="ant-layout-header"

2
components/layout/demo/fixed-sider.md
View File

@ -4,4 +4,4 @@
## en-US ## en-US
When dealing with long content, a fixed sider can provide a better user experience. When dealing with long content, a sticky sider can provide a better user experience.

4
components/layout/demo/fixed-sider.tsx
View File

@ -17,7 +17,7 @@ const { Header, Content, Footer, Sider } = Layout;
const siderStyle: React.CSSProperties = { const siderStyle: React.CSSProperties = {
overflow: 'auto', overflow: 'auto',
height: '100vh', height: '100vh',
position: 'fixed', position: 'sticky',
insetInlineStart: 0, insetInlineStart: 0,
top: 0, top: 0,
bottom: 0, bottom: 0,
@ -51,7 +51,7 @@ const App: React.FC = () => {
<div className="demo-logo-vertical" /> <div className="demo-logo-vertical" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} /> <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
</Sider> </Sider>
<Layout style={{ marginInlineStart: 200 }}> <Layout>
<Header style={{ padding: 0, background: colorBgContainer }} /> <Header style={{ padding: 0, background: colorBgContainer }} />
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}> <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<div <div

2
components/layout/demo/fixed.md
View File

@ -4,4 +4,4 @@
## en-US ## en-US
Fixed Header is generally used to fix the top navigation to facilitate page switching. Sticky Header is generally used to fix the top navigation to facilitate page switching.