Lookbook
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class='nested-form-input-container' data-controller='nested-form'>
  <template data-nested-form-target='template'>
    <div class='d-flex align-items-center nested-form-wrapper my-1' data-new-record='true'>
      <div style='width: 90%'>
        <div class='d-flex'> <input class='form-control w-50 mx-1'/> <input class='form-control w-50 mx-1'/></div>
      </div>
      <div class='d-flex justify-content-end' style='width: 10%'>
        <div class='delete' data-action='click->nested-form#remove'>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 12 14" fill="none">
            <path d="M10.0564 1.71173H7.70277V1.28379C7.70277 0.574766 7.128 0 6.41897 0H4.70725C3.99822 0 3.42345 0.574766 3.42345 1.28379V1.71173H1.06983C0.478989 1.71173 0 2.19072 0 2.78156V3.63742C0 3.87377 0.19158 4.06535 0.427932 4.06535H10.6983C10.9346 4.06535 11.1262 3.87377 11.1262 3.63742V2.78156C11.1262 2.19072 10.6472 1.71173 10.0564 1.71173ZM4.27932 1.28379C4.27932 1.0479 4.47135 0.855863 4.70725 0.855863H6.41897C6.65487 0.855863 6.84691 1.0479 6.84691 1.28379V1.71173H4.27932V1.28379ZM0.812107 4.92121C0.794011 4.92121 0.776102 4.92489 0.759467 4.93201C0.742832 4.93914 0.727816 4.94956 0.715328 4.96266C0.702841 4.97576 0.693141 4.99126 0.686818 5.00821C0.680494 5.02517 0.677678 5.04323 0.678539 5.06131L1.03158 12.471C1.06421 13.1568 1.62748 13.6938 2.31377 13.6938H8.81245C9.49874 13.6938 10.062 13.1568 10.0946 12.471L10.4477 5.06131C10.4485 5.04323 10.4457 5.02517 10.4394 5.00821C10.4331 4.99126 10.4234 4.97576 10.4109 4.96266C10.3984 4.94956 10.3834 4.93914 10.3668 4.93201C10.3501 4.92489 10.3322 4.92121 10.3141 4.92121H0.812107ZM7.27484 5.99104C7.27484 5.75461 7.46634 5.56311 7.70277 5.56311C7.9392 5.56311 8.1307 5.75461 8.1307 5.99104V11.5542C8.1307 11.7906 7.9392 11.9821 7.70277 11.9821C7.46634 11.9821 7.27484 11.7906 7.27484 11.5542V5.99104ZM5.13518 5.99104C5.13518 5.75461 5.32668 5.56311 5.56311 5.56311C5.79954 5.56311 5.99104 5.75461 5.99104 5.99104V11.5542C5.99104 11.7906 5.79954 11.9821 5.56311 11.9821C5.32668 11.9821 5.13518 11.7906 5.13518 11.5542V5.99104ZM2.99552 5.99104C2.99552 5.75461 3.18702 5.56311 3.42345 5.56311C3.65989 5.56311 3.85138 5.75461 3.85138 5.99104V11.5542C3.85138 11.7906 3.65989 11.9821 3.42345 11.9821C3.18702 11.9821 2.99552 11.7906 2.99552 11.5542V5.99104Z" fill="var(--gray-color)"></path>
          </svg>
        </div>
      </div>
    </div>
  </template>
  <div class='titles'>
    <div class="w-50 mx-1">Contact name</div>
    <div class="w-50 mx-1">Contact email</div>
  </div>
  <div class='d-none'>
  </div>
  <div data-nested-form-target='target'></div>
  <div class='add-another-object' data-action='click->nested-form#add'>
    <svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 8 8" fill="none">
      <path d="M0.703125 3.29688H3.29688V0.703125C3.29688 0.314797 3.61167 0 4 0C4.38833 0 4.70312 0.314797 4.70312 0.703125V3.29688H7.29688C7.6852 3.29688 8 3.61167 8 4C8 4.38833 7.6852 4.70312 7.29688 4.70312H4.70312V7.29688C4.70312 7.6852 4.38833 8 4 8C3.61167 8 3.29688 7.6852 3.29688 7.29688V4.70312H0.703125C0.314797 4.70312 0 4.38833 0 4C0 3.61167 0.314797 3.29688 0.703125 3.29688Z" fill="var(--primary-color)"></path>
    </svg>
    <div>
      Add another contact
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
render NestedFormInputsComponent.new(object_name: object_name) do |c|
  c.header do
    content_tag(:div, 'Contact name', class: 'w-50 mx-1') + content_tag(:div, 'Contact email', class: 'w-50 mx-1')
  end
  c.template do
    raw "<div class='d-flex'> <input class='form-control w-50 mx-1'/> <input class='form-control w-50 mx-1'/></div>".html_safe
  end
end

No notes provided.

Param Description Input

—