在设计此按钮时需要帮助

Question

我正在使用 React 创建一个 iOS 应用程序。

我有两个按钮：

<View style={{flexDirection: 'row', alignItems: 'center'}}> 
    <Button title="Overview" onPress={() => {this.setState({detailsMode: false})}} style={{backgroundColor: '#666'}}/>
    <Button title="Detailed" onPress={() => {this.setState({detailsMode: true})}} style={{}}/>
</View>

它们看起来像这样：

我希望它们看起来像这样：

我试过了，但失败得很惨：

<View style={{flex: 1, borderRadius: 10, borderWidth: 0, borderColor: '#A087D1', backgrounColor: 'white', flexDirection: 'row', alignItems: 'center'}}> 
    <Button style={{  borderTopLeftRadius: 10, borderTopRightRadius: 10}} title="Overview" onPress={() => {this.setState({detailsMode: false})}} style={{backgroundColor: '#666'}}/>
    <Button style={{  borderTopLeftRadius: 10, borderTopRightRadius: 10}} title="Detailed" onPress={() => {this.setState({detailsMode: true})}} style={{}}/>
</View>

你能帮帮我吗？

Answer 1

HTML

<div class="btn-container">
  <button title="Overview">Overview</button><button title="Detailed">Detailed</button>
</div>

CSS

.btn-container {
  display: inline-block;
  float: left;
} 

button[title="Overview"], button[title="Detailed"] {
  margin: 0;
  padding: 10px;

  border-color: BlueViolet;
  border-width: 1px;
  color: BlueViolet;

  background-color: rgba(0, 0, 0, 0);

  width: 100px
}

button[title="Overview"] {
  border-radius: 20px 0px 0px 20px;
  border-right: 0px;

  background-color: BlueViolet;
  color: white;
}

button[title="Detailed"] {
  border-radius: 0px 20px 20px 0px;
  border-left: 0px;
}

JS Bin

Answer 2

您可以只提供边框、背景和边框半径。还使用.active 类创建纯色背景和字体颜色更改，以便您可以切换/更改哪个是活动的。

div {
  display: inline-flex;
  width: 250px;
}

button {
  border: 0;
  background: transparent;
  padding: 1em;
  border: 1px solid purple;
  flex: 1 0 0;
}

.active {
  background: purple;
  color: white;
}

.o {
  border-radius: 1.5em 0 0 1.5em;
}

.d {
  border-radius: 0 1.5em 1.5em 0;
}

<div>
  <button class="o active">Overview</button>
  <button class="d">Detail</button>
</div>

Answer 3

也许是这样的？

#myBtn {
  border-radius: 90px 0px 0px 90px;
  background: purple;
  padding: 20px;
  width: 200px;
  height: 60px;
  border-color: purple;
  border-width: 1px 0px 1px 1px;
  outline: 0;
  -moz-outline: 0;
}

#myBtn2 {
  border-radius: 0px 90px 90px 0px;
  background: white;
  padding: 20px;
  width: 200px;
  height: 60px;
  border-color: purple;
  border-width: 1px 1px 1px 0px;
  outline: 0;
  -moz-outline: 0;
}

#fnt2 {
  color: purple;
  font-size: 20px;
}

#fnt1 {
  color: white;
  font-size: 20px;
}
body{
display:inline-flex;
}

<button id="myBtn"><span id="fnt1">Overview</span></button>
<button id="myBtn2"><span id="fnt2">Detail</span></button>

使用：border-radius

如果您想在点击时切换颜色，请使用以下代码：

function myFunction1() {
  document.getElementById("btn1").className = "myBtn1";
  document.getElementById("fnt1").className = "fnt1";
  document.getElementById("btn2").className = "myBtn2";
  document.getElementById("fnt2").className = "fnt2";
}

function myFunction2() {
  document.getElementById("btn1").className = "myBtn2";
  document.getElementById("fnt1").className = "fnt2";
  document.getElementById("btn2").className = "myBtn1";
  document.getElementById("fnt2").className = "fnt1";
}

.myBtn1 {
  background: purple;
  padding: 20px;
  width: 200px;
  height: 60px;
  border-color: purple;
}

#btn1 {
  border-radius: 90px 0px 0px 90px;
  outline: 0;
  -moz-outline: 0;
  border-width: 1px 0px 1px 1px;
}

#btn2 {
  border-radius: 0px 90px 90px 0px;
  outline: 0;
  -moz-outline: 0;
  border-width: 1px 1px 1px 0px;
}

.myBtn2 {
  background: white;
  padding: 20px;
  width: 200px;
  height: 60px;
  border-color: purple;
}

.fnt2 {
  color: purple;
  font-size: 20px;
}

.fnt1 {
  color: white;
  font-size: 20px;
}
body{
display:inline-flex;
}

<button id="btn1" class="myBtn1" onclick="myFunction1()"><span id="fnt1" class="fnt1">Overview</span></button>
<button id="btn2" class="myBtn2" onclick="myFunction2()"><span id="fnt2" class="fnt2">Detail</span></button>

Answer 4

这样的？ 顺便说一句，我不太喜欢在活动状态下移除轮廓，但它看起来更好。

* {
  box-sizing: border-box;
}

html, body {
  
  margin: 0;
  width: 100vw;
  height: 100vh;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  font-size: 30px;
  padding: 15px;
  font-family: Open Sans;
  width: 200px;
  border: 3px solid purple;
  cursor: pointer;
  transition: all 0.3s;
  transition-property: border, background;
}

.btn-left {
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  background-color: purple;
  color: white;
}

button:active, button:focus {
  outline: none;
}

.btn-left:hover {
  background-color:	#8B008B;
  border-color:	#8B008B;
}

.btn-right {
  border-bottom-right-radius: 40px;
  border-top-right-radius: 40px;
}

.btn-right:hover {
  background-color: #eee;
  border-color:	#8B008B;
}

.btns {
  display: flex;
}
  

<body>
  <div class="container">
    <div class="btns">
      <button class="btn-left">Overview</button>
      <button class="btn-right">Detail</button>
    </div>
  </div>
</body>

Answer 5

如果你用 css radius 等不成功，你可以尝试在背景中使用图片，只是一个想法。