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

4107 단어 CSSReactmaterial-ui
※본 기사의 내용은 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;
}

좋은 웹페이지 즐겨찾기