Styles to use Bootstrap 4

[Wellyson-Lopes]

Hello @josefarias, congratulations on your work, it really turned out great and I will use it in my project. However, I would like to know from you how I can configure the SCSS styles to use Bootstrap 4. Thank you and congratulations on your project.

[josefarias]

Hey @Wellyson-Lopes, thanks!

I'm not sure I completely understand. If you mean you want to use Bootstrap classes on the combobox — this is not documented yet but it's possible by customizing the appropriate elements. Here's a test for it in lieu of docs:

hotwire_combobox/test/dummy/app/views/comboboxes/custom_attrs.html.erb

Lines 1 to 20 in 6fff047

	<%= combobox_tag "state", State.all, label: "state" do |combobox| %>
	<% combobox.customize_fieldset class: "custom-class--fieldset", data: { customized_fieldset: "" } %>
	<% combobox.customize_label class: "custom-class--label", data: { customized_label: "" } %>
	<% combobox.customize_hidden_field class: "custom-class--hidden_field", data: { customized_hidden_field: "" } %>
	<% combobox.customize_main_wrapper class: "custom-class--main_wrapper", data: { customized_main_wrapper: "" } %>
	<% combobox.customize_input class: "custom-class--input", data: { customized_input: "" } %>
	<% combobox.customize_handle class: "custom-class--handle", data: { customized_handle: "" } %>
	<% combobox.customize_listbox class: "custom-class--listbox", data: { customized_listbox: "" } %>
	<% combobox.customize_dialog class: "custom-class--dialog", data: { customized_dialog: "" } %>
	<% combobox.customize_dialog_wrapper class: "custom-class--dialog_wrapper", data: { customized_dialog_wrapper: "" } %>
	<% combobox.customize_dialog_label class: "custom-class--dialog_label", data: { customized_dialog_label: "" } %>
	<% combobox.customize_dialog_input class: "custom-class--dialog_input", data: { customized_dialog_input: "" } %>
	<% combobox.customize_dialog_listbox class: "custom-class--dialog_listbox", data: { customized_dialog_listbox: "" } %>
	<% end %>
	<%= form_with model: Movie.new do |f| %>
	<%= f.combobox :rating, Movie.ratings, label: "rating" do |combobox| %>
	<% combobox.customize_fieldset class: "custom-class-for-form", data: { custom_data_for_form: "" } %>
	<% end %>
	<% end %>

If you mean you just want to use SCSS to style the combobox, I'd refer you to the Styling section of the docs in https://hotwirecombobox.com/. It should just be a matter of overriding the default classes with plain CSS (or SCSS).

Closing for now but let me know if this doesn't work for you, or if I misunderstood!