侧边栏布局和响应式布局的对比（Semi Design）

1. 布局布局

• 侧边栏布局：
  
  
  
  • 通常将页面分为侧边栏（Sider）和重要内容地区（Content）。
    
  • 侧边栏通常用于导航、菜单或其他辅助功能，而重要内容地区用于展示焦点内容。
    
  • 在你的代码中，Silider 组件就是一个典型的侧边栏布局，侧边栏固定在左侧，右侧是 Header、Content 和 Footer。
    
  
  
• 响应式布局：
  
  
  
  • 响应式布局是指页面能够根据不同的屏幕尺寸或设备自动调解布局和样式。
    
  • 在你的代码中，Silider2 组件利用了响应式布局的特性，通过 breakpoint 属性设置了断点，当屏幕宽度小于即是 md 时，侧边栏会自动隐藏。
    
  
  

2. 响应式处置惩罚

• 侧边栏布局：
  
  
  
  • 侧边栏布局自己并不一定具备响应式特性。它可能在不同屏幕尺寸下保持固定的布局，导致在小屏幕上内容显示不全或布局杂乱。
    
  • 例如，Silider 组件中的侧边栏宽度是固定的 120px，无论屏幕尺寸如何变革，侧边栏的宽度都不会改变。
    
  
  
• 响应式布局：
  
  
  
  • 响应式布局会根据屏幕尺寸的变革自动调解布局。例如，当屏幕宽度小于某个断点时，侧边栏可以隐藏或折叠，以适应小屏幕设备。
    
  • 在 Silider2 组件中，通过 breakpoint 属性设置了断点 ['md']，当屏幕宽度小于即是 md 时，侧边栏会自动隐藏，从而适应小屏幕设备。
    
  
  

3. 断点处置惩罚

• 侧边栏布局：
  
  
  
  • 侧边栏布局通常不涉及断点处置惩罚，布局是静态的，不会根据屏幕尺寸变革而改变。
    
  • 例如，Silider 组件中没有利用 breakpoint 属性，侧边栏的显示和隐藏不会根据屏幕尺寸变革。
    
  
  
• 响应式布局：
  
  
  
  • 响应式布局通常利用断点来处置惩罚不同屏幕尺寸下的布局变革。通过设置断点，可以在不同屏幕尺寸下应用不同的样式或行为。
    
  • 在 Silider2 组件中，通过 breakpoint 属性设置了断点 ['md']，并且通过 onBreakpoint 回调函数可以监听断点的触发情况。
    
  
  

4.侧边栏布局代码：

1. import { Layout } from "@douyinfe/semi-ui";
2. //侧边布局
3. const Silider = () => {
4.   const { Header, Footer, Sider, Content } = Layout;
5.   const commonStyle = {
6.     height: 64,
7.     lineHeight: '64px',
8.     textAlign: 'center',
9.     width: 1300,
10.     background: 'var(--semi-color-fill-0)'
11.   };
12.   return (
13.     <Layout className="components-layout-demo" style={
14.   
15.   { margin: '0 auto 0 50px' }}>
16.       <Sider style={
17.   
18.   { width: '120px', background: 'var(--semi-color-fill-2)' }}>Sider</Sider>
19.       <Layout>
20.         <Header style={commonStyle}>Header</Header>
21.         <Content style={
22.   
23.   { height: 300, lineHeight: '300px' }}>Content</Content>
24.         <Footer style={commonStyle}>Footer</Footer>
25.       </Layout>
26.     </Layout>
27.   );
28. };
30. export default Silider;

复制代码

5. 响应式布局代码展示：

1. import { Layout } from "@douyinfe/semi-ui";
3. const Silider2 = () => {
4.   // screen: 屏幕类型，bool: 是否满足断点
5.   const onbreakpoint = (screen, bool) => {
6.     console.log(screen, bool);
7.   };
8.   const commonStyle = {
9.     height: 64,
10.     textAlign: 'center',
11.     lineHeight: '64px',
12.     background: 'var(--semi-color-fill-0)'
13.   };
14.   const { Header, Footer, Sider, Content } = Layout;
15.   return (
16.     <Layout className="components-layout-demo" style={
17.   
18.   { margin: '0 auto 0 50px' }}>
19.       <Header style={commonStyle}>Header</Header>
20.       <Layout>
21.         <Sider
22.           style={
23.   
24.   { width: '120px', background: 'var(--semi-color-fill-2)', textAlign: 'center' }}
25.           // 设置断点，当屏幕宽度小于等于 md 时，将侧边栏隐藏
26.           breakpoint={['md']}
27.           // 设置断点后，当断点触发时，会触发 onBreakpoint 回调
28.           onBreakpoint={onbreakpoint}
29.         >
30.           Sider
31.         </Sider>
32.         <Content style={
33.   
34.   { height: 300, lineHeight: '300px', textAlign: 'center' }}>Content</Content>
35.       </Layout>
36.       <Footer style={commonStyle}>Footer</Footer>
37.     </Layout>
38.   );
39. };
41. export default Silider2;

复制代码

6.效果图（注：在本图片中，上图为侧边栏效果展示图，下图为响应式效果展示图）

tips：如何将两个页面的内容展示在一起，可以在main.jsx中利用div来实现

1. import { StrictMode } from 'react'
2. import { createRoot } from 'react-dom/client'
3. import './index.css'
4. import Silider from './LayOut/Silider'
5. import Silider2 from './LayOut/Silider2.0'
6. createRoot(document.getElementById('root')).render(
7.   <StrictMode>
8.     <div>
9.       <Silider />
10.       <br />
11.       <Silider2 />
12.     </div>
13.   </StrictMode>,
14. )

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。