Ресурсы
Пример репозитория: https://github.com/aaronscribner/bmpn-coreui-react
CoreUI: http://coreui.io/
Проблема Я не могу понять, как установить правильную ширину и высоту средства моделирования при использовании этого внутри административного шаблона Core UI. Есть ли у кого-нибудь опыт встраивания этого редактора BPMN в шаблон Core UI?
Я также изучаю React и, похоже, сейчас бьюсь головой о стену.
Ссылка не работает, но я предполагаю, что средство моделирования завернуто в элементы div, поскольку они используются в примеры bpmn.io.
Моделер обычно заворачивается в два элемента div, как показано в коде из примеров:
<div class="content" id="js-drop-zone">
<div class="message intro">
<div class="note">
Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
</div>
</div>
<div class="message error">
<div class="note">
<p>Ooops, we could not display the BPMN 2.0 diagram.</p>
<div class="details">
<span>cause of the problem</span>
<pre></pre>
</div>
</div>
</div>
<div class="canvas" id="js-canvas"></div>
</div>
В приведенном выше коде один элемент показан как js-drop-zone, который является контейнером перетаскивания, который позволяет вам перетаскивать в него файлы для загрузки. Внутренний элемент — это js-canvas, который является основной целью для рендеринга экземпляра средства моделирования.
Поскольку вы знаете имена этих элементов, вы можете создать новую таблицу стилей css и управлять их шириной и высотой без необходимости дополнительного кода реакции:
#js-drop-zone {
width: 100%;
border: solid 1px F00;
}
#js-canvas {
width: 100%;
border: solid 1px 0F0;
}
Я просто добавил две границы, чтобы намекнуть вам на размеры этих обоих элементов. Надеюсь, это поможет вам.
Примечание. Вы все равно должны проверить код моделлера, который вы включаете в пакет, если он также имеет такое же имя элементов, а если нет, вам нужно найти их имена идентификаторов, например. путем проверки с помощью браузера.
