Skip to main content

Use modal container

모달 열기 기본 구성
blocks:
  - type: http
    method: GET
    fetchFn: |
      return [
        { id: 1, name: 'hey' },
        { id: 2, name: 'good day' }
      ]
    columns:
      name:
        openModal: modal-:id
	  modals:
      - path: modal-:id
        blocks: 
          - type: markdown
            content: |
              open modal test
테이블 필드 링크 열어서 모달 열기
columns:
  name:
    openModal: modal1-:id
modals:
  - path: modal1-:id

Open modal by table field button

필드 버튼 눌러서 모달 열기
columns:
  name:
    buttons:
      - label: button
        openModal: modal1-:id
modals:
  - path: modal1-:id

Open modal by action button

액션 버튼으로 모달 열기
actions:
  - label: modal
    single: true
    openModal: modal2
modals:
  - path: modal2

Open popper by table field button

컬럼 버튼 클릭해서 Popper 열기
blocks:
  - type: http
    method: GET
    fetchFn: |
      return [
        { id: 1, name: 'hey' },
        { id: 2, name: 'good day' }
      ]
    columns:
      id:
        buttons:
          - label: 조회
            openPopper: true
            popperOptions:
              placement: right
            popperStyle:
              width: 500px
              overflow: auto
              padding: 20px
            blocks:
              - type: markdown
                content: | 
                  open popper test

Open popper by action button

액션 버튼 클릭해서 Popper 열기
type: http
actions:
  - label: 조회
    single: true
    openPopper: true