[Rails] Bootstrap 사용 확인 대화 상자 정보

3415 단어 Bootstrap3Rails

개시하다


이번 확인 대화상자를 표시할 때 bootstrap3을 사용했기 때문에 확인 대화상자를 Bootstrap 규격으로 만들었습니다.그래서 제가 그 도입 방법을 설명해 드릴게요.
버전 사용Rails 5.2.3.

가져오기 방법


우선 젬부터 시작해 이번에는 부츠트랩3'jquery-rails''bootstrap-sass'다.(Rails 버전 5.0 이후 필요'jquery-rails'대화 상자의 표시 사용을 확인합니다gem'data-confirm-modal'.
Gemfile
gem 'bootstrap-sass'
gem 'data-confirm-modal'
gem 'jquery-rails'
다음application.js은 파일에 다음과 같은 설명을 한다.
application.js
//= require bootstrap-sprockets
//= require data-confirm-modal
마지막으로 application.scss에서 @import를 사용하여 기술하였다.
application.scss
@import "bootstrap-sprockets";
@import "bootstrap";
참고: 기록은 Rails 버전에 따라 다릅니다.따라서 필요한 경우 Gem 등을 가져오십시오.

사용법


View 파일link_to에 기술data: { confirm: "記述名", cancel: '記述名', commit: '記述名'}, title: '記述名'}.title:{}에서 발췌하십시오.
기술 예는 다음과 같다.
test.html.haml
.btnstyle__syosai
 = link_to "削除", "/videos/#{video.id}", method: :delete, data: { confirm: "本当に削除してもよろしいですか?", cancel: 'やめる', commit: '削除する'}, title: '削除確認画面',class: "btn btn-default btn-block"
다음과 같이 표시됩니다.

최후


한정적이지만 Bootstrap을 사용하면 기본 외관보다 이게 더 좋아요.
아래도 참고해주세요.
https://fuchiaz.com/rails-gem-data-confirm-modal/

좋은 웹페이지 즐겨찾기