0

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

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

任何帮助表示赞赏。

# 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) {}
)

在此处输入图像描述

4

1 回答 1

3

这是由于自 1.6 以来闪亮的人们决定添加的 bootstrap 的可访问性插件。之前没有问题。这很烦人。我试图让他们在启动时选择加载或不加载此插件，但他们拒绝了。你可以阅读这个问题。

为了解决您的问题，我添加了一些 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) {}
)

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

于 2021-09-23T21:38:58.097 回答