EleWise.ELMA365.UI.Components

npm i @elmabs/elewise.elma365.ui.components

Использование библиотеки компонентов

1. Виджеты ELMA365 (Дизайнер интерфейсов)

1.1 Подключение стелей

• Переходим на вкладку Файлы, создаем папку elewise.elma365.ui.components в которую загружаем файл index.css
• Переходим на вкладку Шаблон, добавляем виджет HTML/Код на рабочую область со следующим содержимым

  <link href="<%= UI.widget.filePath %>/elewise.elma365.ui.components/index.css" rel="stylesheet" />

• Готово, стили подключены

1.2 Подключение скриптов

1.2.1 Подключение скриптов для клиентских сценариев

• Переходим на вкладку Файлы, создаем папку elewise.elma365.ui.components в которую загружаем файл index.umd.js
• Переходим на вкладку Сценарии/Клиент, добавляем следующий код

  import ELMA365UIComponents from 'elewise.elma365.ui.components/index.umd.js'

• Готово, скрипты подключены, можно использовать готовые компоненты, например

  <div id="groupboxlist"></div>

  async function ready(): Promise<void> {
    const gbl = new ELMA365UIComponents.GroupBoxListV1({
        selector: "#groupboxlist",
    });
    const gb = gbl.push({
        id: "groupbox",
        title: "Панель с заголовком",
        content: '<div style="background-color: blue; height: 50px"></div>',
    });
  }

1.2.2 Подключение скриптов для виджета "Код"

• Переходим на вкладку Файлы, создаем папку elewise.elma365.ui.components в которую загружаем файл index.esm.js
• Переходим на вкладку Шаблон, добавляем виджет HTML/Код на рабочую область со следующим содержимым

  <script type="module">
     import ELMA365UIComponents from '<%= UI.widget.filePath %>/elewise.elma365.ui.components/index.esm.js'
  </script>

• Готово, скрипты подключены, можно использовать готовые компоненты внутри виджета HTML/Код, например

  <div id="groupboxlist"></div>
  
  <script type="module">
     import ELMA365UIComponents from '<%= UI.widget.filePath %>/elewise.elma365.ui.components/index.esm.js'
     function init(){
        const gbl = new ELMA365UIComponents.GroupBoxListV1({
           selector: "#groupboxlist",
        });
        const gb = gbl.push({
           id: "groupbox",
           title: "Панель с заголовком",
           content: '<div style="background-color: blue; height: 50px"></div>',
        });
     }
     init();
  </script>

2. Виджеты ELMA365 (Visual Studio Code)

Разработка библиотеки компонентов

1. npm i - восстановление зависимостей
2. npm run build - сборка библиотеки
3. npm run clean - очистка библиотеки
4. npm run develop - запуск среды разработки с веб-сервером

Правила

1. Правило №1
2. Правило №2
3. Правило №3

Описание библиотеки компонентов

GroupBoxListV1 (Панель с заголовком)

Пример №1

<link href="./elewise.elma365.ui.components/index.css" rel="stylesheet" />

<div id="groupboxlist"></div>

import ELMA365UIComponents from './elewise.elma365.ui.components/index.esm.js'
function init(){
  const gbl = new ELMA365UIComponents.GroupBoxListV1({
    selector: "#groupboxlist"
  });
  const gb = gbl.push({
    id: "groupbox",
    title: "Панель с заголовком",
    content: '<div style="background-color: blue; height: 50px"></div>'
  });
}
init();

Пример №2

<link href="./elewise.elma365.ui.components/index.css" rel="stylesheet" />

<div id="groupboxlist"></div>

import ELMA365UIComponents from './elewise.elma365.ui.components/index.esm.js'
function init(){
  const gbl = new ELMA365UIComponents.GroupBoxListV1({
    selector: "#groupboxlist"
  });
  const gb = gbl.push({
    id: "groupbox",
    title: "Панель с заголовком",
    content: function (parent) {
      const div = document.createElement("div");
      div.style.backgroundColor = "blue";
      div.style.height = "50px";
      parent.append(div);
    }
  });
}
init();