Material-UI의 RaisedButton에서 라벨이 단절되었을 때 세 점 리더 표시
4107 단어 CSSReactmaterial-ui
RaisedButton의 구조
RaisedButton은 아래와 같은 HTML 구조로 되어 있다.
<div>・・・①
<button>・・・②
<div>・・・③
<div>・・・④
<span>「ラベル文字列」</span>・・・⑤
</div>
</div>
</button>
</div>
RaisedButton의 스타일 관련 속성
RaisedButton에는 스타일을 지정하는 프로퍼티가 복수 존재한다.
표에 정리하면 아래와 같이.
속성 이름
설명
HTML 구조의 대응 부분
buttonStyle
button 요소의 인라인 스타일 덮어쓰기
②
labelStyle
버튼의 레이블 요소 인라인 스타일을 덮어씁니다.
⑤
overlayStyle
버튼 오버레이 시 인라인 스타일 덮어쓰기
④
rippleStyle
버튼을 누를 때 파문의 인라인 스타일을 덮어씁니다.
클릭시 ③과 ④사이에 생성되는 span
style
루트 요소의 인라인 스타일 덮어쓰기
①
RaisedButton의 기본 상태에서 그리기
RaisedButton에 대해 아무것도 스타일을 지정하지 않으면 아래 그림과 같이 화면 폭을 줄인 경우 등에 라벨이 끊어지지 않는다.
default.js
<RaisedButton
label="ラベルラベルラベルラベル"
primary={true} />
RaisedButton의 라벨이 튀어 나올 때 3점 리더로 설정
아래 그림과 같이 3점 리더로 바꾸려면 조금 궁리가 필요하다.
포인트는 아래 3가지
- 루트 요소(①)에 width를 지정하고 minWidth를 해제한다(부모 요소에 폭을 맞춘다)
- ③의 요소에 overflow, white-space, text-overflow를 지정한다
- 라벨 요소(⑤)에 padding-left, padding-right를 지정한다(깨끗하게 보이기 위해)
③에 관해서는 RaisedButton의 속성으로 지정할 수 없으므로 인라인이 아닌 CSS로 잘라낸다.
최종 소스 코드는 아래.
ellipsis.js
<RaisedButton
label="ラベルラベルラベルラベル"
primary={true}
style={{width: '100%', minWidth: 0}}
labelStyle={{paddingLeft: 0, paddingRight: 0}}
className="ellipsisButton" />
layout.css
.ellipsisButton button div div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Reference
이 문제에 관하여(Material-UI의 RaisedButton에서 라벨이 단절되었을 때 세 점 리더 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/gyarasu/items/191f7ba1a6f1ca549eca텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)