BPMN-JS/bmpn.io/coreUI /陣營

Question

資源

樣品回購：https://github.com/aaronscribner/bmpn-coreui-react

CoreUI：http://coreui.io/

問題 我似乎無法弄清楚如何設置在Core UI管理模板中使用此模型時，將模型設置爲正確的寬度和高度。有沒有人有任何嘗試在Core UI模板中嵌入此BPMN編輯器的經驗？

我也在學習React，現在我似乎正在撞牆。

Answer 1

的鏈接已斷開但我相信，該建模器卷繞在div元素內，因爲它們是在bpmn.io examples使用。

建模者通常纏繞成兩個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; 
} 

我只是說這兩個邊界，提示您與這兩個元素的尺寸。希望能幫助你。

注意：您仍然應該檢查建模者的代碼，您是否包含該包，是否也具有相同的元素名稱，如果不是，您需要找到他們的id名稱，例如通過瀏覽器檢查。