- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想提供一种使 antd
抽屉可调整大小的方法?
我读了一篇热门answer专门针对 material-ui/Drawer
但我希望用 antd
做一些非常相似的事情。
有没有人有类似的 antd
示例 - 或者有更好的想法如何处理在抽屉边被砍掉的信息。
最佳答案
您可以通过在 width
属性上指定它来扩展 Drawer
的宽度。如果你不想扩展它但你希望内容仍然适合,你可以在 bodyStyle
属性上设置宽度并使用 overflow: "auto"
:
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
visible={isDrawerVisible}
bodyStyle={{
width: 400,
overflow: "auto"
}}
onClose={toggleDrawerVisible}
>
我还根据 link 制作了一个可调整大小的抽屉您在 antd 版本中提供的( react Hook 版本答案)。
ResizableDrawer.jsx
import React, { useState, useEffect } from "react";
import { Drawer } from "antd";
let isResizing = null;
const ResizableDrawer = ({ children, ...props }) => {
const [drawerWidth, setDrawerWidth] = useState(undefined);
const cbHandleMouseMove = React.useCallback(handleMousemove, []);
const cbHandleMouseUp = React.useCallback(handleMouseup, []);
useEffect(() => {
setDrawerWidth(props.width);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.visible]);
function handleMouseup(e) {
if (!isResizing) {
return;
}
isResizing = false;
document.removeEventListener("mousemove", cbHandleMouseMove);
document.removeEventListener("mouseup", cbHandleMouseUp);
}
function handleMousedown(e) {
e.stopPropagation();
e.preventDefault();
// we will only add listeners when needed, and remove them afterward
document.addEventListener("mousemove", cbHandleMouseMove);
document.addEventListener("mouseup", cbHandleMouseUp);
isResizing = true;
}
function handleMousemove(e) {
let offsetRight =
document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
let minWidth = 256;
let maxWidth = 600;
if (offsetRight > minWidth && offsetRight < maxWidth) {
setDrawerWidth(offsetRight);
}
}
return (
<Drawer {...props} width={drawerWidth}>
<div className="sidebar-dragger" onMouseDown={handleMousedown} />
{children}
</Drawer>
);
};
export default ResizableDrawer;
并使用它:
import ResizableDrawer from "./ResizableDrawer";
<ResizableDrawer
title="Resizable Drawer"
placement="right"
closable={false}
visible={isResizableDrawerVisible}
onClose={toggleResizableDrawerVisible}
>
...
</ResizableDrawer>
在此处查看工作演示:
关于reactjs - 可调整大小的 `antd` 抽屉?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64528646/
阅读有关 Ant Design 的信息,我对使用哪个库进行移动 Web 开发感到困惑。有两个库,antd和 antd-mobile .虽然很明显 antd-mobile 在 iOS 和 Android
我已经将 antd 更新到 5.0.0。我现在有这些导入错误。 @import '~antd/es/style/themes/default.less'; @import '~antd/dist/an
我已经将 antd 更新到 5.0.0。我现在有这些导入错误。 @import '~antd/es/style/themes/default.less'; @import '~antd/dist/an
我们如何隐藏表格中的列以在前端显示,该列已存在于使用 Ant 设计表的数组中? 例如,我的数组对象中有一个名为 ID 的列,但不需要在表 View 中显示,它应该保存在 JSON 列表本身中以供引用。
版本3.0.3 环境个人电脑, Chrome 转载链接 https://codesandbox.io/s/my02ok19wy 重现步骤现在,Table 可以通过两种方式扩展行: 在第一列使用图标 单
版本3.0.3 环境个人电脑, Chrome 转载链接 https://codesandbox.io/s/my02ok19wy 重现步骤现在,Table 可以通过两种方式扩展行: 在第一列使用图标 单
如何从 ant d 模态中隐藏顶部的 X 按钮,以及如何禁用使用 ESC 键关闭模态的行为 return ( {modalBodyText} ); 最佳答案 基于documentation版本
这个 GatsbyJS/antd 插件页面 ( https://github.com/bskimball/gatsby-plugin-antd/issues/2 ) 使得在使用 GatsbyJS 时似
有人可以举例说明如何使用 get Font Awesome 与 AntD 框架一起工作吗?他们提到您可以将 SVG 与外部图标一起使用。 谢谢, 塔类 最佳答案 不直接,但您可以自己制作 IconFo
我在 React 应用程序中使用 AntD。我想在表格单元格中添加一个图标,但我遇到了问题。我的特定列的代码如下: : } /> 我得到的第一个错误是 意外使用“状态”其中在我的数据源中,状态是
在 Bootstrap 4 中,您可以使用以下实用程序: Bootstrap includes a wide range of shorthand responsive margin and padd
我正在为 Next.js 项目使用 antd npm 包。我正在努力更改 Form.Item 组件的标签文本颜色。 我在下面尝试,但它没有改变标签颜色。 最佳答案 使用 CS
我想在遇到某些断点时隐藏一些 div,在 bootstrap v4 中有类似的东西:hidden-sm-down 阅读网格文档后,设置 可能是解决方案 这是我的例子:http://codepen.io
如果我输入无效的邮件 ID,我需要使用 antd 工具提示显示“无效的电子邮件!!”。如何在ReactJS antd Form中使用它?我现在使用的代码是:
我正在使用 antd-mask-input我的 Ant Design 应用程序上的库将掩码放入我的 antd form 的字段中.这个 antd-mask-input 库是使用这个 inputmask
没有那个文件或目录,当使用 Vite 和 Antd Pro Layout 时 这是文件vite.config.ts: import { defineConfig } from 'vite'; impo
我正在通过 ant-design (antd) 库开发一个 reactjs 元素。我想在我的元素中使用 Carousel 组件。当我将内容的背景色 - 应显示在轮播内 - 设置为#FFF 时,元素符号
我有问题 ./src/index.js 找不到模块:无法解析 '~ antd/dist/antd.css',我无法修复它。我试着把@import '~ antd/dist/antd.css'; .在
当我尝试在 ant design 中使用 react 进行这样的导入时 import {UserOutlined, LockOutlined} from '@ant-design/icons' 我收
我有一个 antd 面板作为折叠/ Accordion 元素的一部分,我正在尝试设置样式并呈现文本的附加部分作为标题的一部分。我通读了他们的文档,他们允许您使用 extra 属性添加额外的元素,但我似
我是一名优秀的程序员,十分优秀!