javascript - 在设计此按钮时需要帮助

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