当前位置: 首页> 游戏> 游戏 > 建筑木工招聘平台_商标设计免费版_最近国家新闻_免费的建站平台

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

时间:2025/7/11 8:40:00来源:https://blog.csdn.net/hole_diss/article/details/143981302 浏览次数:0次
建筑木工招聘平台_商标设计免费版_最近国家新闻_免费的建站平台

文章目录

  • 一、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;

在这里插入图片描述

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: