{"id":18406338,"url":"https://github.com/thomasjang/ax6ui","last_synced_at":"2025-04-07T08:32:25.226Z","repository":{"id":57188565,"uuid":"95632513","full_name":"thomasJang/ax6ui","owner":"thomasJang","description":"ES6 Javascript UI Component","archived":false,"fork":false,"pushed_at":"2017-11-05T14:56:17.000Z","size":18197,"stargazers_count":7,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-18T18:02:09.776Z","etag":null,"topics":["es6-javascript","javascript","ui-components","webpack"],"latest_commit_sha":null,"homepage":"http://ax6ui.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thomasJang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-28T05:39:34.000Z","updated_at":"2018-06-09T03:18:55.000Z","dependencies_parsed_at":"2022-08-28T11:11:18.974Z","dependency_job_id":null,"html_url":"https://github.com/thomasJang/ax6ui","commit_stats":null,"previous_names":["ax6ui/ax6ui"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasJang%2Fax6ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasJang%2Fax6ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasJang%2Fax6ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasJang%2Fax6ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thomasJang","download_url":"https://codeload.github.com/thomasJang/ax6ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247620393,"owners_count":20968202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6-javascript","javascript","ui-components","webpack"],"created_at":"2024-11-06T03:08:19.467Z","updated_at":"2025-04-07T08:32:21.367Z","avatar_url":"https://github.com/thomasJang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/ax6ui.svg)](https://badge.fury.io/js/ax6ui)\n[![](https://img.shields.io/npm/dm/ax6ui.svg)](https://www.npmjs.com/package/ax6ui)\n\n![ax6ui logo](https://github.com/ax6ui/assets/blob/master/ax6ui-logo-320.png)\n\n# ax6ui\nES6 Javascript UI Component\n`ax6ui`는 ES6표준 문법으로 사용하는 Javascript UI 콤포넌트 입니다. \nReact, Vue 등의 프로젝트와 함께 사용할 수 있습니다.\n\n# Install\n\n```\nnpm install ax6ui -S\n```\n\n### Pure ES6 버전\n```\nnpm install ax6ui-es -S\n```\n\n\n# Usage\n\n## Sample 폴더 사용법\n```js\ncd samples\nnpm install\nnpm start\n```\n입력 후 웹 브라우저 주소줄에 `localhost:4000`을 입력하면 으로 samples 소스를 확인 할 수 있습니다. 데스크탑의 경우 메뉴가 우측 상단에 메뉴로 다른 페에지들을 확인 할 수 있습니다.\n\ndemo : http://ax6ui.com\n\n## UI Component List\n\n### AX6Info\n```js\nimport { AX6Info as info } from \"ax6ui\";\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6Info.md\n\n### AX6Util\n```js\nimport { AX6Util as U } from \"ax6ui\";\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6Util.md\n\n### AX6UIMask\n```js\nimport { AX6UIMask as Mask } from \"ax6ui\";\n\nlet mask = new Mask();\nmask.open();\nmask.close();\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6UIMask.md\n\n### AX6UIFormatter\n```js\nimport { AX6UIFormatter as Formatter } from \"ax6ui\";\n\nlet formatter = new Formatter();\n\nformatter.bind({\n  target: $('[data-ax6formatter=\"money(int)\"]')\n});\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6UIFormatter.md\n\n### AX6UICalendar\n```js\nimport { AX6UICalendar as Calendar } from \"ax6ui\";\nimport \"ax6ui/AX6UICalendar/style.scss\"; // css\n\nlet myCalendar_0 = new Calendar({\n  target: document.getElementById(\"target\")\n});\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6UICalendar.md\n\n### AX6UIPalette\n```js\nimport { AX6UIPalette as Palette } from \"ax6ui\";\nimport \"ax6ui/AX6UIPalette/style.scss\";\n\nlet palette = new Palette({\n  target: document.getElementById(\"target\")\n});\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6UIPalette.md\n\n### AX6UIPicker\n```js\nimport { AX6UIPicker as Picker } from \"ax6ui\";\nimport \"ax6ui/AX6UICalendar/style.scss\";\nimport \"ax6ui/AX6UIPalette/style.scss\";\nimport \"ax6ui/AX6UIPicker/style.scss\";\n\nlet picker = new Picker();\n\npicker.bind({\n  target: document.getElementById(\"target\"),\n  content: {\n    type: 'date',\n    config: {\n      mode: \"year\",\n      selectMode: \"month\"\n    },\n    formatter: {\n      pattern: 'date(month)'\n    }\n  }\n});\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6UIPicker.md\n\n### AX6UIDialog\n```js\nimport { AX6UIDialog as Dialog } from \"ax6ui\";\nimport \"ax6ui/AX6UIDialog/style.scss\";\n\nlet dialog = new Dialog();\n\n\ndialog.alert(\"alert\");\ndialog.alert({\n  msg: \"alert \"\n});\ndialog.confirm({\n  msg: \"alert \"\n});\ndialog.prompt({\n    title: \"prompt\",\n    msg: 'Input Here!!',\n    input: {\n      data1: {label: \"passwd\", type: \"password\"},\n      data2: {label: \"text\"}\n    }\n}, function () {\n  console.log(this);\n});\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6UIDialog.md\n\n### AX6UIToast\n```js\nimport { AX6UIToast as Toast } from \"ax6ui\";\nimport \"ax6ui/AX6UIToast/style.scss\";\n\nlet toast = new Toast();\n\ntoast.push(\"Toast~!!\");\ntoast.confirm({\n  title: \"Title\",\n  msg: \"Choose!!\",\n  btns: {\n    Y: {label: \"Y\"},\n    N: {label: \"N\"}\n  }\n}, function (res) {\n  console.log(res);\n});\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6UIToast.md\n\n### AX6UIModal\n```js\nimport { AX6UIModal as Modal } from \"ax6ui\";\nimport \"ax6ui/AX6UIModal/style.scss\";\n\nlet modal = new Modal();\nmodal.open({\n  position: {\n    left: \"center\",\n    top: \"middle\",\n    margin: 10\n  },\n  width: 800,\n  height: 600,\n  disableDrag: false\n}, function () {\n  this.$.body.append('\u003ch1\u003ediv contents\u003c/h1\u003e');\n});\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6UIModal.md\n\n### AX6UISelect\n```js\nimport { AX6UISelect as Select } from \"ax6ui\";\nimport \"ax6ui/AX6UISelect/style.scss\";\n\nlet select = new Select();\nselect.bind({\n  target: document.getElementById(\"target\"),\n  columnKeys: {\n    optionValue: 'id',\n    optionText: 'alias'\n  },\n  options: [\n    {id: \"id\", alias: \"optionText\"}\n  ]\n});\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6UISelect.md\n\n### AX6UIMenu\n```js\nimport { AX6UIMenu as Menu } from \"ax6ui\";\nimport \"ax6ui/AX6UIMenu/style.scss\";\n\nlet menu = new Menu({\n  iconWidth: 20,\n  acceleratorWidth: 100,\n  itemClickAndClose: false,\n  icons: {\n    'arrow': '\u003ci class=\"tiny material-icons\"\u003echevron_right\u003c/i\u003e'\n  },\n  columnKeys: {\n    label: 'name',\n    items: 'chidren'\n  },\n  items: [\n    {\n      icon: '\u003ci class=\"tiny material-icons\"\u003eclass\u003c/i\u003e',\n      name: \"Menu Parent 0\",\n      chidren: [\n        {\n          name: \"Menu Z\",\n          accelerator: \"CmdOrCtrl+Z\"\n        }\n      ]\n    }\n  ]\n});\n\nwindow.addEventListener('contextmenu', function (e) {\n    menu.popup(e, {\n        filter: function () {\n          return true;\n        }\n    });\n    e.preventDefault();\n}, false);\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6UIMenu.md\n\n### AX6UIUploader\n```js\nimport { AX6UIUploader as Uploader } from \"ax6ui\";\nimport \"ax6ui/AX6UIUploader/style.scss\";\n\nlet uploader = new Uploader({\n  //debug: true,\n  target: $body.find('[data-ax6ui-uploader=\"upload1\"]'),\n  form: {\n    action: \"http://api-demo.ax5.io/api/v1/ax5uploader\",\n    fileName: \"file\"\n  },\n  multiple: true,\n  manualUpload: false,\n  progressBox: true,\n  progressBoxDirection: \"left\",\n  dropZone: {\n    target: $body.find('[data-uploaded-box=\"upload1\"]')\n  },\n  uploadedBox: {\n    target: $body.find('[data-uploaded-box=\"upload1\"]'),\n    icon: {\n      \"download\": '\u003ci class=\"material-icons\"\u003efile_download\u003c/i\u003e',\n      \"delete\": '\u003ci class=\"material-icons\"\u003edelete\u003c/i\u003e'\n    },\n    columnKeys: {\n      name: \"fileName\",\n      type: \"ext\",\n      size: \"fileSize\",\n      uploadedName: \"saveName\",\n      uploadedPath: \"\",\n      downloadPath: \"\",\n      previewPath: \"\",\n      thumbnail: \"\"\n    },\n    lang: {\n      supportedHTML5_emptyListMsg: 'Drop files here or click to upload.',\n      emptyListMsg: 'Empty of List.'\n    },\n    onchange: function () {\n\n    },\n    onclick: function () {\n\n    }\n  },\n  validateSelectedFiles: function () {\n    if (this.uploadedFiles.length + this.selectedFiles.length \u003e 10) {\n      alert(\"You can not upload more than 10 files.\");\n      return false;\n    }\n    return true;\n  },\n  onprogress: function () {\n\n  },\n  onuploaderror: function () {\n\n  },\n  onuploaded: function () {\n\n  },\n  onuploadComplete: function () {\n\n  }\n});\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6UIUploader.md\n\n### AX6UIGrid\n```js\nimport { AX6UIGrid as Grid } from \"ax6ui\";\nimport \"ax6ui/AX6UIGrid/style.scss\";\n\nnew Grid({\n  target: document.getElementById(\"target\"),\n  columns: [\n    {key: 'a', label: 'field A'},\n    {key: 'b', label: 'field B', formatter: 'capital'},\n    {key: 'c', label: 'number C', formatter: 'money'} // 그리드에 내장된 formatter\n  ]\n}).setData([\n  {a: \"토마스\", b: \"Thomas\", c: 50000}\n]);\n```\n- https://github.com/ax6ui/ax6ui/blob/master/md/AX6UIGrid.md\n\n\u003e ax6ui의 모든 컴포넌트를 사용한다면 개별 컴포넌트의 style.scss를 별도로 import하는 대신에 `import \"ax6ui/style.scss\";` 을 이용하여 모든 style을 사용할 수 있습니다.\n\n## Question\n- https://jsdev.kr/c/axisj/ax6ui\n- https://github.com/ax6ui/ax6ui/issues ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasjang%2Fax6ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasjang%2Fax6ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasjang%2Fax6ui/lists"}