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

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。这是Tailwind推荐的方式。

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

<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 To Hiccup将其转换为打ic：

[: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中的说明保留Tailwind's documentation Tailwind类。

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

• （似乎）解决了您的问题，
• 它引入了0个依赖项，
• 它不依赖任何技巧，
• 确保您的购物车图标到处都一样。