javascript - Fieldset 类似于带有标题/子标题的 div 容器
问题描述
我正在尝试在 React 中构建一个字段集,这将允许我在外部边框内添加任何元素(例如按钮等)。我正在寻找一种方法使边框内的元素透明(其中显示“访问我们”),因此页面的真实背景非常清晰可见。
通过像下面这样的实现,背景被明确地设置为黑色。我想避免它,并且没有背景。但随后,显示了边界线。
有没有聪明的方法来解决这个问题?
谢谢!
function ThankYou(){
return(
<div className="thankYouParent">
<div className="thankYouBox">
<label className="borderText"> For visiting us </label>
<label className="thankYouText">Thank You</label>
</div>
</div>
)
}
ReactDOM.render(
<ThankYou />,
root
)
.thankYouParent {
display: flex;
border: 1px dotted red;
flex-direction: column;
align-items: center;
height: 100vh;
justify-content: space-between;
justify-content: center;
}
.thankYouBox {
display: flex;
position: relative;
text-align: center;
border: 5px solid #ffffff;
text-transform: uppercase;
height: 40vh;
width: 75vw;
justify-content: center;
}
.thankYouText {
font-family: interstateBold;
font-size: 10vw;
color: white;
align-self: center;
}
.borderText {
font-family: interstateRegular;
position: absolute;
color: white;
font-size: 3vh;
background-color: black;
padding-left: 1vw;
padding-right: 1vw;
bottom: -1.5vh;
margin-bottom: -3px;
}
body {
background: black;
}
* {
box-sizing: border-box;
}
<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>
<div id="root"></div>
解决方案
我确实使用了fieldset
. 当然这个标签基本上用于分组表格,但在你的情况下很有用。
function ThankYou() {
return (
<div className="thankYouParent">
<div className="thankYouBox">
<div className="wrapper">
<span className="gap" />
<div className="borderText">
<p>For visiting us</p>
</div>
<span className="gap" />
<div className="borderText">
<p>For visiting us</p>
</div>
<span className="gap" />
<button type="button" id="borderButton">
<p>Click me</p>
</button>
<span className="gap" />
</div>
<h2 className="thankYouText">Thank You</h2>
</div>
</div>
);
}
ReactDOM.render(
<ThankYou />,
root
)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: interstateBold;
color: white;
text-transform: uppercase;
}
body {
background: green;
}
.thankYouParent {
display: flex;
border: 1px dotted red;
flex-direction: column;
align-items: center;
height: 100vh;
justify-content: space-between;
justify-content: center;
}
.thankYouBox {
height: 40vh;
width: 75vw;
display: flex;
justify-content: center;
position: relative;
border: 5px solid white;
border-bottom-color: transparent;
}
.thankYouText {
font-size: 10vw;
align-self: center;
}
.wrapper {
display: grid;
grid-template-columns: auto max-content auto max-content auto max-content auto;
align-items: flex-end;
position: absolute;
left: 0;
right: 0;
bottom: 1px;
}
.wrapper::before,
.wrapper::after {
content: '';
width: 6px;
height: 5px;
position: absolute;
bottom: -6px;
background-color: white;
}
.wrapper::before {
left: -4px;
}
.wrapper::after {
right: -4px;
}
.gap,
.borderText,
#borderButton {
display: flex;
align-items: center;
}
.gap {
width: 100%;
height: 5px;
background-color: white;
position: relative;
bottom: -6px;
}
.borderText,
#borderButton {
height: 50px;
border: 5px solid transparent;
background-color: transparent;
padding-left: 1vw;
padding-right: 1vw;
position: relative;
bottom: -28px;
font-size: 1.5vh;
}
#borderButton {
transition: all 0.3s ease-in-out;
cursor: pointer;
}
#borderButton:hover {
border: 5px solid white;
}
<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>
<div id="root"></div>
推荐阅读
- windows - Windows WebView 自定义方案
- azure - 使用 Azure 管理 API 进行身份验证
- python - Python 错误:“字符串索引超出范围”
- visual-studio-code - 在 Visual Studio Code 中使用 Ironpython
- objective-c - 从 OBJC 向 Swift 发布通知
- android - 如何在登录前添加自定义进度条?
- swift - Swift Combine:在可观察对象中使用计时器发布者
- python - 自定义损失函数张量流
- c# - SendKeys 不发送 '(' 和 ')'
- python - Python 装饰器在导入期间在调用函数之前运行