ax6ui

ES6 UI Component

Stats

stars ๐ŸŒŸissues โš ๏ธupdated ๐Ÿ› created ๐Ÿฃsize ๐Ÿ‹๏ธโ€โ™€๏ธ
70Nov 5, 2017Jun 28, 2017Minified + 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.