antd 相关问题

我使用 Ant Design 库来渲染 Table 和 Tooltip 组件。如果您在表列设置中指定：省略号：{ 显示标题：假， }, 渲染：（值）=>（我使用 Ant Design 库来渲染 Table 和 Tooltip 组件。如果您在表列设置中指定： ellipsis: { showTitle: false, }, render: (value) => ( <Tooltip placement="top" title={value}> <span>{value}</span> </Tooltip> ), 然后，当您将鼠标悬停在表格单元格上时，将显示工具提示。如何让工具提示仅在有省略号时显示？如果没有省略号，则不会显示工具提示。我尝试使用 useState，但它只适用于一个 html 元素，而我有很多这样的元素。仅当 antd 中发现省略号时，请使用 Typography.Text 添加工具提示。 antdcodesandbox 非常不言自明。针对类似需求，我对 antd 默认工具提示添加了样式更改，并使用 Typography.Text 进行条件显示。但是如果您需要 antd Tooltip 组件本身，这个答案恐怕对您没有帮助。

reactjs tooltip antd ellipsis

回答 1 投票 0

从外部按钮 Ant Design Upload Dragger 触发打开对话框

我有这个自定义上传组件。我想从另一个外部按钮触发 openDialog ant Design 上传，但每次我单击该按钮时，控制台都会显示一条错误消息，其中包含 **Un...

reactjs typescript antd

回答 1 投票 0

验证错误 - 仅适用于已填写的字段

如果引用的字段包含值，则应显示验证错误；如果字段不包含任何值，则不应显示错误消息。如果用户输入

reactjs antd

回答 1 投票 0

样式 Modal.method() Ant Design 与样式化组件

我正在尝试某种方法来设计 Ant Design 模式的以下方法的样式：模态信息模态警告模态.成功模态错误默认组件的样式通常具有以下属性：

reactjs antd styled-components

回答 1 投票 0

Pagination Ant Design 如何自定义“上一页”和“下一页”标签？

我正在从事 React + Ant Design 项目。该应用程序应翻译成多种语言。我使用react-i18next来执行此操作。但是，我不知道如何将我的翻译应用到l...

antd

回答 2 投票 0

Ant Design 按钮组件禁用时如何更改其文本颜色？

我一直在尝试使用样式组件 - const StyledButton = styled(按钮)` .and-btn-primary[已禁用] { 背景颜色：红色；红色; } `; 但它不起作用

reactjs antd

回答 3 投票 0

react.js 带箭头的 antd 轮播

我正在考虑使用 antd Caroseul，但我还没有看到创建上一个/下一个或暂停按钮的示例。 const { 轮播 } = antd; ReactDOM.render( 我正在考虑使用 antd Caroseul，但我还没有看到创建上一个/下一个或暂停按钮的示例。 const { Carousel } = antd; ReactDOM.render( <Carousel autoplay> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> </Carousel> , document.getElementById('app')); import React, { Component } from "react"; import { Carousel, Icon } from "antd"; export default class CarouselComponent extends Component { constructor(props) { super(props); this.next = this.next.bind(this); this.previous = this.previous.bind(this); this.carousel = React.createRef(); } next() { this.carousel.next(); } previous() { this.carousel.prev(); } render() { const props = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( <div> <Icon type="left-circle" onClick={this.previous} /> <Carousel ref={node => (this.carousel = node)} {...props}> <div> <h3>1</h3> </div> <div> <h3>2</h3> </div> <div> <h3>3</h3> </div> <div> <h3>4</h3> </div> </Carousel> <Icon type="right-circle" onClick={this.next} /> </div> ); } } 首先：arrow是一个有效的Carousel属性，可以使用箭头手动控制内容。 antd 默认禁用。您可以像这样启用它： <Carousel arrows> // </Carousel> 但是您不会看到它们，因为 .ant-carousel .slick-prev 和 .ant-carousel .slick-prev 的样式是透明的。此时您已经可以覆盖样式（例如display: block; background: red）。另一个选项是使用 React Slick 属性从 prop 内部控制样式，因为 antd 在 Carousel 组件的底层使用它。这是一个完整的组件示例： import React from 'react' import { Row, Col, Carousel } from 'antd' const contentStyle = { height: '160px', color: '#fff', lineHeight: '160px', textAlign: 'center', background: '#364d79' } // from https://react-slick.neostack.com/docs/example/custom-arrows const SampleNextArrow = props => { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, display: 'block', background: 'red' }} onClick={onClick} /> ) } const SamplePrevArrow = props => { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, display: 'block', background: 'green' }} onClick={onClick} /> ) } const settings = { nextArrow: <SampleNextArrow />, prevArrow: <SamplePrevArrow /> } const CarouselArrows = () => { return ( <> <Row justify="center"> <Col span={16}> <Carousel arrows {...settings}> <div> <h3 style={contentStyle}>1</h3> </div> <div> <h3 style={contentStyle}>2</h3> </div> <div> <h3 style={contentStyle}>3</h3> </div> <div> <h3 style={contentStyle}>4</h3> </div> </Carousel> </Col> </Row> </> ) } export default CarouselArrows 有一个带有 ::before 属性的 content 选择器有点搞砸了样式（你不能从内联样式覆盖它）。不过，您可以利用它并将箭头功能更改为： const SampleNextArrow = props => { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, display: 'block', background: 'red' }} onClick={onClick} /> ) } const SamplePrevArrow = props => { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, display: 'block', background: 'green' }} onClick={onClick} /> ) } 您可以覆盖默认的 antd 样式以删除 ::before 选择器并包含图标。在 LESS 文件中： .ant-carousel { .slick-next { &::before { content: ''; } } .slick-prev { &::before { content: ''; } } } 在您的组件中（意味着您正在使用上面示例中提供的组件）： import { LeftOutlined, RightOutlined } from '@ant-design/icons' // ... const SampleNextArrow = props => { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, color: 'black', fontSize: '15px', lineHeight: '1.5715' }} onClick={onClick} > <RightOutlined /> </div> ) } const SamplePrevArrow = props => { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, color: 'black', fontSize: '15px', lineHeight: '1.5715' }} onClick={onClick} > <LeftOutlined /> </div> ) } 最后，期望的输出：只需遵循此代码：使用 useRef 钩子并将 Ref 分配给 Carousel，然后通过引用调用 next 和 prev 方法。 import React, { useRef, Fragment } from "react"; import { Carousel } from "antd"; const MyCarousel = () => { const slider = useRef(null); return ( <Fragment > <Button onClick={() => slider.current.next()}>next</Button> <Carousel ref={slider}> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </Carousel> <Button onClick={() => slider.current.next()}>next</Button> </Fragment > )} 如果想添加箭头，可以使用Antd提供的箭头图标 <Carousel arrows nextArrow={<ArrowRightOutlined />} prevArrow={<ArrowLeftOutlined/>}> 由于 Antd css 隐藏了箭头，您可以使用以下代码在自己的 css 中覆盖它： .ant-carousel .slick-prev, .ant-carousel .slick-next { color: unset; font-size: unset; } .ant-carousel .slick-prev:hover, .ant-carousel .slick-next:hover, .ant-carousel .slick-prev:focus, .ant-carousel .slick-next:focus { color: unset; } 在阅读时https://ant.design/components/carousel/我滚动到底部，它说它正在使用https://github.com/akiran/react-slick 如果向下滚动到 prop 表，您可以使用 nextArrow 或 prevArrow，它将 React 元素作为值。我正在使用React Hooks。我刚刚找到结果了。这是示例： function SampleNextArrow(props) { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, display: "block", background: "red" }} onClick={onClick} /> ) } function SamplePrevArrow(props) { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, display: "block", background: "green" }} onClick={onClick} /> ) } const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 8, nextArrow: <SampleNextArrow />, prevArrow: <SamplePrevArrow />, } <Carousel {...settings} arrows={true} draggable={true}> {koompiApps.map((res, index) => { return ( <Col xs={24} sm={24} md={24} lg={24} xl={24}> <div onClick={(e) => { setAppsKey(`${index + 1}`) }} > <center> <motion.div whileHover={{ scale: 1.1, transition: { duration: 0.3 }, }} whileTap={{ scale: 0.9 }} > <img src={`${res.logo}`} className="koompiApps " alt={res.name} /> <h4 className="appsName">{res.name}</h4> </motion.div> </center> </div> </Col> ) })} </Carousel> 结果：将属性 arrows 设置为 true，则应出现下一个和上一个箭头。但是你看不到它，因为 antd css 将其设置为透明，你可以通过将鼠标悬停在上面来感觉到它们。要使它们可见，您可以安装 slick-carousel npm，并导入 css： @import "~slick-carousel/slick/slick"; @import "~slick-carousel/slick/slick-theme"; 然后设置箭头 css，如下所示： .ant-carousel .slick-arrow::before { font-size: 24px; font-family: 'slick'; color: #000; } 当我们将 arrows 传递给 Carousel 时，它确实可以工作，但主要问题在于 CSS，因为 font-size 和 slick-prev 的默认 slick-next 是 0px。 slick-prev::before和slick-next::before也存在同样的问题我可以推荐这个选项，它只会更改默认样式。谢谢 <Carousel autoplay arrows> <div>Test1</div> <div>Test2</div> </Carousel> .slick-arrow.slick-prev { font-size: 10px; } .ant-carousel .slick-prev::before { content: '<'; display: block; position: relative; bottom: 20px; right: 3px; /* width: 100px; */ font-size: 25px; color: gray; background-color: white; border: 2px solid gray; display: flex; justify-content: center; align-items: center; padding: 5px; border-radius: 50%; width: 33px; height: 33px; } .slick-arrow.slick-next { font-size: 10px; } .ant-carousel .slick-next::before { content: '>'; display: block; position: relative; right: 3px; bottom: 20px; /* width: 100px; */ font-size: 25px; color: gray; background-color: white; border: 2px solid gray; display: flex; justify-content: center; align-items: center; padding: 5px; border-radius: 50%; width: 33px; height: 33px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 您可以将其替换为任何蚂蚁设计图标 //import import { createFromIconfontCN, LeftOutlined, RightOutlined } from '@ant-design/icons'; //definition const SlickArrowLeft = ({ currentSlide, slideCount, ...props }) => ( <button {...props} className={ "slick-prev slick-arrow" + (currentSlide === 0 ? " slick-disabled" : "") } aria-hidden="true" aria-disabled={currentSlide === 0 ? true : false} type="button" > <LeftOutlined /> </button> ); const SlickArrowRight = ({ currentSlide, slideCount, ...props }) => ( <button {...props} className={ "slick-next slick-arrow" + (currentSlide === slideCount - 1 ? " slick-disabled" : "") } aria-hidden="true" aria-disabled={currentSlide === slideCount - 1 ? true : false} type="button" > <RightOutlined /> </button> ); //use <Carousel {...settings} prevArrow={<SlickArrowLeft />} nextArrow={<SlickArrowRight />} > 改为这样做 import { Image } from 'antd'; import React from 'react'; const App: React.FC = () => ( <Image.PreviewGroup> <Image width={200} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" /> <Image width={200} src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" /> </Image.PreviewGroup> ); export default App;

reactjs carousel antd

回答 10 投票 0

ANTD 专业表。如何更改可扩展“+”列的宽度？

ANTD 专业表。如何更改可扩展“+”列的宽度？我在表中添加了可扩展行。但“+”列宽度很大并且没有变化。我尝试使用 css

javascript reactjs antd ant-design-pro

回答 1 投票 0

antd 相关问题

最新问题