如何为Vaadin提示添加浅色主题和深色主题？

huangapple
go评论119阅读模式
英文:

How to add light theme and dark theme to Vaadin tooltip?

问题

在我的HTML中，我正在使用Vaadin提示组件，如下所示：

  1. <h1 id="heading-2">
  2.   salam
  3.   <vaadin-tooltip
  4.     theme="dark"
  5.     for="heading-2"
  6.     position="bottom-center"
  7.     text="Tooltip with position bottom-center"
  8.   ></vaadin-tooltip>
  9. </h1>
  11. <h1 id="heading-3">
  12.   salam
  13.   <vaadin-tooltip
  14.     theme="light"
  15.     for="heading-3"
  16.     position="bottom-end"
  17.     text="Tooltip with position bottom-end"
  18.   ></vaadin-tooltip>
  19. </h1>

我想根据主题更改工具提示的背景颜色。

tooltip.ts 目前看起来像这样：

  1. import { registerStyles } from "@vaadin/vaadin-themable-mixin";
  2. import { css } from "lit";
  4. registerStyles(
  5.   "vaadin-tooltip",
  6.   css`
  7.     :host[theme="dark"] {
  8.       font-family: var(--lumo-font-family);
  9.       // background-color: yellow;
  10.     }
  11.   `
  12. );
  14. registerStyles(
  15.   "vaadin-tooltip-overlay",
  16.   css`
  17.     :host {
  18.       font-family: var(--lumo-font-family);
  19.       // background-color: yellow;
  20.     }
  22.     :host::part(overlay) {
  23.       // background-color: red;
  24.     }
  25.   `
  26. );

我不知道如何根据工具提示具有的类样式化叠加层。我也不知道如何将类添加到叠加层。

我愿意在HTML中静态添加样式。

英文:

I'm using Vaadin tooltip component like this in my html:

  1.       &lt;h1 id=&quot;heading-2&quot;&gt;
  2.         salam
  3.         &lt;vaadin-tooltip
  4.           theme=&quot;dark&quot;
  5.           for=&quot;heading-2&quot;
  6.           position=&quot;bottom-center&quot;
  7.           text=&quot;Tooltip with position bottom-center&quot;
  8.         &gt;&lt;/vaadin-tooltip&gt;
  9.       &lt;/h1&gt;
  11.       &lt;h1 id=&quot;heading-3&quot;&gt;
  12.         salam
  13.         &lt;vaadin-tooltip
  14.           theme=&quot;light&quot;
  15.           for=&quot;heading-3&quot;
  16.           position=&quot;bottom-end&quot;
  17.           text=&quot;Tooltip with position bottom-end&quot;
  18.         &gt;&lt;/vaadin-tooltip&gt;
  19.       &lt;/h1&gt;

and I want to change the background color of the tooltip based on the theme.

The tooltip.ts currently looks like this:

  1. import { registerStyles } from &quot;@vaadin/vaadin-themable-mixin&quot;;
  2. import { css } from &quot;lit&quot;;
  4. registerStyles(
  5.   &quot;vaadin-tooltip&quot;,
  6.   css`
  7.     :host[theme=&quot;dark&quot;] {
  8.       font-family: var(--lumo-font-family);
  9.       // background-color: yellow;
  10.     }
  11.   `
  12. );
  14. registerStyles(
  15.   &quot;vaadin-tooltip-overlay&quot;,
  16.   css`
  17.     :host {
  18.       font-family: var(--lumo-font-family);
  19.       // background-color: yellow;
  20.     }
  22.     :host::part(overlay) {
  23.       // background-color: red;
  24.     }
  25.   `
  26. );

I don't know how to give styles to overlay based on the class that tooltip has. I also don't know how to add the class to the overlay.

I am open to adding the styles statically inside the html too.

答案1

得分: 2

Tooltip通过使用overlay-class属性来将类名传递到其叠加层的自定义机制实现：

  1. &lt;vaadin-tooltip overlay-class=&quot;custom-tooltip&quot; ...&gt;&lt;/vaadin-tooltip&gt;

相应的CSS规则需要放在全局CSS中（而不是像您的示例中使用registerStyles）：

  1. vaadin-tooltip-overlay.custom-tooltip::part(overlay) {
  2.   background: green;
  3. }
英文:

Tooltip implements a custom mechanism for forwarding class names to its overlay by using the overlay-class attribute:

  1. &lt;vaadin-tooltip overlay-class=&quot;custom-tooltip&quot; ...&gt;&lt;/vaadin-tooltip&gt;

The corresponding CSS rule needs to be put into the global CSS (instead of using registerStyles as in your example):

  1. vaadin-tooltip-overlay.custom-tooltip::part(overlay) {
  2.   background: green;
  3. }

huangapple
  • 本文由 发表于 2023年6月22日 18:43:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/76531081.html
  • css
  • html
  • typescript
  • vaadin
  • vite
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定