設計此按鈕時需要幫助

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> 

而且他們看起來像這樣：

我想他們是這樣的：

我試過這個，失敗了y：

<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

也許這樣？

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

你可以只給一個邊框，背景和邊界半徑。還使用.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 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: \t #8B008B; 
 
    border-color: \t #8B008B; 
 
} 
 

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

 
.btn-right:hover { 
 
    background-color: #eee; 
 
    border-color: \t #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半徑等更迭，你可以嘗試在後臺使用的圖像，只有一個想法。