MY SPELE
+380678383535
team@spele.ua

Блок в процессе

Что бы вывести блок внутри процесса нужно использовать следующий HTML код:

<div class="ob-block-details">
  <div class="block-caption">
    Block caption
  </div>
  <div class="">
    ...
  </div>
</div>

 

Группировка дата блоков осуществляется с помощью логического блока "блок деталей", он позволяет выстраивать дата блоки и объединять их в формы.

Такая структура будет полезна при построении форм заказа, задачи и т.д.. 

<div class="ob-block-details">
  <div class="block-caption">
    Block Caption
  </div>
  <div class="flex-wrap">
    <div class="ob-data-element js-data-element">
      <div class="data-view">
        <div class="el-caption">Sample Caption</div>
        <div class="el-value">
          Sample value
          <a class="ob-link-edit" href="#"></a>
        </div>
      </div>
      <div class="data-edit" style="display: none;">
        <a class="ob-link-delete" href="#"></a>
        <a class="ob-link-accept" href="#"></a>
        <textarea>Example value</textarea>
      </div>
    </div>
    <div class="ob-data-element js-data-element">
      <div class="data-view">
        <div class="el-caption">Sample Caption</div>
        <div class="el-value">
          Sample value
          <a class="ob-link-edit" href="#"></a>
        </div>
      </div>
      <div class="data-edit" style="display: none;">
        <a class="ob-link-delete" href="#"></a>
        <a class="ob-link-accept" href="#"></a>
        <textarea>Example value</textarea>
      </div>
    </div>
    <div class="ob-data-element js-data-element">
      <div class="data-view">
        <div class="el-caption">Sample Caption</div>
        <div class="el-value">
          Sample value
          <a class="ob-link-edit" href="#"></a>
        </div>
      </div>
      <div class="data-edit" style="display: none;">
        <a class="ob-link-delete" href="#"></a>
        <a class="ob-link-accept" href="#"></a>
        <textarea>Example value</textarea>
      </div>
    </div>
    <div class="ob-data-empty"></div>
    <div class="ob-data-empty"></div>
    <div class="ob-data-empty"></div>
  </div>
</div>

 

Блок ob-data-empty необходим для компенсации свободного места в некратных колонках.