【Rails】 form_with를 Slim으로 쓰고 CheckBox를 가로로 정렬했습니다.

소개

Rails에서 템플릿에 slim을 사용한 form_with의 구현으로 약간 고전했으므로, 정리해 보았습니다!
이번에는 CSS 프레임 워크에 Spectre를 사용하고 있습니다.
(Bootstrap에서도 똑같이 할 수 있다고 생각합니다.)

Slim에 좀처럼 익숙하지 않습니다 ...

환경

Ruby 2.6.3

Rails 5.2.3

일반 form_with를 작성하는 방법

hoge.html.slim

  section.hoge-list
    h4 メール配信を希望の方はチェック
    = form_with(model: [:ops, @user], local: true) do |f|
      .form-group
        = f.check_box :hoge_column, class: 'form-control'
        = f.label :hoge_column, '配信する', class: 'form-label'
      .form-group
        = f.submit

브라우저에서는 다음과 같이 된다

이것은 UI가 좋지 않기 때문에 스타일을 정돈해야합니다.

들여쓰기, Spectre를 사용하여 스타일을 정돈

hoge.html.slim

  section.hoge-list
    h4 メール配信を希望の方はチェック
    = form_with(model: [:ops, @user], local: true) do |f|
      .form-group
        = f.label :hoge_column, class: 'form-label form-switch'
          = f.check_box :hoge_column, class: 'form-control'
          |
          i.form-icon
          strong 配信する
        br
      .form-group
        = f.submit

브라우저에서는 다음과 같이 된다

이제 UI가 좋아지고 CSS를 처리하는 번거로움을 줄일 수 있습니다.