Title 클래스의 주요 기능은 아래와 같습니다.
1. 두 가지 형태의 Title bar를 제공합니다.
- default type, guide type
2. default type은 일반적인 형태로 form, panel와 같은 클래스에서 사용합니다.
3. guide type은 guide message와 같은 클래스에서 사용합니다.
- title bar 높이가 default type보다 작으면 백그라운드 이미지가 없습니다.
4. 타이틀 바에 두 가지 형태의 아이콘을 제공합니다.
- spread: 타이틀 바가 표시된 상태에서 콘텐트를 접거나 펼필 수 있습니다.
- closable: 타이틀 바만 숨기거나 콘텐츠 전체를 숨길 수 있습니다.
| Options | Component |
|---|---|
| ccode {String} | widget.Title |
|
component code : 'title'
|
|
| closable {Boolean} | widget.Title |
|
close 아이콘 사용 여부. default: false
true: 사용, false: 사용 안 함
|
|
| closeClass {String|Array} | widget.Title |
|
close 버튼 엘리먼트에 적용할 className
default: ['mc-guide-icon', 'mc-guide-icon-close']
|
|
| closeParent {Boolean} | widget.Title |
|
parent 엘리먼트의 hidden 설정 여부
false: close 버튼을 click했을 때 title 바만 hidden으로 설정합니다.
true: parent 엘리먼트도 hidden으로 설정합니다.
|
|
| closeOverClass {String} | widget.Title |
|
close 버튼에서 mouserover/out이 발생했을 때 적용할 calssName
default: 'mc-guide-icon-over'
|
|
| defaultType {Array} | widget.Title |
|
titleType이 'default'일 때 title outside에 적용할 className
options.html을 지정하고 titleType을 지정하지 않으면 'default'로 간주합니다
|
|
| guideType {Hash} | widget.Title |
|
titleType이 'guide'일 때 각 엘리먼트에 적용할 calssName
guideType: {outsideClass: 'mc-title', insideClass: 'mc-hd-guide-inside mc-hd-guide-image' }
|
|
| iconId {String} | widget.Title |
|
icon 엘리먼트 id
지정하지 않으면 자동으로 'mc_title_일련번호' 형태로 id를 부여합니다.
|
|
| insideClass {String} | widget.Title |
|
inside 엘리먼트에 반영할 className.
default: 'mc-title-inside'
|
|
| insideStyle {Hash} | widget.Title |
|
inside 엘리먼트에 반영할 style
|
|
| outsideClass {String} | widget.Title |
|
outside 엘리먼트에 반영할 className.
default: 'mc-title'
|
|
| outsideStyle {Hash} | widget.Title |
|
outside 엘리먼트에 반영할 style
|
|
| prefix {String} | widget.Title |
|
id 접두사. default: 'mc_title_'
|
|
| spread {Boolean} | widget.Title |
|
spread icon 사용 여부. default: false
true: 사용 함, false: 사용안 함
|
|
| textClass {String} | widget.Title |
|
text 엘리먼트에 반영할 className
default: 'mc-title-text'
|
|
| textId {String} | widget.Title |
|
title text 엘리먼트 id
지정하지 않으면 자동으로 'mc_title_일련번호' 형태로 id를 부여합니다.
|
|
| textStyle {String} | widget.Title |
|
text 엘리먼트에 반영할 style
|
|
| titleType {String} | widget.Title |
|
Title 형태.
default: 지정하지 않은 경우에 사용하면 일반적인 title이 표시됩니다.
guide: guide 형태의 작은 title이 표시됩니다.
|
|
| toggleClass {String} | widget.Title |
|
spread 엘리먼트를 토글할 때 적용할 calssName. default: 'mc-spread-toggle'
|
|
| Method | Component |
|---|---|
mc.widget.Title
(Hash)
|
widget.Title |
|
생성자
|
|
mainTitle
(HTMLElement/String)
|
widget.Title |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
getHeight
(Boolean/String) : Number
|
widget.Title |
|
Title outside height를 반환합니다.
|
|
getOutside
() : HTMLElement
|
widget.Title |
|
Title outside 엘리먼트를 반환합니다.
|
|
hideTitle
()
|
widget.Title |
|
Title을 숨김니다
|
|
isGuideHide
() : Boolean
|
widget.Title |
|
guideType인 경우 text와 closable을 지정 여부를 반환합니다.
|
|
setSpreadTarget
(HTMLElement/String)
|
widget.Title |
|
spread 대상 엘리먼트를 설정합니다.
|
|
setTextStyle
(String, String)
|
widget.Title |
|
className과 style을 title text에 적용합니다.
|
|
setTitleText
(String)
|
widget.Title |
|
파라미터에 지정한 text를 title text에 설정합니다.
|
|
showHide
(Boolean)
|
widget.Title |
|
파라미터에 true를 지정하면 Title를 표시하고 false를 지정하면 숨김니다.
|
|
showTitle
()
|
widget.Title |
|
Title를 표시합니다
|
|
toggleSpread
(String/HTMLElement)
|
widget.Title |
|
Title 엘리먼트의 차일드 엘리먼트의 숨김/펼침 기능을 설정합니다
|
|
| Custom Event | Component |
|---|---|
| close (HTMLElement spreadTarget, Object this) | widget.Title |
|
spread 상태에서 콘텐츠가 close되었을 때 fire됩니다.
|
|
| hideTitle (HTMLElement outside, Object this) | widget.Title |
|
title이 숨겨졌을 때 fire됩니다.
|
|
| open (HTMLElement spreadTarget, Object this) | widget.Title |
|
spread 상태에서 콘텐츠가 표시되었을 때 fire됩니다.
|
|
| showTitle (HTMLElement outside, Object this) | widget.Title |
|
title이 표시되었을 때 fire됩니다.
|
|
| Examples | |
|---|---|
| Title type | |
|
Title 형태
|
|
| close | |
|
close button
|
|
| spread | |
|
내용 숨김/표시
|
|