Dimmer

디머(Dimmer)는 요소나 페이지 전체를 어둡게 만들어 주목을 집중시키는 컴포넌트예요. 콘텐츠를 표시할 수도 있고, 페이지 고정형으로도 만들 수 있어요.

출처: 문서

본문

Types

Dimmer

단순 디머는 콘텐츠를 표시하지 않아요.

// left button
        $('.segment').dimmer('show');
        // right button
        $('.segment').dimmer('hide');
      
      
      
        
          Overlayable Section
        
        
          
          
          
        
        
      
      
        
          
          
            Overlayable Section

Content Dimmer

디머는 콘텐츠를 표시할 수 있어요.

dimmers with content now only need a single wrapping content container.
      
        
          Overlayable Section
        
        
          
          
          
        
        
        
        
          
            
              
              Dimmed Message!

콘텐츠가 있는 디머는 이제 하나의 감싸는 content 컨테이너만 필요해요.

Page Dimmer

디머는 페이지에 고정되도록 서식화할 수 있어요.

States

Active

활성 디머는 부모 컨테이너를 어둡게 만들어요.

Disabled

비활성화된 디머는 활성화될 수 없어요.

Variations

Dimmable

Blurring

dimmable 요소는 콘텐츠를 흐리게(blur) 만들 수 있어요.

Alignment

Vertical Alignment

디머는 콘텐츠를 위쪽 또는 아래쪽으로 정렬할 수 있어요.

Title
            Add
            View

Title
            Add
            View

Dimmer

Simple Dimmer

디머는 Javascript 없이도 제어할 수 있어요.

Having any parent element receive the class ui dimmable dimmed will trigger the dimmer to display.

부모 요소가 ui dimmable dimmed 클래스를 받으면 디머가 표시되도록 트리거돼요.

Inverted Dimmer

디머는 색상이 반전되도록 서식화할 수 있어요.

Dimmer Shades

디머는 추가 클래스 medium, light, very light를 사용해 배경 음영의 깊이를 다르게 서식화할 수 있어요.

Also works in combination with inverted

inverted와 조합해서도 동작해요.

Partially Dimmer

디머는 덮어야 할 전체 영역이 아니라 콘텐츠의 전체 높이로 제한된 부분만 표시할 수 있어요. 예를 들어 top dimmer, center dimmer, bottom dimmer를 사용해 어떤 요소의 캡션으로 쓸 수 있어요.

Look!
              ui top dimmer

Look!
              ui center dimmer

Look!
              ui bottom dimmer

Works also very well with transitions fade up or fade down
      
      $('.partially.example .dimmer')
        .dimmer({
            transition: 'fade up',
            on: 'hover'
        })
      ;
      
      
        
          
            Look!
                ui bottom dimmer
          
        
        
      
      
        
          
            Look!
                ui center dimmer

fade up이나 fade down 트랜지션과도 아주 잘 어울려요.

Examples

Dimmer Events

디머는 이벤트에서 표시 여부 변경을 트리거할 수 있어요.

$('.event.example .image')
        .dimmer({
          on: 'hover'
        })
      ;
      
      
        
          
            Title
            Add
            View
          
        
        
      
      
        
          
            Add
            View

Loaders inside Dimmers

디머 안의 로더는 자동으로 어울리는 적절한 색상을 사용해요.

Loading

디머 안의 로더를 javascript를 통해 커스터마이즈할 수 있어요.

$('.dimmerloader.example .image')
          .dimmer({
              displayLoader: true,
              loaderVariation: 'slow orange medium elastic',
              loaderText: 'Wait a second, please...'
          })
          .dimmer('show')
          ;

Usage

Display

섹션에 .dimmer('show')를 호출하거나 디머 자체에 호출해서 디머를 표시할 수 있어요. dimmable 섹션을 어둡게 하면 디머가 자동으로 생성돼요.

// these two are the same
      $('.ui.dimmable')
        .dimmer('show')
      ;
      $('.ui.dimmable .dimmer')
        .dimmer('show')
      ;

이 둘은 같아요.

Creating Dimmers

요소 안에 디머가 없으면 처음 사용 시 자동으로 생성돼요.

$('h4')
          .dimmer('toggle')
        ;

Showing a Specific Dimmer

요소 안에 디머가 이미 있다면, dimmable 섹션이나 디머 자체에 행동을 호출할 수 있어요.

// If a dimmer exists on a page, you can make it appear by calling it directly
        $('.page.dimmer:first')
          .dimmer('toggle')
        ;

페이지에 디머가 존재하면 직접 호출해서 나타나게 할 수 있어요.

Behavior

다음 모든 행동은 다음 구문을 사용해 호출할 수 있어요:

행동은 원래 디머를 초기화했던 것과 같은 콘텐츠에서 호출해야 해요. dimmable 컨텍스트든 ui dimmer든요.

.ui.your.element')
      .dimmer('behavior name', argumentOne, argumentTwo)
    ;

행동	설명
`add content (element)`	주어진 요소를 DOM에서 분리하고 디머 안에 다시 연결해요.
`show`	디머를 보여줘요.
`hide`	디머를 숨겨요.
`toggle`	현재 디머의 표시 여부를 토글해요.
`set opacity(opacity)`	디머의 투명도를 변경해요.
`create`	dimmable 컨텍스트에 새 디머를 만들어요.
`get duration`	현재 표시 여부에 따라 show 또는 hide 이벤트의 현재 시간을 반환해요.
`get dimmer`	디머의 DOM 요소를 반환해요.
`has dimmer`	현재 dimmable이 디머를 갖고 있는지 반환해요.
`is active`	섹션의 디머가 활성인지 여부예요.
`is animating`	디머가 애니메이션 중인지 여부예요.
`is dimmer`	현재 요소가 디머인지 여부예요.
`is dimmable`	현재 요소가 dimmable 섹션인지 여부예요.
`is disabled`	디머가 비활성화되었는지 여부예요.
`is enabled`	디머가 비활성화되지 않았는지 여부예요.
`is page`	dimmable 섹션이 `body`인지 여부예요.
`is page dimmer`	디머가 페이지 디머인지 여부예요.
`set active`	페이지 디머를 활성으로 설정해요.
`set dimmable`	요소를 dimmable 섹션으로 설정해요.
`set dimmed`	dimmable 섹션을 dimmed로 설정해요.
`set page dimmer`	현재 디머를 페이지 디머로 설정해요.
`set disabled`	디머를 비활성화로 설정해요.
`destroy`	인스턴스를 파괴하고 모든 이벤트를 제거해요.

Dimmer

Behavior

이름	기본값	설명
`useFlex`	`true`	디머가 flex를 사용할지 레거시 포지셔닝을 사용할지 여부예요.
`variation`	`false`	디머를 생성할 때 추가할 변형을 지정해요 (`inverted`처럼).
`dimmerName`	`false`	`dimmable` 컨텍스트에서 디머를 초기화한다면 `dimmerName`을 사용해 그 컨텍스트의 여러 디머를 구분할 수 있어요.
`closable`	`auto`	디머를 클릭하면 디머를 숨길지 여부예요. (`auto`가 기본이며, `settings.on`이 `hover`가 아닐 때만 닫을 수 있어요).
`on`	`false`	`hover` 또는 `click`으로 설정해 dimmable 이벤트에서 디머를 표시/숨길 수 있어요.
`useCSS`	`true`	CSS 트랜지션을 사용해 디머를 어둡게 할지 여부예요.
`transition`	`fade`	메뉴 애니메이션에 사용할 명명된 트랜지션이에요. `fade`와 `slide down`은 ui transitions을 포함하지 않아도 사용 가능해요. 또는 객체를 제공해 hide/show 트랜지션과 hide/show 시간을 개별 값으로 설정할 수 있어요.
`duration`	`{ show : 500, hide : 500 }`	어두워지는 애니메이션 시간이에요. 정수를 사용하면 그 값이 show와 hide 애니메이션 모두에 적용돼요. `transition` 설정을 통해 개별 hide/show 시간을 제공하면 완전히 무시돼요.
`displayLoader`	`false`	디머 안에 커스텀 로더를 생성할지 여부예요.
`loaderVariation`	`''`	로더를 스타일링할 추가 css 클래스예요. Loader 참고.
`loaderText`	`false`	문자열이 주어지면 로더 애니메이션 아이콘 아래에 표시돼요.

Callbacks

콜백	컨텍스트	설명
`onShow`	dimmable	디머가 표시되기 전의 콜백이에요. 이 콜백에서 `false`를 반환하면 디머가 표시되지 않도록 취소해요.
`onHide`	dimmable	디머가 숨겨지기 전의 콜백이에요. 이 콜백에서 `false`를 반환하면 디머가 숨겨지지 않도록 취소해요.
`onChange`	dimmable	요소가 표시되거나 숨겨질 때의 콜백이에요.
`onVisible`	dimmable	디머가 완전히 표시될 때 요소의 콜백이에요.
`onHidden`	dimmable	디머가 완전히 숨겨질 때 요소의 콜백이에요.

Module

이 설정들은 모든 모듈에 공통이며, 컴포넌트가 콘텐츠를 DOM 속성에 연결하는 방식과 모듈의 디버깅 설정을 정의해요.

이름	기본값	설명
`namespace`	`dimmer`	이벤트 네임스페이스예요.
`selector`	`{ dimmable : '.dimmable', dimmer : '.ui.dimmer', content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' }`	모듈이 사용하는 선택자를 담은 객체예요.
`template`	`{ dimmer: function() { return $('').attr('class', 'ui dimmer'); } }`	디머 콘텐츠를 생성하는 데 사용되는 템플릿이에요.
`className`	`{ active : 'active', dimmable : 'dimmable', dimmed : 'dimmed', disabled : 'disabled', pageDimmer : 'page', hide : 'hide', show : 'show', transition : 'transition' }`	상태에 스타일을 연결하는 데 사용되는 클래스 이름이에요.
`name`	`Dimmer`	디버그 로그에 사용되는 이름이에요.
`silent`	`false`	모든 콘솔 출력을 조용히 만들어요.
`debug`	`false`	콘솔에 표준 디버그 출력을 제공해요.
`performance`	`true`	콘솔에 표준 디버그 출력을 제공해요.
`verbose`	`false`	콘솔에 보조 디버그 출력을 제공해요.
`errors`	`{ method : 'The method you called is not defined.' }`	콘솔에 표시되는 오류 메시지예요.

더 알아보기 (Learn more)

디머로 요소에 주목을 집중시킬 수 있어요. 로딩 중인 화면은 Loader를, 전체 화면 팝업은 Modal을 함께 살펴보세요.