需要帮助设计此按钮

时间:2017-07-14 18:05:46

标签: javascript html css reactjs react-native

我正在使用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>

它们看起来像这样:

enter image description here

我希望他们看起来像这样:

enter image description here

我试过这个并且悲惨地失败了:

<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>

你能帮我吗?

5 个答案:

答案 0 :(得分:2)

<强> 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

答案 1 :(得分:1)

也许是这样的?

&#13;
&#13;
#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;
}
&#13;
<button id="myBtn"><span id="fnt1">Overview</span></button>
<button id="myBtn2"><span id="fnt2">Detail</span></button>
&#13;
&#13;
&#13;

使用:border-radius

如果要在点击时切换颜色,请使用以下代码:

&#13;
&#13;
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";
}
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

您可以只提供边框,背景和边框半径。还使用.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>

答案 3 :(得分:0)

这样的东西? 顺便说一下,我真的不喜欢在活动状态下删除大纲,但它看起来更好。

* {
  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>

答案 4 :(得分:0)

如果你没有使用css radius等成功,你可以尝试在背景中使用图像,这只是一个想法。