Flyout

플라이아웃(Flyout)은 Modal과 Sidebar가 결합된 컴포넌트예요. 화면 가장자리에서 슬라이드로 나타나는 패널로, 헤더·콘텐츠·액션 버튼을 갖추고 있습니다. modal처럼 컨텍스트를 어둡게 만들고 sidebar처럼 방향과 폭을 지정할 수 있어요.

출처: 문서

본문

Types

Flyout

플라이아웃이에요.

Archive Old Messages
            
          
          
            
          
          
            
              
              No
            
            
              
              Yes
            
          
        
        
      
      
      $('.ui.flyout')
        .flyout('toggle')
      ;

Variations

Width

플라이아웃은 자신의 폭을 지정할 수 있어요.

폭은 ui grid 시스템처럼도 정의할 수 있어요.

Position

플라이아웃은 자신의 표시 위치를 지정할 수 있어요.

$('.ui.flyout')
        .flyout('toggle')
      ;

Fullscreen

플라이아웃은 필요하면 화면 전체를 차지할 수 있어요.

$('.ui.fullscreen.flyout')
          .flyout('toggle')
        ;

Scrolling Content

플라이아웃은 스크롤되는 콘텐츠를 가질 수 있어요.

Header
          
            
          
        
        
      
      
      $('.ui.longer.flyout')
        .flyout('show')
      ;

Center Aligned

헤더, 콘텐츠, 심지어 액션을 각각 중앙 정렬할 수 있어요.

Header is centered
          
            
          
          
            
            Cancel
            OK
          
        
        
      
      
          $('#centerexample')
          .flyout('show')
          ;

Left Actions

액션 버튼을 왼쪽에 배치할 수도 있어요.

Look at the Actions
          
            
          
          
            
            Cancel
            OK
          
        
        
      
      
          $('#leftactionsexample')
          .flyout('show')
          ;

Basic Header and Actions

헤더 및/또는 액션은 콘텐츠와 같은 기본(basic) 배경에 나타날 수도 있어요.

Basic Header
              
                
              
              
                  Cancel
                  OK
              
          
      
      
          $('#basicheaderactionsexample')
          .flyout('show')
          ;

Examples

Using a custom context

플라이아웃은 페이지의 body뿐만 아니라 어떤 요소 안에서도 초기화될 수 있어요.

Toggle flyout
        
      
      
        
          
          
            
            
              Archive Old Messages
            
          
          
            
          
          
            
              
              No
            
            
              
              Yes
            
          
        
        
          
            Application Content
            
            
            
            
          
        
      
      
      // using context
      $('.context.example .ui.flyout')
        .flyout({
          context: $('.context.example .bottom.segment')
        })
        .flyout('attach events', '.context.example .menu .item')
      ;

Set-up

Page Structure

플라이아웃을 사용하려면 특정한 페이지 구조가 필요해요. 최적의 성능을 위해 플라이아웃을 초기화하기 전에 페이지가 이미 이 구조로 구성되어 있어야 해요.

Flyout will automatically add the correct layout on first load if it is not set-up, however fixing your page's layout on load will reduce performance and is not recommended.
      
      
        <body>
          <div class="ui flyout">
            ...
          </div>
          <div class="pusher">
            Your site's actual content
          </div>
        </body>
      
      
        
          The pusher is the element that will be pushed away by the flyout and should contain your site content.
          If your pusher contains overflowing content, you might use overflowing pusher to prevent possible undesired side effects (for example when using native sticky somewhere)

플라이아웃은 구조가 설정되어 있지 않으면 첫 로드 시 올바른 레이아웃을 자동으로 추가해요. 하지만 로드 시 페이지 레이아웃을 수정하면 성능이 떨어지므로 권장하지 않아요. pusher는 플라이아웃에 의해 밀려나는 요소로, 사이트 콘텐츠를 담아야 해요. pusher가 넘치는 콘텐츠를 담고 있다면, overflowing pusher를 사용해 원치 않는 부작용(예: 어딘가에서 네이티브 sticky를 사용할 때)을 방지할 수 있어요.

Via existing DOM node

플라이아웃은 페이지 어디에나 포함될 수 있어요. 초기화 시 플라이아웃의 현재 크기가 캐시되고, 요소는 DOM에서 분리되어 dimmer 안으로 이동해요.

$('.ui.flyout')
        .flyout()
      ;
      
      
        
          
          
            Flyout Title
          
          
            
              An image can appear on left or an icon
            
            
              A description can appear on the right
            
          
          
            Cancel
            OK

Via Javascript properties

마크업을 직접 만들 필요 없이 임시 플라이아웃을 만들 수 있어요. 임시 플라이아웃은 커스텀 onHidden 콜백이 주어지지 않으면 기본적으로 닫힐 때 DOM에서 제거돼요.

$.flyout({
          debug: true,
          verbose: true,
          autoShow: true,
          title: 'Important Notice',
          class: 'wide',
          closeIcon: true,
          content: 'You will be logged out in 5 Minutes',
          actions: [{
            text: 'Alright, got it',
            class: 'green',
            icon: 'save'
          }]
        });

Behavior

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

.ui.flyout')
      .flyout('behavior name', argumentOne, argumentTwo)
    ;

행동	설명
`attach events(selector, event)`	주어진 선택자에 플라이아웃 액션을 연결해요. 지정하지 않으면 기본 이벤트는 toggle이에요.
`show`	플라이아웃을 보여줘요.
`hide`	플라이아웃을 숨겨요.
`toggle`	플라이아웃을 토글해요.
`hide others`	표시된 다른 모든 플라이아웃을 숨겨요.
`is visible`	플라이아웃이 표시 중인지 반환해요.
`is hidden`	플라이아웃이 숨겨졌는지 반환해요.
`get direction`	현재 플라이아웃의 방향을 반환해요.
`get settings`	현재 플라이아웃의 설정을 반환해요.
`destroy`	인스턴스를 파괴하고 모든 이벤트를 제거해요.

Config Templates

config template은 미리 구성된 임시 플라이아웃을 즉시 표시하는 특별한 행동이에요. 세 가지 기본 템플릿이 포함되어 있어요: alert, confirm, prompt. 기존 바닐라 JS 변형과 동등하지만, 모양과 느낌을 더 다양하게 커스터마이즈할 수 있어요.

config template 플라이아웃은 항상 자동 표시(autoShow)되므로 수동 show는 필요 없어요.

$.flyout('alert','hello')
      $.flyout('confirm','Are you sure?',function(value){})
      $.flyout('prompt','Enter Code', function(value){})

Alert

가능한 매개변수는 title, content, handler (바닐라 js 사용과 거의 동일하게 유지하기 위해 이 순서로) 또는 객체 {title:'',content:'',handler:function(){}}로, title과 content는 HTML을 포함할 수 있어요.

If you don't trust the content set the global flyout setting for preserveHTML to false.
      
          $.flyout('alert','hello');
      
      
          $.flyout('alert','Watch out','This is an important message!');
      
      
         $.flyout('alert',{
            title: 'Listen to me',
            content: 'I love Fomantic-UI',
            handler: function() {
              $.toast({message:'Great!'});
            }
          });

콘텐츠를 신뢰하지 않는다면 전역 flyout 설정 preserveHTML을 false로 설정하세요.

Confirm

매개변수 목록과 로직은 alert와 동일해요. 선택된 boolean 값이 주어진 콜백 핸들러에 제공돼요.

// title and content
        $.flyout('confirm','Attention!','Ready?');
      
      
      // title, content and handler
        $.flyout('confirm','Attention!','Ready?', function(choice){
          $.toast({message:'You '+ (choice ? 'Accepted':'Declined')});
        });
      
      
      // content and handler
        $.flyout('confirm','Ready?', function(choice){
          $.toast({message:'You '+ (choice ? 'Accepted':'Declined')});
        });
      
      
      // title and handler
        $.flyout('confirm',{
          title: 'Ready?',
          handler: function(choice){
            $.toast({message:'You '+ (choice ? 'Accepted':'Declined')});
          }
        });

Prompt

prompt 호출은 기본적으로 alert와 confirm과 동일해요. 객체가 주어질 때 사용 가능한 옵션이 두 개 더 있어요: placeholder와 defaultValue. 콘텐츠용 HTML 코드를 제공하고 그 안에 input이 있다면 그 input이 입력 필드로 사용되며, 그렇지 않으면 동적으로 생성해줘요.

// provide a placeholder
    $.flyout('prompt',{
      title: 'Enter your name',
      placeholder: 'Do not enter your mothers name!',
      handler: function(name){
          $.toast({message: 'Your name is ' + (name || 'CANCELLED')});
      }
    });
      
      
  // set a defaultValue
    $.flyout('prompt',{
      title: 'Enter your name',
      defaultValue: 'mommy',
      handler: function(name){
          $.toast({message: 'Your name is ' + (name || 'CANCELLED')});
      }
    });
      
      
  // custom input
    $.flyout('prompt', 'Custom Input', 'Nickname', function(name) {
      $.toast({message: 'Your name is ' + (name || 'CANCELLED')});
    });

Create your own template

flyouts 템플릿 객체를 한 번 확장하면 자신만의 커스텀 config 템플릿을 정의할 수 있어요. 플라이아웃을 생성/표시하기 전에 플라이아웃 설정에 병합될 객체를 반환해야 해요.

$.fn.flyout.settings.templates.greet = function(username) {
  // do something according to flyouts settings and/or given parameters
    var settings = this.get.settings(); // "this" is the flyout instance
    return {
      title: 'Greetings to ' + username + '!',
      content: ''+ username.toUpperCase() + 'is the best!',
      closeIcon: true,
      class: 'inverted',
      classContent: 'centered'
    }
  }
      
      
      
          $.flyout('greet','mom')
      
      
          $.flyout('greet','dad')

Settings

Flyout Settings

Flyout 설정은 플라이아웃의 동작을 수정해요.

Setting
            Default
            Description
          
        
        
          
            context
            'body'
            Selector or jquery object specifying the area to dim
          
          
            exclusive
            false
            Opening another flyout will dismiss the one displayed. Set to true to allow multiple flyout at the same time.
          
          
            closable
            true
            Setting to false will not allow you to close the flyout by clicking on the dimmer.
          
          
            dimPage
            true
            Whether to dim context contents when flyout is visible.
          
          
            blurring
            false
            If dimmer should blur background
          
          
            autofocus
            true
            When true, the first form input inside the flyout will receive focus when shown.  Set this to false to prevent this behavior.
          
          
            restoreFocus
            true
            When false, the last focused element, before the flyout was shown, will not get refocused again when the flyout hides. This could prevent unwanted scrolling behaviors after closing a flyout.
          
          
            keyboardShortcuts
            true
            Whether to automatically bind keyboard shortcuts. This will close the flyout when the ESC-key is pressed.
          
          
            scrollLock
            false
            Whether to lock page scroll when flyout is visible.
          
          
            returnScroll
            false
            Whether to return to original scroll position when flyout is hidden.
          
          
            delaySetup
            false
            When flyout is initialized without the proper HTML, using this option will defer creation of DOM to use requestAnimationFrame.
          
          
            autoShow
            false
            When true, immediately shows the flyout at instantiation time.
          
          
            duration
            500
            Duration of animation.

context — 어둡게 할 영역을 지정하는 선택자 또는 jQuery 객체.
exclusive — false일 때 다른 플라이아웃을 열면 표시된 것을 닫아요. 여러 플라이아웃을 동시에 허용하려면 true로 설정.
closable — false로 설정하면 dimmer를 클릭해 플라이아웃을 닫을 수 없게 돼요.
dimPage — 플라이아웃이 보일 때 컨텍스트 콘텐츠를 어둡게 할지.
blurring — dimmer가 배경을 흐리게 할지.
autofocus — true일 때 플라이아웃 안의 첫 폼 입력이 표시될 때 포커스를 받아요.
restoreFocus — false일 때 플라이아웃이 숨길 때 마지막 포커스된 요소에 다시 포커스하지 않아요. 플라이아웃을 닫은 후 원치 않는 스크롤 동작을 방지.
keyboardShortcuts — 키보드 단축키를 자동으로 바인딩할지. ESC 키를 누르면 플라이아웃을 닫아요.
scrollLock — 플라이아웃이 보일 때 페이지 스크롤을 잠글지.
returnScroll — 플라이아웃이 숨겨질 때 원래 스크롤 위치로 돌아갈지.
delaySetup — 적절한 HTML 없이 초기화될 때 DOM 생성을 requestAnimationFrame으로 연기할지.
autoShow — true일 때 인스턴스 생성 시 즉시 플라이아웃을 보여줘요.
duration — 애니메이션 시간.

Callbacks

Callbacks는 특정 행동 이후 발생할 함수를 지정해요.

Setting
            Context
            Description
          
        
        
        
            onChange
            Flyout
            Is called when a flyout is either shown or hidden.
          
          
            onShow
            Flyout
            Is called when a flyout starts to show.
          
          
            onHide
            Flyout
            Is called after a flyout starts to hide.
          
          
            onVisible
            Flyout
            Is called after a flyout has finished showing animating.
          
          
            onHidden
            Flyout
            Is called after a flyout has finished hiding animation.
          
          
            onApprove
            Flyout
            Is called after a positive, approve or ok button is pressed. If the function returns false, the flyout will not hide.
          
          
            onDeny
            Flyout
            Is called after a negative, deny or cancel button is pressed. If the function returns false, the flyout will not hide.

onChange — 플라이아웃이 표시되거나 숨겨질 때 호출돼요.
onShow — 플라이아웃이 표시되기 시작할 때 호출돼요.
onHide — 플라이아웃이 숨겨지기 시작한 후 호출돼요.
onVisible — 플라이아웃의 표시 애니메이션이 끝난 후 호출돼요.
onHidden — 플라이아웃의 숨김 애니메이션이 끝난 후 호출돼요.
onApprove — 긍정(approve/ok) 버튼을 누른 후 호출돼요. 함수가 false를 반환하면 플라이아웃이 숨겨지지 않아요.
onDeny — 부정(deny/cancel) 버튼을 누른 후 호출돼요. 함수가 false를 반환하면 플라이아웃이 숨겨지지 않아요.

DOM Settings

DOM 설정은 이 모듈이 DOM과 어떻게 인터페이스할지 지정해요.

Setting
          Default
          Description
        
        
        
          
            namespace
            flyout
            Event namespace. Makes sure module teardown does not effect other events attached to an element.
          
          
            selector
            
              
              selector    : {
                fixed   : '.fixed',
                omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
                pusher  : '.pusher',
                flyout  : '.ui.flyout',
                header  : '.ui.header',
                content : '.content',
                actions : '.actions',
                close   : '.close',
                approve : '.actions .positive, .actions .approve, .actions .ok',
                deny    : '.actions .negative, .actions .deny, .actions .cancel'
              }
              
            
          
          
            className
            
              
              className : {
                flyout     : 'ui flyout',
                close      : 'close icon',
                header     : 'ui header',
                content    : 'content',
                actions    : 'actions',
                active     : 'active',
                animating  : 'animating',
                dimmed     : 'dimmed',
                pushable   : 'pushable',
                pushed     : 'pushed',
                right      : 'right',
                top        : 'top',
                left       : 'left',
                bottom     : 'bottom',
                visible    : 'visible',
                overlay    : 'overlay',
                fullscreen : 'fullscreen',
                template   : 'ui flyout',
                button     : 'ui button',
                ok         : 'positive',
                cancel     : 'negative',
                prompt     : 'ui fluid input'
              }
              
            
          
          
            regExp
            
              
              regExp : {
                mobile       : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
              }

Config Template Settings

Config Template 설정은 동적으로 생성된 플라이아웃의 기본 콘텐츠를 정의해요.

Setting
          Default
          Description
        
        
        
          
            title
            ''
            Content of the flyout header.
          
          
            content
            ''
            Content of the flyout content.
          
          
            class
            ''
            Can hold a string to be added to the flyout class to control its appearance.
          
          
            classTitle
            ''
            Can hold a string to be added to the title class to control its appearance.
          
          
            classContent
            ''
            Can hold a string to be added to the content class to control its appearance.
          
          
            classActions
            ''
            Can hold a string to be added to the actions class to control its appearance.
          
          
            closeIcon
            false
            Whether the flyout should include a close icon.
          
          
            actions
            false
            An array of objects. Each object defines an action with properties text,class,icon and click.
              Actions will close the flyout by default. Return false from the click handler to prevent that.
              If you use any of the approve (approve, ok, positive) or deny (deny, cancel, negative) classnames for the class property, a click handler will be ignored. In such cases use the onApprove and onDeny callbacks instead.
              
              actions: [{
                  text    : 'Wait',
                  class   : 'red',
                  icon    : 'exclamation',
                  click   : function() {}
              }]
              
            
          
          
            preserveHTML
            true
            Whether HTML included in given title, content or actions should be preserved. Set to false in case you work with untrusted 3rd party content.
          
          
            fields
            
              
              fields         : {
                class        : 'class',
                text         : 'text',
                icon         : 'icon',
                click        : 'click'
              }
              
            
          
          
            text
            
              
              text: {
                ok    : 'Ok',
                cancel: 'Cancel'
              }

title — 플라이아웃 헤더의 콘텐츠.
content — 플라이아웃 콘텐츠의 콘텐츠.
class / classTitle / classContent / classActions — flyout/title/content/actions 클래스에 추가되어 모양을 제어하는 문자열.
closeIcon — 플라이아웃이 닫기 아이콘을 포함할지.
actions — 객체 배열. 각 객체는 text, class, icon, click 속성으로 액션을 정의해요. 액션은 기본적으로 플라이아웃을 닫아요. click 핸들러에서 false를 반환하면 그 동작을 막을 수 있어요. class 속성에 approve (approve, ok, positive)나 deny (deny, cancel, negative) 클래스 이름을 사용하면 click 핸들러는 무시돼요. 그런 경우 onApprove/onDeny 콜백을 사용하세요.
preserveHTML — 주어진 title/content/actions에 포함된 HTML을 보존할지. 신뢰할 수 없는 3rd party 콘텐츠를 다룰 때는 false로 설정.
fields — 액션 객체의 속성 필드 매핑.
text — 기본 버튼 텍스트 (ok, cancel).

Debug Settings

Debug 설정은 콘솔에 대한 디버그 출력을 제어해요.

Setting
            Default
            Description
          
        
        
          
            name
            Flyout
            Name used in debug logs.
          
          
            silent
            false
            Silences all console output including error messages, regardless of other debug settings.
          
          
            debug
            false
            Provides standard debug output to console.
          
          
            performance
            true
            Show console.table output with performance metrics.
          
          
            verbose
            true
            Debug output includes all internal behaviors.
          
          
            error
            
              
              error   : {
                method      : 'The method you called is not defined.',
                pusher      : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element',
                movedFlyout : 'Had to move flyout. For optimal performance make sure flyout and pusher are direct children of your body tag',
                notFound    : 'There were no elements that matched the specified selector'
              }

더 알아보기 (Learn more)

플라이아웃으로 알림·확인·입력 프롬프트까지 간단히 만들 수 있어요. $.flyout('alert') 같은 config 템플릿을 활용하면 마크업 없이도 빠르게 UI를 띄울 수 있습니다. 관련 컴포넌트인 Modal과 Sidebar도 함께 살펴보세요.

Flyout

Flyout

본문

Types

Flyout

Variations

Width

Position

Fullscreen

Scrolling Content

Center Aligned

Left Actions

Basic Header and Actions

Examples

Using a custom context

Set-up

Page Structure

Initializing a flyout

Via existing DOM node

Via Javascript properties

Behavior

Config Templates

Alert

Confirm

Prompt

Create your own template

Settings

Flyout Settings

Callbacks

DOM Settings

Config Template Settings

Debug Settings

더 알아보기 (Learn more)