Rails FormBuilders 및 TailwindCSS

TailwindCSS의 전체 내용은 요소의 스타일을 직접 설정하기 위해 태그에 대량의 실용 프로그램 종류를 추가하는 것이다.물론 이렇게 하면 최종적으로 표시에 많은 실용 프로그램 종류를 추가할 수 있다는 것이 문제다.예를 들면, 많은 과정들이 있다.여러 가지 단점, 어둠의 패턴, 그리고 당신이 가진 것을 고려할 때, 때로는 수십 개가 있을 수도 있다.
이것은 사람을 짜증나게 할 수 있다. 특히 표의 경우 표의 모든 요소가 모든 종류를 적용할 수 있다. 이런 종류는 표에서 10여 개의 요소를 반복해야 한다.나는 아무도 이렇게 할 시간이 없다는 것을 확신한다.
폼의 모든 필드가 일치하기를 원하지만, 사이트의 모든 폼이 일치하기를 원합니다.만약 text_field 라벨의 외관을 바꾸고 싶다면, 한 곳에서 변화를 하고, 각 곳에서 변화의 반응을 보아야 한다.잠깐만요.
Tailwind는 중복을 줄이기 위해 Dell의 관점extract components을 사용하도록 권장합니다.Rails에서 우리는 partials의 개념을 사용하여 서로 다른 상하문 사이에서 보기 코드를 공유할 수 있다.만약 우리가 폼이 있다면, 우리는 그것을 하나의 부분으로 추출하여 new 보기와 edit 보기에서 같은 폼을 사용할 수 있습니다.
이것은 매우 멋지지만, 우리는 여전히 이 폼의 모든 요소에 모든 실용 프로그램 종류를 복제해야 하며, 서로 다른 폼 사이에서 요소를 공유할 수 없다.
별로 안 건조해요.

템플릿 디자이너
그러나 Rails는 여러 해 동안 이 일을 해 왔다. 분명히 매우 간단하고 심사숙고한 해결 방안을 통해 이 확실한 문제를 해결했다.FormBuilders.
Google은TailwindCSS 유틸리티 클래스로 기본 행동을 추가할 수 있습니다. 그리고 Google이 FormBuilder 작성할 때마다 Google은 Google 사이트의 모든 다른 텍스트 필드와 같은 양식의 텍스트 필드를 얻을 수 있습니다.
다음은 이 점을 어떻게 하는가이다(Rails 응용 프로그램에 TailwindCSS가 있다고 가정하면 본문의 범위를 넘어선다).

Tailwind forms 플러그인 설치
좋은 시작을 하자install the Tailwind forms plugin.이것은 우리에게 기존의 좋은 표를 제공할 뿐만 아니라, 우리가 더욱 양식을 디자인할 수 있도록 허락할 것이다.

양식 생성기 만들기
나는 폼 생성기를 저장하기 위해 f.text_field :whatever에 폴더를 만드는 것을 좋아한다.app의 하위 폴더에 있는 파일은 자동으로 불러옵니다. 만약 우리가 나중에 더 많은 폼 생성기를 추가하기로 결정한다면 합리적인 위치에 놓을 것입니다.
기본 양식 생성기는 다음과 같습니다.

  class TailwindFormBuilder < ActionView::Helpers::FormBuilder
    def text_field(method, opts={})
      default_opts = { class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 #{'border-2 border-red-500' if @object.errors.any?}" }
      merged_opts = default_opts.merge(opts)
      super(method, merged_opts)
    end
  end

우리는 app 에서 계승된 새로운 종류를 만들고, 그것이 제공한 ActionView::Helpers::FormBuilder 방법을 계속 다시 쓴다.Google 버전에서는 기본적으로 제공되는 옵션 산열에 Tailwind 클래스 이름을 추가합니다.이것은 구체적인 상황에 따라 클래스를 설정할 수 있지만, 이것은 상당히 거친 실현이다. 따라서 클래스를 덮어쓰려면 최종 요소에 적용하고 싶은 모든 클래스를 제공해야 한다.마지막으로, 우리text_field는 원시적super을 전달하고, 새로 파손된 method를 우리가 덮어쓴 원시적opts 방법에 산열하여 그것을 완성하도록 했다.
더욱 복잡한 해결 방안은 독자들에게 연습으로 남겨 두었다.

FormBuilder 사용
그런 다음 양식 생성기를 text_field에 전달하기만 하면 됩니다.

  <main class="p-12 mx-auto text-gray-800 max-w-7xl">
    <%= form_with model: @widget, builder: TailwindFormBuilder, class: "mt-6" do |f| %>
      <%= f.label :reference %>
      <%= f.text_field :reference, placeholder: "Your reference" %>
      <div class="pt-5">
        <%= f.submit "Begin" %>
      </div>
    <% end %>
  </main>

폼을 렌더링하고 텍스트 필드를 볼 때, 멋진 TailwindCSS 클래스를 볼 수 있습니다.

<input class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indiogo-300 focus:ring focus:ring-indiogo-200 focus:ring-opacity-50 " placeholder="Your reference" type="text" name="widget[reference]" id="widget_reference">

우리는 합리적인 기본값인 TailwindCSS 스타일을 적용하고자 하는 모든 Rails 폼 표시를 깨끗이 씻고 이 과정을 반복할 수 있습니다.

TailwindFormBuilder를 기본값으로 설정
폼 생성기를 기본값으로 설정하는 것도 쉽다.Dellform_with에서는 다음과 같이 기본값으로 설정할 수 있습니다.

ActionView::Base.default_form_builder = TailwindFormBuilder

그리고 보기에서 ApplicatioHelper 호출을 삭제할 수 있습니다. 기본적으로 모든 폼은 양식이 좋은 builder: TailwindFormBuilder 를 사용합니다.

결론
이것은 분명히 Rails의Form Builder가 무엇을 할 수 있는지, 그리고 CSS 실용 프로그램 종류의 장애를 없애는 데 어떻게 도움을 줄 수 있는지 설명하는 아주 간단한 예이다.만약 대상에 오류가 있다면, 우리는 form_with 의 테두리를 빨간색으로 바꾸는 등 깔끔한 일을 할 수 있다.모든 요소의 태그와 내부 오류 메시지를 포함하는 HTML 블록을 만들기 위한 해독text_field도 시작할 수 있습니다.지금까지 나는'모든 것이 폼 생성기에 있다'와'폼 생성기에 아무런 내용이 없다'사이의 균형을 찾으려고 노력하고 있다.위의 표는 여전히 자신의 일부 간격을 관리하고 있다는 것을 알 수 있을 것이다. 이것은 text_area로 이동할 가치가 없을 수도 있지만, 지금까지 나는 content_tag와 TailwindFormBuilder를 분리해 왔다. 예를 들어, 나는 매우 만족스럽다고 생각한다.
현재 폼의 모든 요소에 label 개의 오류 메시지를 추가해서 사용자에게 좋은 내연 오류 메시지를 보여 주려고 시도하고 있습니다.처음에는 잘못된 표시가 표 자체에 나타나지 않기 때문에 손이 닿을 것 같았다.그러나 이들은 폼 생성기에 적용되기 때문에 폼에 사용되는 각각text_field에 일치하게 적용된다.이것이 바로 이런 형식으로 잘못을 처리하는 방식이다.나는 지금까지 매우 좋아했다.
FormBuilder는 Rails 애플리케이션에 유틸리티 CSS 클래스를 적용하는 좋은 방법입니다.

추천서

The Rails FormBuilder documentation

Samuel Mullen's excellent write up

Tailwind Forms Examples