r - 在 flexdashboard 中,可以点击 valueBox 来更新像 actionButton 这样的文本框吗?
问题描述
我正在尝试利用valueBox
inflexdashboard
来显示标题图。但是,我也希望valueBox
像 一样actionButton
,点击valueBox
应该触发仪表板其他地方的操作。
在检查flexdashboard
文档时,我看到以下相关位valueBox
:
链接值框
valueBox(42, icon = "fa-pencil", href="#details")
其中单击valueBox
会将用户导航到具有“#details”锚点的不同页面。但是,没有任何迹象表明单击valueBox
可用于其他操作。
下面是一个最小的相关 flexdashboard 代码
---
title: "valueBox Links"
output:
flexdashboard::flex_dashboard:
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Tab 1 - Test
======================================================================
Column
-------------------------------------
#### Three valueBoxes
### valueBox 1
```{r}
valueBox(1)
```
### valueBox 2
```{r}
valueBox(2)
```
### valueBox 3
```{r}
valueBox(3)
```
Column
-------------------------------------
### Text output
This is where I want some text to show up dynamically, depending on if the user has clicked valueBox 1, 2, or 3.
任何帮助,将不胜感激 :)
解决方案
我尝试了不同的参数,valueBox
但没有任何运气。最后我设法通过将actionButton
s放在es的标题中来解决它valueBox
,然后使用自定义样式使它们透明并扩展它们以覆盖整个valueBox
. 它看起来像这样,单击每个valueBox
会在“文本输出”下呈现不同的文本:
我添加了颜色和图标以突出显示valueBox
es 可以正常设置样式。它只使用 flexdashboard 库,并且完全响应。这是代码:
---
title: "valueBox Links"
output:
flexdashboard::flex_dashboard:
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Tab 1 - Test
======================================================================
Column
-------------------------------------
#### Three valueBoxes
### valueBox 1
```{r}
valueBox(1, caption = paste("I'm clickable!", actionButton("button1", " ", style = "background-color:rgba(39, 128, 227, 0.0); border-color:rgba(39, 128, 227, 0.0); position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; width:100%")), icon = "fa-thumbs-up", color = "success")
```
### valueBox 2
```{r}
valueBox(2, caption = paste("I'm clickable too!", actionButton("button2", " ", style = "background-color:rgba(39, 128, 227, 0.0); border-color:rgba(39, 128, 227, 0.0); position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; width:100%")), icon = "fa-tag", color = "warning")
```
### valueBox 3
```{r}
valueBox(3, caption = paste("ME TOO!", actionButton("button3", " ", style = "background-color:rgba(0, 0, 0, 0.0); border-color:rgba(0, 0, 0, 0.0); position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; width:100%")), icon = "fa-random", color = "danger")
```
Column
-------------------------------------
### Text output
```{r}
textOutput("textout")
rv <- reactiveValues(data = NULL)
observeEvent(input$button1, {
rv$data <- "There are two types of people in the world: 1) Those who can extrapolate from incomplete data."
})
observeEvent(input$button2, {
rv$data <- "If you live to be one hundred, you’ve got it made. Very few people die past that age."
})
observeEvent(input$button3, {
rv$data <- "A statistician’s wife had twins. He was delighted. He rang the minister who was also delighted. “Bring them to church on Sunday and we’ll baptize them,” said the minister. “No,” replied the statistician. “Baptize one. We’ll keep the other as a control."
})
output$textout <- renderText({
rv$data
})
```
推荐阅读
- node.js - SharedKeyCredential 不是构造函数 - Azure Blob Storage + Nodejs
- javascript - TinySlider:使上一个/下一个按钮在第一个/最后一个索引时消失?
- java - 如何使用 Spring 组件注册 POJO 工厂 *methods*?
- android - HUAWEI MediaPad M5 Lite 10 返回 screenLayout SCREENLAYOUT_SIZE_LARGE
- r - R:从数据框中的值中提取向量名称
- django - 如何在将商品添加到购物车时将用户重定向到登录页面?
- api - Flutter API 导致 Null
- ffmpeg - FFMPEG 流从 sdp 到 youtube/facebook live(RTMP)
- c++ - 自动修改 C++ 代码:将代码从解析树转换回源代码
- xamarin.android - 发送短信到whatsapp xamarin android