[Rails] Bootstrap 사용 확인 대화 상자 정보
3415 단어 Bootstrap3Rails
개시하다
이번 확인 대화상자를 표시할 때 bootstrap3을 사용했기 때문에 확인 대화상자를 Bootstrap 규격으로 만들었습니다.그래서 제가 그 도입 방법을 설명해 드릴게요.
버전 사용Rails 5.2.3
.
가져오기 방법
우선 젬부터 시작해 이번에는 부츠트랩3'jquery-rails'
와 'bootstrap-sass'
다.(Rails 버전 5.0 이후 필요'jquery-rails'
대화 상자의 표시 사용을 확인합니다gem'data-confirm-modal'
.
Gemfilegem '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/
Reference
이 문제에 관하여([Rails] Bootstrap 사용 확인 대화 상자 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/dir_sh0606/items/26add84c7236aac6d3e4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
gem 'bootstrap-sass'
gem 'data-confirm-modal'
gem 'jquery-rails'
//= require bootstrap-sprockets
//= require data-confirm-modal
@import "bootstrap-sprockets";
@import "bootstrap";
.btnstyle__syosai
= link_to "削除", "/videos/#{video.id}", method: :delete, data: { confirm: "本当に削除してもよろしいですか?", cancel: 'やめる', commit: '削除する'}, title: '削除確認画面',class: "btn btn-default btn-block"
Reference
이 문제에 관하여([Rails] Bootstrap 사용 확인 대화 상자 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/dir_sh0606/items/26add84c7236aac6d3e4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)