ax6ui

ES6 UI Component

Stats

StarsIssuesVersionUpdatedCreatedSize
ax6ui
700.7.215 years ago5 years agoMinified + gzip package size for ax6ui in KB

Readme

npm version

ax6ui logo

ax6ui

ES6 Javascript UI Component ax6ui는 ES6표준 문법으로 사용하는 Javascript UI 콤포넌트 입니다. React, Vue 등의 프로젝트와 함께 사용할 수 있습니다.

Install

npm install ax6ui -S

Usage

UI Component List

AX6Info

import { AX6Info as info } from "ax6ui";

AX6Util

import { AX6Util as U } from "ax6ui";

AX6UIMask

import { AX6UIMask as Mask } from "ax6ui";

let mask = new Mask();
mask.open();
mask.close();

AX6UIFormatter

import { AX6UIFormatter as Formatter } from "ax6ui";

let formatter = new Formatter();

formatter.bind({
  target: $('[data-ax6formatter="money(int)"]')
});

AX6UICalendar

import { AX6UICalendar as Calendar } from "ax6ui";
import "ax6ui/AX6UICalendar/style.scss"; // css

let myCalendar_0 = new Calendar({
  target: document.getElementById("target")
});

AX6UIPalette

import { AX6UIPalette as Palette } from "ax6ui";
import "ax6ui/AX6UIPalette/style.scss";

let palette = new Palette({
  target: document.getElementById("target")
});

AX6UIPicker

import { AX6UIPicker as Picker } from "ax6ui";
import "ax6ui/AX6UICalendar/style.scss";
import "ax6ui/AX6UIPalette/style.scss";
import "ax6ui/AX6UIPicker/style.scss";

let picker = new Picker();

picker.bind({
  target: document.getElementById("target"),
  content: {
    type: 'date',
    config: {
      mode: "year",
      selectMode: "month"
    },
    formatter: {
      pattern: 'date(month)'
    }
  }
});

AX6UIDialog

import { AX6UIDialog as Dialog } from "ax6ui";
import "ax6ui/AX6UIDialog/style.scss";

let dialog = new Dialog();


dialog.alert("alert");
dialog.alert({
  msg: "alert "
});
dialog.confirm({
  msg: "alert "
});
dialog.prompt({
    title: "prompt",
    msg: 'Input Here!!',
    input: {
      data1: {label: "passwd", type: "password"},
      data2: {label: "text"}
    }
}, function () {
  console.log(this);
});

AX6UIToast

import { AX6UIToast as Toast } from "ax6ui";
import "ax6ui/AX6UIToast/style.scss";

let toast = new Toast();

toast.push("Toast~!!");
toast.confirm({
  title: "Title",
  msg: "Choose!!",
  btns: {
    Y: {label: "Y"},
    N: {label: "N"}
  }
}, function (res) {
  console.log(res);
});

AX6UIModal

import { AX6UIModal as Modal } from "ax6ui";
import "ax6ui/AX6UIModal/style.scss";

let modal = new Modal();
modal.open({
  position: {
    left: "center",
    top: "middle",
    margin: 10
  },
  width: 800,
  height: 600,
  disableDrag: false
}, function () {
  this.$.body.append('<h1>div contents</h1>');
});

AX6UISelect

import { AX6UISelect as Select } from "ax6ui";
import "ax6ui/AX6UISelect/style.scss";

let select = new Select();
select.bind({
  target: document.getElementById("target"),
  columnKeys: {
    optionValue: 'id',
    optionText: 'alias'
  },
  options: [
    {id: "id", alias: "optionText"}
  ]
});

AX6UIMenu

import { AX6UIMenu as Menu } from "ax6ui";
import "ax6ui/AX6UIMenu/style.scss";

let menu = new Menu({
  iconWidth: 20,
  acceleratorWidth: 100,
  itemClickAndClose: false,
  icons: {
    'arrow': '<i class="tiny material-icons">chevron_right</i>'
  },
  columnKeys: {
    label: 'name',
    items: 'chidren'
  },
  items: [
    {
      icon: '<i class="tiny material-icons">class</i>',
      name: "Menu Parent 0",
      chidren: [
        {
          name: "Menu Z",
          accelerator: "CmdOrCtrl+Z"
        }
      ]
    }
  ]
});

window.addEventListener('contextmenu', function (e) {
    menu.popup(e, {
        filter: function () {
          return true;
        }
    });
    e.preventDefault();
}, false);

AX6UIUploader

import { AX6UIUploader as Uploader } from "ax6ui";
import "ax6ui/AX6UIUploader/style.scss";

let uploader = new Uploader({
  //debug: true,
  target: $body.find('[data-ax6ui-uploader="upload1"]'),
  form: {
    action: "http://api-demo.ax5.io/api/v1/ax5uploader",
    fileName: "file"
  },
  multiple: true,
  manualUpload: false,
  progressBox: true,
  progressBoxDirection: "left",
  dropZone: {
    target: $body.find('[data-uploaded-box="upload1"]')
  },
  uploadedBox: {
    target: $body.find('[data-uploaded-box="upload1"]'),
    icon: {
      "download": '<i class="material-icons">file_download</i>',
      "delete": '<i class="material-icons">delete</i>'
    },
    columnKeys: {
      name: "fileName",
      type: "ext",
      size: "fileSize",
      uploadedName: "saveName",
      uploadedPath: "",
      downloadPath: "",
      previewPath: "",
      thumbnail: ""
    },
    lang: {
      supportedHTML5_emptyListMsg: 'Drop files here or click to upload.',
      emptyListMsg: 'Empty of List.'
    },
    onchange: function () {

    },
    onclick: function () {

    }
  },
  validateSelectedFiles: function () {
    if (this.uploadedFiles.length + this.selectedFiles.length > 10) {
      alert("You can not upload more than 10 files.");
      return false;
    }
    return true;
  },
  onprogress: function () {

  },
  onuploaderror: function () {

  },
  onuploaded: function () {

  },
  onuploadComplete: function () {

  }
});

AX6UIGrid

import { AX6UIGrid as Grid } from "ax6ui";
import "ax6ui/AX6UIGrid/style.scss";

new Grid({
  target: document.getElementById("target"),
  columns: [
    {key: 'a', label: 'field A'},
    {key: 'b', label: 'field B', formatter: 'capital'},
    {key: 'c', label: 'number C', formatter: 'money'} // 그리드에 내장된 formatter
  ]
}).setData([
  {a: "토마스", b: "Thomas", c: 50000}
]);

ax6ui의 모든 컴포넌트를 사용한다면 개별 컴포넌트의 style.scss를 별도로 import하는 대신에 import "ax6ui/style.scss"; 을 이용하여 모든 style을 사용할 수 있습니다.

Question

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.