使用按钮名称和图标反应引导按钮自定义

Posted 2023-03-21

【中文标题】使用按钮名称和图标反应引导按钮自定义

【英文标题】：React bootstrap Button customization with a button name and a icon

【发布时间】：2021-12-01 00:50:36

【问题描述】：

如何根据按钮名称动态调整按钮高度？

看，名字被裁剪了。 到目前为止，我已经完成了以下工作：

index.css

.btn-product 
    background-color: white;
    color: black;
    border-radius: 25px;
    border: 2px solid black;
    text-align: left;
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-overflow:ellipsis;
    margin-top: 4px;
    width: 200px;
    height: 50px;

index.js

return (
    <div>
        <Button  target="_blank" className='btn-product' block  variant="secondary" href='/sign-up'>
            <span style=position: 'absolute', width:'80%' >Button 1 with a long name</span>
            <BiChevronRight size=30 style=color: 'orange',  float: 'right' />
        </Button>
        <Button  target="_blank" className='btn-product' block  variant="secondary" href='/login'>
            <span style=position: 'absolute', width:'80%' >Button 2 with a long name</span>
            <BiChevronRight size=30 style=color: 'orange',  float: 'right' />
        </Button>
    </div>
)

要求如下：

按钮名称应左对齐 '>' 图标应右对齐 单击按钮后，新的浏览器选项卡会打开并带有链接。 按钮应该像图片一样圆润。 如果名称太长，则不应裁剪，而应调整按钮高度。

只有数字 5 没有完成。你能帮我吗？ 如何动态调整按钮高度？

【问题讨论】：

你能分享一个简单的代码示例吗？

【参考方案1】：

将 display 属性更改为 inline-flex 并将高度更改为 min-height 从跨度中删除绝对值并从雪佛龙上浮动 为按钮添加 flex-flow: row nowrap、align-items: center 以及 justify-content: space-between。

.button  
    display: inline-flex; 
    flex-flow: row nowrap; 
    min-height: 50px; // allows it to grow if the name is longer.
    align-items: center; 
    justify-content: space-between; 

【讨论】：

它运行良好。我刚刚在 css 中添加了一些其他属性来更改按钮视图： background-color: white;颜色：黑色;边框半径：50px；边框：2px纯黑色；边距顶部：4px；文本对齐：左；