自定义 CSS 在闪亮的盒子里

Question

我正在尝试创建一个 box，其中包含左上角的标题和右上角的小图标。 HTML 看起来像这样：

<div class="box-header">
  <h3 class="box-title">TOTAL DAY</h3>
  <img class="box-title" src="https://www.gravatar.com/avatar/4ab40c688a7362255373fc5f185b9698?s=48&amp;d=identicon&amp;r=PG&amp;f=1">
</div>

具有以下 css 更改：

.box-header .box-title{
  width: 50%;
  float: left;
}

img{
  object-fit: contain;
  object-position: right;
  height: 2vh;
}

结果看起来像这样：

添加 css 很容易，但是有没有办法在 shiny 中添加这样的 <img>？

Answer 1

有点解决了我自己的问题..哎呀

我在 box 函数中使用了这个：

title = HTML("<h3 class=box-title>TOTAL DAY</h3><img class=box-title src=https://www.gravatar.com/avatar/4ab40c688a7362255373fc5f185b9698?s=48&d=identicon&r=PG&f=1></img>")

将 HTML 包装在 HTML() 函数中允许 shiny 读取 HTML 作为代码而不是字符

自定义 CSS 在闪亮的盒子里

custom CSS in shiny box

html

r

shiny