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 %>">

但为什么要减少代码？ “更好”（有些人可能会说）的目标是拥有更可读的代码，在这种情况下，我认为帮助者将是更好的选择：

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

并定义辅助方法random_color。

代码不是“老派”取决于你在Ruby中做“随机”颜色选择，还是在JavaScript上做，我认为没有其他办法。

Answer 2

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

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为空时，这将生成一个新的随机排序数组。你肯定有选择，哪个更好的解决方案取决于你的目标以及你在你的情况下的感觉。

Answer 3

所以，显然聚合物不喜欢内联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%>">

问题很接近，但欢迎任何改进！

聚合物纸卡上的随机颜色

3 个答案: