selectfromuser.com

Appearance

On this page

컴포넌트 라이브러리 ​

셀렉트에서 지원하는 UI 컴포넌트 모음(Components library)을 확인할 수 있습니다.

Input and selection ​

Text input ​

yaml
params:
- key: text
  label: 텍스트

Text area ​

yaml
params:
- key: text
  label: 텍스트 영역
  format: textarea

Number input ​

yaml
params:
- key: number
  label: 숫자
  format: number

Date ​

yaml
params:
- key: date
  label: 날짜
  format: date

Time ​

yaml
params:
- key: time
  label: 시간
  format: time

Date time ​

yaml
params:
- key: datetime
  label: 시간
  format: datetime

Date range ​

yaml
params:
- key: daterange
  label: 날짜 기간
  format: date
  range: true

Color input ​

yaml
params:
- key: color
  label: 색상
  format: color

File input ​

yaml
params:
- key: file
  label: 파일
  format: file

Radio group ​

yaml
params:
- key: text
  label: 라디오
  radio: 
  - radio1: 라디오1
  - radio2: 라디오2

Radio button group ​

yaml
params:
- key: text
  label: 라디오버튼그룹
  radio: 
  - radio1: 라디오1
  - radio2: 라디오2
  radioButtonGroup: true

Select ​

yaml
params:
- key: text
  label: 드롭다운
  dropdown:
  - dropdown1: 드롭다운1
  - dropdown2: 드롭다운2
  - dropdown3: 드롭다운3

Multi select ​

yaml
params:
- key: datalist
  label: Multi select  
  datalist:
  - value: FOREST
  - value: OCEAN
  datalistLength: 2

Data ​

Table ​

yaml
blocks:
- type: query
  resource: mysql.qa
  sqlType: select
  sql: SELECT id, created_at, text, number, datetime FROM test LIMIT 10

tableOptions ​

yaml
sql: ...
tableOptions:
  fixed: true
  height: 300px
  condensed: true
  bordered: false
  striped: true
  small: true

columns ​

yaml
sql: ...
columns:
  color: 
    format: color 
  status:
    color:
      action-group: red 
      action-with-selection: green 
      open-action: yellow 
  url: 
    format: url 
    thumbnail: true
    width: 50px
    height: 50px
  text2: 
    hidden: true 
  phone: 
    formatFn: maskCenter4
  image:
    format: image 
    thumbnail: true

Chart ​

yaml
blocks:
- type: query 
  name: bar 
  resource: mysql.qa
  sqlType: select 
  sql: >
    SELECT status, count(id) AS count
    FROM test 
    GROUP BY status
  chartOptions:
    x: status
    y: count 
    type: bar # pie, line

Actions and buttons ​

Actions ​

yaml
blocks:
- type: query 
  name: Select options
  resource: mysql.qa 
  sqlType: select 
  sql: >
    SELECT id, created_at, text, number
    FROM test
    ORDER BY id DESC  
    LIMIT 3
  selectOptions:
    enabled: true  
  actions:
  - label: 삭제  
    button:
      type: danger-light

Buttons ​

yaml
blocks:
- type: query 
  name: columns and buttons
  resource: mysql.qa 
  sqlType: select 
  sql: >
    SELECT id, created_at, text, number
    FROM test
    ORDER BY id DESC  
    LIMIT 3
  columns: 
    buttons:
      prepend: true
      buttons:
      - label: 삭제 
        type: danger-light
        openAction: delete
      - label: 수정 
        type: primary
        openAction: edit

Button color ​

yaml
type: default
# type: primary
# type: primary-light
# type: danger
# type: danger-light
# type: warning
# type: warning-light
# type: success
# type: success-light

Container ​

yaml
blocks:
- type: query 
  name: modal
  resource: mysql.qa 
  sqlType: select 
  sql: >
    SELECT *
    FROM test
    ORDER BY id DESC 
    LIMIT 10 
  viewModal:
    mode: center # side, full
    useColumn: id 
    blocks:
      - type: query 
        name: update-form 
        resource: mysql.qa 
        sqlType: update
        sql: >
          UPDATE test 
          SET text = :text 
          WHERE id = :id 
        params:
          - key: text 
            defaultValueFromRow: text 
          - key: id 
            valueFromRow: id