Material-UI의 RaisedButton에서 라벨이 단절되었을 때 세 점 리더 표시

※본 기사의 내용은 Material-UI v0.16.7 에 근거하고 있습니다.

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