我有一个闪亮的服务器版本0.4.0,我希望有4个小textInput框看起来像这样:
x-min x-max y-min y-max [...] [...] [...] [...]
他们现在看起来像这样:
x-min [...................] x-max [...................] y-min [...................] y-max [...................]
使用此代码:
textInput(inputId="xlimitsmin", label="x-min", value = 0.0), textInput(inputId="xlimitsmax", label="x-max", value = 0.5), textInput(inputId="ylimitsmin", label="y-min", value = 0.5), textInput(inputId="ylimitsmax", label="y-max", value = 1.0),
任何想法如何实现这一目标?
编辑:我在代码的其他地方成功地改变了这样的事情:
[... which links to this later on in the page...]
这就是那些不起作用的东西:
[... which links to...]
编辑:
这是一个ui.R
不起作用的自包含示例:
library(shiny) shinyUI( pageWithSidebar( # application title headerPanel("test01"), sidebarPanel( tags$head( tags$style(type="text/css", "select { max-width: 360px; }"), tags$style(type="text/css", ".span4 { max-width: 360px; }"), tags$style(type="text/css", ".well { max-width: 360px; }") ), wellPanel( p(strong("Side Panel:")) ) ), mainPanel( textInput(inputId="xlimitsmin", label="x-min", value = 0.0), tags$head(tags$style(type="text/css", "select#xlimitsmin { max-width: 50px }")), textInput(inputId="xlimitsmax", label="x-max", value = 0.5), tags$head(tags$style(type="text/css", "select#xlimitsmax { display: inline-block; max-width: 50px; }")) ) ))
结果页面:
使用最新版本的Shiny,您可以通过将输入调用放在splitLayout()中来实现此目的.这会将流体行,框等分成必要的列,以便并排显示输入字段.
下面的示例将在一个框中为您提供三个文本输入,这些输入将在fluidRow中并排显示.
fluidRow( box(width = 12, title = "A Box in a Fluid Row I want to Split", splitLayout( textInput("inputA", "The first input"), textInput("inputB", "The second input"), textInput("inputC", "The third input") ) ) )
也许这个解决方案在2013年还没有,但如果你想在不编写HTML或CSS的情况下这样做,你可以像这样使用这个column
功能fluidRow
:
fluidRow( column(3, selectInput('pcat', 'Primary Category', c("ALL", "Some"))), column(3, selectInput('smodel', 'Statistical Model', c("NONE", "LINEAR REGRESSION", "LOWESS"))) )
它会将事物并排放置.
编辑:现在有另一个非常简单的方法来使用该splitLayout()
功能.有关详细信息,请参阅Nadir Sidi的答案.
解释(并简化2输入的情况),你的问题是:
runApp(list( ui = bootstrapPage( textInput(inputId="xlimitsmin", label="x-min", value = 0.0), textInput(inputId="xlimitsmax", label="x-max", value = 0.5) ), server = function(input, output) {} ))
节目
但是你需要并排的小输入,如下所示:
textInputRow<-function (inputId, label, value = "") { div(, tags$label(label, `for` = inputId), tags$input(id = inputId, type = "text", value = value,class="input-small")) } runApp(list( ui = bootstrapPage( textInputRow(inputId="xlimitsmin", label="x-min", value = 0.0), textInputRow(inputId="xlimitsmax", label="x-max", value = 0.5) ), server = function(input, output) {} ))
得到:
让我们先并排做:
目前textInput生成两个单独的标签 - 每个标签label
,并且input
每个标签都由CSS配置display:block
,这意味着它是一个矩形,将突破到容器的左侧.我们需要将每个textInput
字段包装在新容器(div)中,并告诉容器textInput
使用CSS来允许容器跟随它(下一个)容器在页面上的同一水平行上display:inline-block
.
所以我们添加一个带有每个样式的div textInput
:
runApp(list( ui = bootstrapPage( div(,textInput(inputId="xlimitsmin", label="x-min", value = 0.0)), div(,textInput(inputId="xlimitsmax", label="x-max", value = 0.5)) ), server = function(input, output) {} ))
现在让我们处理小事.有几种方法可以做小事,
使字体变小,
使输入框中包含较少的字符.
告诉css或(这里)bootstrap画一个小盒子
因为bootstrap.js
当我们使用闪亮时真的可以控制布局,所以只有3个可靠地工作,所以让我们使用它.
输入大小记录在Bootstrap 2.3.2的CSS Forms文档中,在"Control Sizing"下.它包括各种尺寸,从迷你,小,中,大,xlarge和xxlarge,默认可能是中等.让我们试试小而不是.
要设置大小,我们需要更改input
生成的标记的类textInput
.
现在textInput
只是围绕更强大tags
功能的便利功能,例如tags$label
和tags$input
.我们可以构建一个更强大的版本textInput
,允许我们配置元素,特别是input
节点的类:
textInput2<-function (inputId, label, value = "",...) { tagList(tags$label(label, `for` = inputId), tags$input(id = inputId, type = "text", value = value,...)) } runApp(list( ui = bootstrapPage( div(,textInput2(inputId="xlimitsmin", label="x-min", value = 0.0, class="input-small")), div(,textInput2(inputId="xlimitsmax", label="x-max", value = 0.5, class="input-small")) ), server = function(input, output) {} ))
我们已经完成了 - 但是我们可以通过textInput3
生成div标签来完成一些功能.它也可以自己设置类,但我会留给你写.
textInput3<-function (inputId, label, value = "",...) { div(, tags$label(label, `for` = inputId), tags$input(id = inputId, type = "text", value = value,...)) } runApp(list( ui = bootstrapPage( textInput3(inputId="xlimitsmin", label="x-min", value = 0.0, class="input-small"), textInput3(inputId="xlimitsmax", label="x-max", value = 0.5, class="input-small") ), server = function(input, output) {} ))
为了感兴趣,这是使用类的版本input-mini
:
我删除了旧的答案 - 这是一个有效的:
ui.r:
library(shiny) shinyUI( pageWithSidebar( # application title headerPanel("test01"), sidebarPanel( tags$head( tags$style(type="text/css", "select { max-width: 360px; }"), tags$style(type="text/css", ".span4 { max-width: 360px; }"), tags$style(type="text/css", ".well { max-width: 360px; }") ), wellPanel( p(strong("Side Panel:")) ) ), mainPanel( div(id="XXmin",textInput(inputId="xlimitsmin", label="x-min", value = 0.0)), tags$head(tags$style(type="text/css", "#XXmin {display: inline-block}")), tags$head(tags$style(type="text/css", "#xlimitsmin {max-width: 50px}")), div(id="XXmax",textInput(inputId="xlimitsmax", label="x-max", value = 0.5)), tags$head(tags$style(type="text/css", "#XXmax {display: inline-block}"), tags$head(tags$style(type="text/css", "#xlimitsmax {max-width: 50px}")) )) ))
以下是我所做的更改:
1)我select
从你select#xlimitsmax
和select#xlimitsmin
你的.css
陈述中删除了
2)我把你自己的两个控件放在自己的位置,div()
并给它们起名字XXmin
和XXmax
.然后我添加了.css
语句以使它们成为内联块.
如果你有很多这些你可能想要使用一个class
语句 - 例如:
div(class="MyClass",textInput(inputId="xlimitsmin", label="x-min", value = 0.0)), tags$head(tags$style(type="text/css", ".MyClass {display: inline-block}")), tags$head(tags$style(type="text/css", "#xlimitsmin {max-width: 50px}")),
然后你可以将每个控件标记div()
为as,class="MyClass"
并只使用一个.css
语句.
编辑添加:感谢发布示例代码 - 这使得它更容易.
第二编辑:只是为了澄清.将textInput
命令放在a中的目的div()
是将输入框及其标签合并为单个对象,以便可以应用样式(在本例中为display
样式).如果你不这样做,标签和盒子就像两个独立的实体一样,在这种情况下很难操纵它们.
作为在类中放置详细样式声明的替代方法,您似乎可以根据自己的喜好轻松扩展闪亮标记函数.默认情况下,这个特别的方便.(这是闪亮的shiny_0.14.1).以为我需要写一个闭包但这似乎有效.
inline = function (x) { tags$div(, x) } inline(textInput(inputId="xlimitsmin", label="x-min", value = 0.0)), inline(textInput(inputId="xlimitsmax", label="x-max", value = 0.5)), inline(textInput(inputId="ylimitsmin", label="y-min", value = 0.5)), inline(textInput(inputId="ylimitsmax", label="y-max", value = 1.0)),