JavaFX - 단추 위에 텍스트를 이동하거나 크기를 조정하지 않고 테두리 왼쪽에

Question

Button을 만들고 싶습니다. 처음에는 테두리가없고 배경색 만 있습니다. 그래서 나는 다음과 같은 CSS 속성을 설정하십시오 Button을 누르면

.button, .toggle-button { 
    -fx-background-color: #373e48; 
    -fx-background-radius: 0; 
} 

가/선택, 왼쪽에 테두리가 나타납니다, 그래서이 추가 :

.button:pressed, .toggle-button:selected { 
    -fx-border-color: #ee543a; 
    -fx-border-width: 0 0 0 2px; 
} 

그게 문제가 있다는 것입니다을 국경이 표시 될 때마다 Button이 조금 더 넓어집니다.

또한 정렬을 center-right으로 설정하고 최소 너비를 추가하려고했지만 Button이 커지면 더 이상 작동하지 않습니다. 그리고 실제로는 그렇게 보이지 않습니다.

그렇다면 어떻게해야합니까? 텍스트를 중심에 정렬하는 것이 바람직합니다.

Answer 1

당신은 -fx-background-insets 속성을 사용하여 CSS에서 간단하게이 작업을 수행 할 수 있습니다

.button, .toggle-button { 
    -fx-background-color: #373e48; 
    -fx-background-radius: 0; 
    -fx-text-fill: white; 
} 

.button:pressed, .toggle-button:selected { 
    -fx-background-color: #ee543a, #373e48; 
    -fx-background-insets: 0, 0 0 0 2; 
} 

테 두 번째 선택은 두 가지 색상의 두 레이어를 생성합니다. 원래 배경색은 왼쪽에 2 픽셀 삽입되어 있으므로 기본 레이어 ("테두리"색상)는 왼쪽에 2 픽셀 테두리로 표시됩니다.

이 선택기를 자세히 살펴보면 -fx-background-insets: 0, 0 0 0 2; 첫 번째 (기본) 배경색에는 인서트가 없습니다. 네 개의 숫자가 top, right, bottom, left을 의미하므로 상단의 색상은 왼쪽에 2 픽셀 삽입되어 있습니다.

참고 : 텍스트 정렬은 Button에 대한 기본 텍스트 정렬로, 불필요하거나 ToggleButton 센터이지만, 어떤 경우에 당신은 CSS에서 또한 텍스트를 정렬 할 수 있습니다

.button, .toggle-button { 
    -fx-text-alignment: center; //* or left, right, justify *// 
}