Page Comparison

...

Status
colour Green title Tip

Data Select Field

테이블 첫번째 Col에 데이터 선택 필드가 생성되며, 선택 타입을 2가지로 선택 가능하다.

- Radio : 라디오 버튼 타입으로 데이터 선택 필드 생성, 단일 선택만 허용할 경우 사용

- Checkbox : 체크박스 타입으로 데이터 선택 필드 생성, 다중 선택을 허용할 경우 사용

...

3. Use Same Line

Status
colour Yellow title new

...

Status
colour Green title Tip

Use Same Line

Same Line을 {ON}으로 설정하면 페이지네이션의 위치/정렬 옵션이 비노출되고, 버튼 위치/정렬 설정에 따라 페이지네이션의 위치가 자동 설정된다. 버튼 정렬은 {Left, Right}만 선택 가능하다.

- Event Buttons Position{Top} → Auto Set “Pagination Position{Top}”

- Event Buttons Align{Right} → Auto Set “Pagination Align{Left}”

4. Use Extra Buttons

Status
colour Red title with action display Option

제공하는 이벤트 버튼 외에 추가로 버튼을 생성하여 사용할 수 있다. 추가하기 버튼 추가는 아이콘을 클릭하고 버튼 컴포넌트를 선택하여 셋팅한다진행한다. 버튼 셋팅 옵션은 https://ionsdp.atlassian.net/wiki/spaces/~438538633/pages/1555333928/Set+Button#Setting-Screen을 참고 하자.

Extra Buttons{ON}일 경우, 테이블 마지막 필드에 각 Row에 적용 가능한 액션 디스플레이 필드를 생성한다. 아이콘, 버튼, 드롭다운 3가지 타입 중 하나를 선택하고, 원하는 Action 목록을 생성하고 컴포넌트를 연결한다Action Display 필드가 생성된다. 드롭다운 2가지 Action Display 옵션을 설정하여 Extra Buttons을 나열할 수 있다.

• Action Display Type : 디스플레이 필드 타입 선택(Icon, Button, Dropdown)

  • Action Display Button Align

    Status
    colour Yellow title new

    : 버튼 타입의 액션 디스플레이 정렬 옵션(Vertical, Horizontal)

  • Action Display Icon Type : 아이콘 Button Type

    Status
    colour Yellow title new

    : 버튼 타입의 액션 디스플레이 노출 타입 옵션(Hamburger, Unfolded)

  Action Display List : 디스플레이 필드에 사용할 액션 목록을 생성하거나 선택

  • Default)

Status
colour

...

Green title

...

Tip

Action Display Type{Button}

버튼 옵션 설정을 통해 Basic Button, Text Button, Icon Button, Text Button with Icon 등을 만들 수 있다.

버튼 옵션에 관한 가이드는 Event Component을 참고하자.

...

Search Option

1. Search Bar

Status
colour Yellow title new

...

...

6. Show MoreLink

테이블 상단에 [more] 을 추가하여 링크로 더 많은 정보를 사용자에게 전달 할 수 있다.

...

자주 쓰이는 CSS 목록에서 원하는 스타일을 선택하는 방법이다.

...

...

To be deleted?

Status
colour Red title need check

...