怎样做网站策划,如何做网站代码,三只羊网络科技有限公司,天猫店铺购买平台文章目录 FlexGridLayout React初步antd初步
任何UI工具#xff0c;布局都是设计过程中必不可少的一环#xff0c;前端更是如此。但网页和桌面应用还有区别#xff0c;正常的网页#xff0c;无论在手机还是PC上#xff0c;基本都是自上而下排布的信息流#xff0c;这种浏… 文章目录 FlexGridLayout React初步antd初步
任何UI工具布局都是设计过程中必不可少的一环前端更是如此。但网页和桌面应用还有区别正常的网页无论在手机还是PC上基本都是自上而下排布的信息流这种浏览方式对布局来说是一个限制即很难想象一个网页提供从下到上的浏览方式。
AntD主要提供了三种布局方式分别是弹性布局、栅格布局和规划布局由于antd官网提供了非常友好的示例所以下面仅用最简单的代码展示个中差异。
Flex
Flex布局就是按照指定的方向将对应元素压入其中。下面创建一个纵向的Flex在装入两个div之后再装入一个横向的Flex。
import React from react;
import { Flex } from antd;const vStyle {width: 25%,height: 54,
};const hStyle {width: 75%,height: 54,backgroundColor : lightgray
}const App () {return (Flex gapmiddle verticaldiv style{{...hStyle}}/div style{{...hStyle}}/Flex horizontaldiv style{{...hStyle, backgroundColor:#1677ff}}/div style{{...hStyle, backgroundColor:#1677ffbf}}/div style{{...hStyle, backgroundColor:#1677ff}}/div style{{...hStyle, backgroundColor:#1677ffbf}}//Flex/Flex);
};
export default App;效果如下 Grid
栅格布局也很好理解可以理解为是等分不嵌套的Flex。在AntD中用Row和Col实现栅格布局其布局逻辑如下
Row为行Col为列所有列都必须放在行里。栅格系统在水平方向被等分为24份通过span可调整单个Col所跨越的范围通过offset来调整其横向偏移。如果Row中Col的span总和超过 24那么多余的Col会作为一个整体另起一行排列。
此外考虑到不同设备的尺寸差异antd提供了6种预设尺寸
xssmmdlgxlxxl尺寸/px 576 576 576 [ 576 , 768 ) [576,768) [576,768) [ 767 , 992 ) [767,992) [767,992) [ 992 , 1200 ) [992,1200) [992,1200) [ 1200 , 1600 ) [1200,1600) [1200,1600) ⩾ 1600 \geqslant1600 ⩾1600
示例如下当浏览器的窗口尺寸不同时红绿蓝三个色条的长度比例会发生明显变化
import React from react;
import { Col, Row } from antd;
const App () (RowCol style{{ background: red }}xs{2} sm{4} md{6} lg{8} xl{10}Col/Col Col style{{ background: green }}xs{20} sm{16} md{12} lg{8} xl{4}Col/ColCol style{{ background: blue }}xs{2} sm{4} md{6} lg{8} xl{10}Col/Col/Row
);
export default App;Layout
可以把Layout理解为一系列布局组件的合称除了Layout自身之外还有四个只能被嵌套在Layout中的组件
Header顶部布局Sider侧边栏Content内容部分Footer底部布局
由于Layout可以嵌套自身所以这种布局方式十分灵活将Layout核另外四种组件组合拼接然后再用Layout进行嵌套几乎可以实现任何布局方式以下图为例就是先让Layout与Header、Footer嵌套在一起再向这个Layout中防止Sider与Content 布局代码如下
const App () (Spacedirectionverticalstyle{{width: 100%,}}size{[0, 48]}LayoutHeader style{headerStyle}Header/HeaderLayout hasSiderSider style{siderStyle}Sider/SiderContent style{contentStyle}Content/Content/LayoutFooterFooter/Footer/Layout/Space
);
