聚合物纸卡上的随机颜色

Question

我刚开始使用 Polymer（带有 Rails 后端），我想知道，我可以在聚合物元素上应用样式，如普通 html 吗？

我的目标是制作一个循环，让每张卡片都有不同的标题背景颜色。

我知道我可以定义我的不同自定义样式并创建一个我的类数组以在循环期间选择一个，但我只想知道是否有办法用更少的代码做一些事情，例如：

colors = ['red','blue','green']

<paper-card heading="<%= foo.name %>" elevation="3" style="--paper-card-header-color:<%= colors.sample %>">

也许它太老式了。

有什么线索吗？

Answer 1

该代码有效吗？

如果是这样，同样的代码更少：

<paper-card heading="<%= foo.name %>" elevation="3" style="--paper-card-header-color:<%= %w(red blue green).sample %>">

但是为什么你想要更少的代码呢？ “更好”（有人可能会说）的目标是拥有更易读的代码，在这种情况下，我认为 helper 会是更好的选择：

<paper-card heading="<%= foo.name %>" elevation="3" style="--paper-card-header-color:<%= random_color %>">

并定义一个辅助方法random_color。

代码不是“老派”，由你在 Ruby 中进行“随机”颜色选择，或者在 JavaScript 上进行，我认为没有其他方法。

Answer 2

所以， 显然 Polymer 不喜欢内联 CSS。

我来了，我

为了记录，我试图解决这个问题，我找到了这个（丑陋的）解决方案：（我认为我们可以使用 javascript 以更好的方式做到这一点。）

colors_key = ['leonardo','donatello','mickelangelo','raphael','casey']

colors = {colors_key[0]=>'blue',colors_key[1]=>'purple',colors_key[2]=>'orange',colors_key[3]=>'red',colors_key[4]=>'green'}

<style is="custom-style"> <% colors.each do |k,v| %> <%= ".#{k}" %> { --paper-card-header-color: <%= "#{v}" %> } <% end %> </style>

<paper-card heading="<%= foo.name %>" class="<%=colors_key.sample%>">

问题已结束，但欢迎任何改进！

Answer 3

您可以创建自定义纸卡标题颜色数组，如下所示：

colors = ['red','blue','green']

<style is="custom-style">
  paper-card {
  }
  <% color in colors do %>
    .<%= color %> { --paper-card-header-color: <%= color %> }
  <% end %>
</style>

这将产生这些自定义颜色样式：

<style is="custom-style">
  <% color in colors do %>
    .red { --paper-card-header-color: <%= red %> }
    .blue { --paper-card-header-color: <%= blue %> }
    .green { --paper-card-header-color: <%= green %> }
  <% end %>
</style>

这适用于以 CSS 命名的颜色。如果要使用全范围的 CSS 颜色，可以检测#XXXXXX 格式并适当命名颜色样式：

colors = ['red','blue','green','#c0c0c0','B0306F']

<style is="custom-style">
  paper-card {
  }
  <% colors.each_with_index do |color,index| %>
    <% if color =~ /^#?[0-9a-f]$/i %>
      <% color = color.gsub(/\D+/, '').downcase %>
      <% colors[index] = color %>
      .color-<%= color %> { --paper-card-header-color: #<%= color %> }
    <% else %>
      .<%= color %> { --paper-card-header-color: <%= color %> }
    <% end %>
  <% end %>
</style>

请注意，在此示例中，colors 数组被修改为颜色类的名称。如果需要，可以保留一个单独的颜色类名称数组。

您可以在处理卡片时应用这些样式，方法是应用适当的颜色类：

<% cards.each do |card| %>
  <paper-card heading="<%= card.title %>" class="<%=colors.sample%>">
<% end %>

如果您想在每次循环中应用随机颜色，您使用Array#sample 的方法是非常明智和智能的编码。 Array#sample 方法将为您提供列表中的伪随机颜色；但是，您可能会比您喜欢的更频繁地重复颜色，尤其是对于较小的颜色列表。

例如，我运行了这段代码：

colors = ['red','blue','green']
20.times { puts "#{colors.sample}" }

我得到了这个输出：

green
green
green
blue
red
green
red
green
blue
green
red
red
blue
green
blue
red
red
green
red
blue

如果您希望有独特的颜色，但以随机顺序排列，您可以使用Array#shuffle 重新随机排列颜色列表：

random_colors = colors.shuffle

<% cards.each do |card| %>
  <paper-card heading="<%= card.title %>" class="<%= random_colors.shift %>">
<% end %>

如果您要制作的卡片多于颜色，您可能希望将random_colors 设置为足够大以容纳整个卡片系列：

random_colors = colors.shuffle.cycle((cards.length.to_f / colors.length.to_f).ceil).inject([]) {|array, color| array << color }

<% cards.each do |card| %>
  <paper-card heading="<%= card.title %>" class="<%= random_colors.shift %>">
<% end %>

在这种情况下，如果 cards 是 7 张卡片的运行，您将有一个由 9 种颜色组成的 random_colors 数组，将 3 种随机颜色重复 3 次。

您还可以重置循环内的random_colors 数组以进行多次随机排序的运行：

colors = ['red','blue','green']
random_colors = []

<% cards.each do |card| %>
  random_colors = colors.shuffle if random_colors.length == 0
  <paper-card heading="<%= card.title %>" class="<%= random_colors.shift %>">
<% end %>

这将在每次random_colors 为空时生成一个新的随机排序数组。你肯定有选择，哪个是更好的解决方案取决于你的目标和你觉得适合你的情况。