Как сделать наложение текста на изображение стабильным независимо от изменения размера?

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

Я сделаю все возможное, чтобы найти чистое решение проблемы, с которой вы столкнулись. Возможно, это не стандартное c решение, но я надеюсь, что оно будет актуальным.

Вы пытаетесь наложить наложение не на какое-либо изображение, а конкретно на зависимый от состояния значок с привязкой к контексту . В отношении этого варианта использования существуют некоторые ограничения UX:

• текст должен состоять максимум из 2 или 3 символов (9, 9+, 99, 99 +),
• значок и это разные состояния должны быть очевидными.

Справедливо полагаться на CSS для решения этой проблемы. Но есть способ попроще: обычный и простой SVG. Что, кстати, рекомендуется Tailwind.

Я заметил, что вы используете 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 To 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 Tailwind, как описано в документации Tailwind .

Как я сказал в начале, этот ответ может быть не общим c, но я думаю это решение простое, потому что:

• оно (кажется) решает вашу проблему,
• вводит 0 зависимостей,
• не полагается ни на какие уловки,
• он гарантирует, что значок вашей тележки будет вести себя одинаково везде.