建筑木工招聘平台_商标设计免费版_最近国家新闻_免费的建站平台

文章目录

一、Layout
二、Menu
三、Grid栅格
四、分割线Divider、Space间距
五、Card卡片
六、Descriptions描述列表
七、锚点和返回顶部

布局组件涉及项目框架的搭建，往往被忽略和低关注，毕竟不是经常用到，但是在调整项目结构的时候往往又需要重新设计布局，所以有必要提前归纳分析；
罗列一些常用的antd布局组件，使用频率比较高；如果没有合适的，一般都会自定义设计样式组件

一、Layout

Layout导出Sider, Content, Header，Sider, Content, Header也只能被Layout包裹，可以写嵌套Layout
React.createElement语法：const element = createElement(type, props, …children)

import { DesktopOutlined, MailOutlined, MenuFoldOutlined, 
MenuUnfoldOutlined, UserOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import React, { useState } from 'react';const { Sider, Content, Header } = Layout;
export default function LayoutPage() {const [collapsed, setCollapsed] = useState(false);const items = [// title：缩进以后，悬浮子菜单；一级菜单不会出现{ label: '菜单项一', key: 'item-1', title: '菜单项一 悬浮', icon: <MailOutlined /> }, // 菜单项务必填写 key{label: '菜单项二',key: 'item-2',title: '菜单项二 悬浮',icon: <MailOutlined />,children: [{ label: '子菜单项1', key: 'submenu-item-1', title: '子菜单项1 悬浮' }],},{label: '菜单项3',key: 'submenu',children: [{ label: '子菜单项2', key: 'submenu-item-1' },{ label: '子菜单项3', key: 'submenu-item-2' },],},];return (<div className="Layout"><Layout>{/* 左侧菜单 collapsed控制是否缩进菜单 */}<Sider collapsed={collapsed}><divclassName="logo"style={{ height: '64px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><DesktopOutlined style={{ fontSize: '32px', color: 'white' }} /></div><Menu// theme="dark"items={items}mode="inline"></Menu></Sider><Layout><Header style={{ display: 'flex', justifyContent: 'space-between' }}>{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {className: 'trigger',style: { color: 'white' },onClick: () => setCollapsed(!collapsed),})}<UserOutlined style={{ color: 'white' }} /></Header><Content>Content</Content></Layout></Layout></div>);
}

在这里插入图片描述

二、Menu

菜单栏一般为树型结构，可以点收起菜单栏
设置只展开一个一级菜单，子菜单单选

import { DesktopOutlined, MailOutlined, MenuFoldOutlined, 
MenuUnfoldOutlined, UserOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import React, { useState } from 'react';const { Sider, Content, Header } = Layout;
export default function LayoutPage() {const [collapsed, setCollapsed] = useState(false);const [selectedKeys, setSelectedKeys] = useState([]); // 当前选中的子菜单项const [openKeys, setOpenKeys] = useState([]); // 当前展开的一级菜单项const items = [// title：缩进以后，悬浮子菜单名；一级菜单不会出现{ label: '菜单项一', key: 'item-1', title: '菜单项一 悬浮', icon: <MailOutlined /> }, // 菜单项务必填写 key{label: '菜单项二',key: 'item-2',title: '菜单项二 悬浮',icon: <MailOutlined />,children: [{ label: '子菜单项1', key: 'submenu-item-1', title: '子菜单项1 悬浮' }],},{label: '菜单项3',key: 'submenu',children: [{ label: '子菜单项2', key: 'submenu-item-1' },{ label: '子菜单项3', key: 'submenu-item-2' },],},];// 一级菜单的keyconst openKeysArray = items.map((item) => item.key);const onOpenChange = (keys) => {console.log('onOpenChange', keys);// 找到最新打开的那个菜单项const latestOpenKey = keys.find((key) => !openKeys.includes(key));// 只允许出现一个展开的一级菜单if (openKeysArray.includes(latestOpenKey)) {setOpenKeys([latestOpenKey]);} else {// latestOpenKey不存在，说明关闭最后一个展开菜单setOpenKeys(latestOpenKey ? [latestOpenKey] : []);}};return (<div className="Layout">{/* <h1>Layout</h1> */}<Layout><Sider trigger={null} collapsible collapsed={collapsed}><divclassName="logo"style={{ height: '64px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><DesktopOutlined style={{ fontSize: '32px', color: 'white' }} /></div><Menuitems={items}// mode="inline" 一级菜单竖着排列，子菜单隐藏；// mode="vertical" 一级菜单竖着排列，子菜单隐藏横着排列，hover时子菜单展开；// mode="horizontal"一级菜单横着排列，hover时子菜单竖着展开；mode="inline"openKeys={openKeys}onOpenChange={onOpenChange}selectedKeys={selectedKeys}onClick={(e) => setSelectedKeys([e.key])}></Menu></Sider><Layout><Header style={{ display: 'flex', justifyContent: 'space-between' }}>{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {className: 'trigger',style: { color: 'white' },onClick: () => setCollapsed(!collapsed),})}<UserOutlined style={{ color: 'white' }} /></Header><Content>Content: {selectedKeys.join('-')}</Content></Layout></Layout></div>);
}

三、Grid栅格

24等分Grid栅格，Row表示一行，Col表示一列

import { Col, Divider, Row } from 'antd';
export default function GridPage() {return (<div className="grid-page">{/* gutter={[number, number]} [水平间隔, 垂直间隔] */}{/* 注意水平间隔是左右均分模式，number === 16 代表 padding: 0 8px */}{/* 垂直间隔在该行下面 16px; 最后一行除外 */}{/* align类似于 flex中的align-items属性; top | middle | bottom */}{/* justify类似于 flex中的justify-content属性; 多了一个space-evenly，在space-between基础上即均分剩余空间 */}{/* 注意考虑多行情况，每个item高度不定，align如何设置 */}{/* 注意考虑多列情况，有一行排不满，justify如何设置 */}<Row gutter={[16, 16]} align="top" justify="space-evenly"><Col span={12}>Col1</Col><Col span={6}>Col2</Col><Col span={6}>Col3</Col><Col span={6}>Col3</Col><Col span={6}>Col3</Col></Row><Divider orientation="left">Horizontal</Divider>{/* gutter={number} 水平间隔 */}{/* wrap={boolean} 是否换行 */}<Rowgutter={{xl: 16, // xl 1200px 以上，不同的宽度下的独立设置}}wrap={true}>{/* Col span={number} 占比 */}{/* offset={number} 左侧偏移, 占据空间但不显示 */}{/* order={number} 排序，越小越靠前，默认0，其中一个写了order，其他不写容易乱 */}{/* pull={number} 左侧偏移, 偏移类似于transform, 本体占据空间 */}{/* push={number} 右侧偏移,  */}<Col span={12} order={2}>Col1</Col>{/* pull push 同时设置时，只显示push */}<Col span={6} order={1} offset={6} pull={6} push={1}>Col2</Col><Col span={6} order={3}>Col3</Col>{/* xl 1200px 以上，不同的宽度下的独立设置 */}<Col span={6} order={4} xl={{ span: 12, offset: 6 }}>Col4</Col></Row></div>);
}

四、分割线Divider、Space间距

Divider
plain表示字体普通大小
type：horizontal（default） | vertical，快速设置小竖线

import { Divider } from "antd";
const Page = () => {return (<div className="page"><div><p>text text text text text text text text text text text text text texttext text text text text text text text text text text text text text</p><Divider plain>children: Text</Divider><p>text text text text text text text text text text text text text texttext text text text text text text text text text text text text text</p><div><a href="#">Link</a><Divider plain type="vertical">Text</Divider><a href="#">Link</a><Divider plain type="vertical">Text</Divider><a href="#">Link</a></div><Divider plain orientation="left">children: Text</Divider><p>text text text text text text text text text text text text text texttext text text text text text text text text text text text text text</p></div></div>);
};
export default Page;

在这里插入图片描述

Space

import { Button, Divider, Space } from "antd";
const Page = () => {return (<div className="Page"><Spacealign="center" // 居中；该属性类似于flexbox中的justify-content属性size={[20, 0]} // 单个 childrenItem 的间距；左右和上下；注意一行最左边的item的左边距是0wrap // 换行split={<Divider type="vertical" />} // 分割线 注意childrenItem和split之间的距离也是size属性控制的>{/* children, 每个元素都是childrenItem */}<span>Space</span><Button type="primary">Button</Button>{/* 内容高度不一致时 */}<div style={{ height: 100, backgroundColor: "pink" }}>content here</div></Space></div>);
};
export default Page;

在这里插入图片描述

五、Card卡片

很多情况是直接把他当成带标题的容器去使用（基础版用法），其实不是特别符合Card的含义，如果只是想带标题的的content其实可以自己设计样式，相当于省了一个编写样式组件的过程；

import {EditOutlined,EllipsisOutlined,SettingOutlined,
} from "@ant-design/icons";
import { Avatar, Card } from "antd";
import { useState } from "react";
const Page = () => {const [activeTabKey, setActiveTabKey] = useState("tab1");const tabList = [{key: "tab1",tab: "tab1",},{key: "tab2",tab: "tab2",},];return (<div className="Page">// 基础版，经常作为容器使用 <Card title="卡片标题">卡片内容</Card><Cardstyle={{width: 300,}}// 最上面标题栏title="Card title"// 标题右侧的描述description="This is the description"extra={<a href="#">title More</a>}// 标题下方的操作按钮tabList={tabList}onTabChange={(key) => setActiveTabKey(key)}// tabList 右侧的描述tabBarExtraContent={<a href="#">cover More</a>}// 主体内容图片cover={<imgalt="example"src={activeTabKey === "tab1"? "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png": "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"}/>}// 最下面的按钮组actions={[<SettingOutlined key="setting" />,<EditOutlined key="edit" />,<EllipsisOutlined key="ellipsis" />,]}>{/* 主体内容 */}<Card.Metaavatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}title="Card Meta title"description="This is the description"/></Card></div>);
};
export default Page;

在这里插入图片描述

六、Descriptions描述列表

快速展示一些必要的详情字段信息

import { Badge, Descriptions } from "antd";
const Page = () => {return (<div className="Page"><Descriptions// title 位置略有一些突兀title="Descriptions title" // 标题extra={<a href="#">More</a>} // 右上角的额外操作bordered // 带边框size="small" // 尺寸column={3} // 默认是一行三格><Descriptions.Item label="Descriptions.label">Descriptions.Item 1</Descriptions.Item>{/* label字符串长度影响这一列的宽度，这列的宽度是由最长的字符串决定的 */}<Descriptions.Item label="Descriptions.label Descriptions.label">Descriptions.Item 2</Descriptions.Item><Descriptions.Item label="Descriptions.label">Descriptions.Item 3</Descriptions.Item><Descriptions.Item label="time">2018-04-24 18:00:00</Descriptions.Item>{/* span 属性控制该项占几列， 2 表示占两格 */}<Descriptions.Item label="Time span=2" span={2}>2019-04-24 18:00:00</Descriptions.Item><Descriptions.Item label="Status" span={3}><Badge status="processing" text="processing" /></Descriptions.Item></Descriptions></div>);
};
export default Page;

在这里插入图片描述

七、锚点和返回顶部

源代码案例

import { Anchor, BackTop } from "antd";
import { useState } from "react";const { Link } = Anchor;const Page = () => {const [targetOffset, setTargetOffset] = useState(300);const onChange = (link) => {// 点击锚点时触发的事件，确定当前选中的锚点; 或者滑动滚动条，会自动触发切换选中console.log("link", link);};return (<div className="Page" style={{ position: "relative" }}>{/* 可以设置定位覆盖位置，保留选中效果 */}<Anchoraffix={false}showInkInFixed={true}// offsetTop={100}style={{ position: "fixed", top: 50, right: 70, zIndex: 1 }}// 锚点滚动默认是target元素滚动到页面顶部，设置targetOffset会让顶部到target存在距离targetOffset={targetOffset}onChange={onChange}><Link href="#Anchor-id-1" title="title 1" /><Link href="#Anchor-id-2" title="title 2" /><Link href="#Anchor-id-3" title="title group">{/* 树形结构 */}<Link href="#Anchor-id-4" title="title group 1" /><Link href="#Anchor-id-5" title="title group 2" /></Link></Anchor><Anchoraffix={false}style={{ position: "absolute", top: 50, left: 70, zIndex: 1 }}// 指定容器，默认是window，指定自定义的容器进行锚点滚动getContainer={(container) => document.querySelector("#Anchor-id-1")}><Link href="#Anchor-id-1-1" title="title Anchor-id-1-1" /><Link href="#Anchor-id-1-2" title="title Anchor-id-1-2" /></Anchor>{/* visibilityHeight滚动距离超过才显示 */}<BackTop visibilityHeight={700} /><divstyle={{ height: 500, border: "1px solid red", overflow: "scroll" }}id="Anchor-id-1"><divid="Anchor-id-1-1"style={{height: 800,border: "1px solid blue",position: "relative",}}><span>Anchor-id-1</span>{/* 设置单个容器的返回顶部按钮；注意设置定位的位置，不然都是默认fixed右下角会重叠 */}<BackTop//   指定容器，默认是window，指定自定义的容器返回其顶部target={() => document.querySelector("#Anchor-id-1")}visibilityHeight={20} // 注意默认是400，如果自定义的容器高度比较小，重新设置style={{ right: 50, bottom: 50, position: "absolute" }}/></div><divstyle={{ height: 500, border: "1px solid red" }}id="Anchor-id-1-2">Anchor-id-1-2</div></div><div style={{ height: 500, border: "1px solid red" }} id="Anchor-id-2">Anchor-id-2</div><div style={{ height: 500, border: "1px solid red" }} id="Anchor-id-3">title group</div><div style={{ height: 500, border: "1px solid red" }} id="Anchor-id-4">title group 1</div><div style={{ height: 500, border: "1px solid red" }} id="Anchor-id-5">title group 2</div></div>);
};export default Page;

在这里插入图片描述