无论大小大小，如何使图像上的文本覆盖稳定？

Question

我有一个购物车按钮，有一个手推车图像和一个数字(项目)，我试图定位在图像的上方使用顺风。我使用了一个clojurescript包装器作为顺风库，下面是代码：

(defn show-cart-btn []
  [:button (tw style/button [:inline-flex :justify-between :p-2] {:on-click #(e/cart-shown (not @s/cart-shown?)) :title (str @s/cart-count " item(s) in cart")})
   ;;[:div "Cart"]
   [:img (tw [:w-20] {:src "img/svg/icon-cart.svg"})]
   [:div (tw [:absolute :ml-6 :mt-3 :font-bold]) @s/cart-count]]) ;; it's absolute and there are margins. 

注意我定位文本的最后一行，“购物车计数”显示为绝对。但问题是，调整网页大小会将文本的位置移动到购物车的顶部，但当网页大小发生变化时，我希望它包含在购物车图像中。我怎么能这么做？

​

​

Answer 1

我将尽我最大的努力为你所面临的问题提供一个干净的解决方案。这可能不是一个通用的解决方案，但我希望它能达到目的。

您并不是要在任何图像上放置覆盖，而是特别是在状态依赖、上下文绑定的图标上。对于这个用例，有一些UX约束：

• 文本必须最大为2个或3个字符(9，9+，99，99+)，
• 图标和不同的状态必须是不言自明的。

依靠CSS来解决这个问题是公平的。但是有一种更简单的方法:常规的和简单的SVG。顺带一提，这是尾风公司推荐的。

我注意到您正在使用HeroIcon UI购物车图标。这是图标的SVG，在MIT许可下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <path class="heroicon-ui" d="M17 16a3 3 0 1 1-2.83 2H9.83a3 3 0 1 1-5.62-.1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 1v1h14a1 1 0 0 1 .9 1.45l-4 8a1 1 0 0 1-.9.55H5a1 1 0 0 0 0 2h12zM7 12h9.38l3-6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>

让我们使用Html到Hiccup将其转换为hiccup

[:svg {:height "24", :width "24", :viewBox "0 0 24 24"}
 [:path {:class "heroicon-ui"
         :d     "M17 16a3 3 0 1 1-2.83 2H9.83a3 3 0 1 1-5.62-.1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 1v1h14a1 1 0 0 1 .9 1.45l-4 8a1 1 0 0 1-.9.55H5a1 1 0 0 0 0 2h12zM7 12h9.38l3-6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"}]]

我们现在可以：

• 将viewBox宽度从24更改为48，
• 将图标宽度从24更改为48，
• 添加文本SVG元素，
• 让它成为一个组件。

(defn CartIconCounter
  "HeroIcon SVG icon from https://github.com/sschoger/heroicons-ui/blob/master/svg/icon-cart.svg"
  [props amount]
  [:svg (merge {:height "24", :width "48", :viewBox "0 0 48 24"}
               props)
   [:path {:class "heroicon-ui"
           :d     "M17 16a3 3 0 1 1-2.83 2H9.83a3 3 0 1 1-5.62-.1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 1v1h14a1 1 0 0 1 .9 1.45l-4 8a1 1 0 0 1-.9.55H5a1 1 0 0 0 0 2h12zM7 12h9.38l3-6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"}]
   [:text {:class     "icon-text font-bold fill-current"
           :font-size "0.75rem"
           :y         "18"
           :x         "22"}
    (str amount)]])

(defn show-cart-btn []
  [:button (tw style/button [:inline-flex :justify-between :p-2]
               {:on-click #(e/cart-shown (not @s/cart-shown?))
                :title    (str @s/cart-count " item(s) in cart")})
   [CartIconCounter {:style {}} @s/cart-count]])

您可以使用<text>类自定义icon-text元素。确保保持fill-current尾风类，如顺风文献中所解释的那样。

正如我在一开始所说的，这个答案可能不是一个通用的答案，但我认为这个解决方案很简单，因为：

• 它似乎解决了你的问题，
• 它引入了0依赖项，
• 它不依赖任何诡计，
• 它确保您的购物车图标将在任何地方都表现出相同的行为。