删除 shinydashboardPlus::carousel 中指标的阴影背景和边框

Question

我正在使用 {shinydashboard} 和 {shinydashboardPlus} 来显示 carousel。当我点击旋转木马指示器时，它们显示有阴影背景和蓝色边框（在 shinydashboardPlus::carousel 的早期版本中不是这种情况，我在下面的代码中添加了使用的包版本）。我在 Firefox 和 EDGE Chromium 中检查过这个。我想同时删除（框和边框）并且不知道如何调整 CSS。我确实已经设法隐藏了 .carousel-caption，但是在使用 DOM 检查器玩了一段时间之后，我没能对旋转木马指示器周围的小盒子做同样的事情。

我的问题是识别具有阴影背景和蓝色边框的对象的 class 作为属性。一旦我弄明白了，应该很容易改变它。

感谢任何帮助。

# Windows 10 64bit, R 4.1.0
library(shiny) # 1.6
library(shinydashboard) # 0.7.1
library(shinydashboardPlus) # 2.0.3

shinyApp(ui = dashboardPage(

  title = "Test",
  
  header  = dashboardHeader(),
  
  sidebar = dashboardSidebar(disable = TRUE,
                             width = "0px",
                             collapsed = TRUE),
  
  body = dashboardBody(
    
    tags$head(
      tags$style(HTML("
      .carousel-caption {
        display: none !important;      
      }
      "))
    ),
    
    carousel(
      id = "mycarousel",
      carouselItem(
        caption = "Item 1",
        tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
      ),
      carouselItem(
        caption = "Item 2",
        tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
      )
    )
    ) # close dashboardBody
  ), # close dashboardPage 
server = function(input, output) {}
)

Answer 1

这是由于来自 bootstrap 的可访问性插件，闪亮的人决定从 1.6 开始添加。之前没有问题。这很烦人。我试图让他们有一个选择加载或不加载此插件的选项，但他们拒绝。您可以阅读 this issue.

为了解决您的问题，我添加了一些 CSS 样式：

# Windows 10 64bit, R 4.1.0
library(shiny) # 1.6
library(shinydashboard) # 0.7.1
library(shinydashboardPlus) # 2.0.3

shinyApp(ui = dashboardPage(
  title = "Test",
  header  = dashboardHeader(),
  sidebar = dashboardSidebar(disable = TRUE,
                             width = "0px",
                             collapsed = TRUE),
  
  body = dashboardBody(
    
    tags$head(
      tags$style(HTML("
      .carousel-caption {
        display: none !important;      
      }
      a.carousel-control:focus {
        outline: none;
        /*change background-image to none if want to remove black bars on right*/
        background-image: linear-gradient(to right, transparent 0px, rgba(0,0,0,0.5) 100%);;
        box-shadow: none;
      } 
      a.carousel-control.left:focus {
        /*change background-image to none if want to remove black bars on left*/
          background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
      }
      .carousel-tablist-highlight.focus {
        outline: none;
        background-color: transparent;
      }
      "))
    ),
    carousel(
      id = "mycarousel",
      carouselItem(
        caption = "Item 1",
        tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
      ),
      carouselItem(
        caption = "Item 2",
        tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
      )
    )
  ) # close dashboardBody
), # close dashboardPage 
server = function(input, output) {}
)

第一条规则是您添加的。第二条和第三条规则是去掉点击左右栏时丑陋的框，但是我没有去掉周围的黑色阴影。您可以按照我作为评论留下的说明删除它们。最后一条规则是你真正想要的。不在意左右栏的只留下最后一个。

删除 shinydashboardPlus::carousel 中指标的阴影背景和边框

Remove shaded background and border of indicators in shinydashboardPlus::carousel

r

shiny

shinydashboard

shinydashboardplus