在React原生中创建两个垂直按钮,可以使用<button>
元素和CSS样式来实现。
首先,我们需要在React组件中创建两个按钮。可以使用类组件或函数组件,下面以函数组件为例:
import React from 'react';
function App() {
return (
<div>
<button className="vertical-button">Button 1</button>
<button className="vertical-button">Button 2</button>
</div>
);
}
export default App;
然后,我们可以通过CSS样式为按钮添加垂直排列的样式。可以使用Flexbox或Grid布局来实现。下面是使用Flexbox布局的示例:
.vertical-button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100px;
height: 200px;
margin: 10px;
}
在上面的示例中,我们将按钮容器的display
属性设置为flex
,并将其flex-direction
属性设置为column
,以实现垂直排列。justify-content: center;
和align-items: center;
用于使按钮居中对齐。width
和height
属性可以根据需要进行调整。
这样,我们就创建了两个垂直按钮,并为其添加了垂直排列的样式。
请注意,以上示例仅提供了一种实现方式,实际上还有其他多种实现方式,可以根据具体需求选择适合的方法。
领取专属 10元无门槛券
手把手带您无忧上云