Как добавить палитру цветов в форму рельсов - PullRequest
0 голосов
/ 10 апреля 2020

Я создаю приложение rails и хочу, чтобы пользователь мог выбрать цвет в какой-то момент. Чтобы сделать это, я попытался реализовать палитру цветов в своей форме с помощью гема jquery -minicolors-rails.

Этот вопрос: Как добавить палитру цветов в Rails Active Admin? довольно похоже на то, что я хочу сделать, я думаю, но я не смог заставить его работать.

Вот что я попробовал:

Я добавил gem 'jquery-minicolors-rails' в Gemfile и запустил комплектацию install.

app / frontend / packs / application. js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("jquery")
require("jquery.minicolors")

require("./application.scss")
require("./application_front.js")
require("./application_back.js")


jQuery( function($) {
    $(".colorpicker").minicolors()
});

В этом файле я добавил строки, содержащие jquery и jquery .minicolors, а также фрагмент $(".colorpicker").minicolors().

app / frontend / packs / application.s css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/*
 *= require jquery.minicolors
 */

.turbolinks-progress-bar {
  background-color: #3355c5;
}

Наконец, моя форма:

<%= form_with(model: @my_model, local: true, html: {class: "form-group"}) do |f| %>
  <%= f.input :name, input_html: { class: 'colorpicker' } %>
  <%= f.submit("Confirm", id: "confirm_button") %>
<% end %>

Выход f.input провоцирует ошибку при достижении этой страницы undefined method 'input' for ..., поэтому я попытался заменить на f.text_field, например, но я просто получил простое текстовое поле, я не могу сделать На этой странице появится палитра цветов.

Я использую Rails 6.0.2.1 и Ruby 2.6.3

Спасибо за вашу помощь.

Если у вас есть другие значит для рекламы d сборщик цветов, не стесняйтесь сказать мне, я не привязан к jquery -minicolors gem.

1 Ответ

0 голосов
/ 10 апреля 2020

Если вы не привязаны к этому пакету, вы можете попробовать тот, который предоставлен html. Смотрите пример использования w3schools:

https://www.w3schools.com/tags/att_input_type_color.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...