闪亮的4个小文本输入框并排

 悦md悦小坏蛋 发布于 2023-02-09 19:25

我有一个闪亮的服务器版本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...]
          
          

编辑:

这是一个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; }"))
    )
))

结果页面:

在此输入图像描述

5 个回答
  • 使用最新版本的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")
          )
      )
    )
    

    2023-02-09 19:26 回答
  • 也许这个解决方案在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的答案.

    2023-02-09 19:26 回答
  • 解释(并简化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$labeltags$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:

    在此输入图像描述

    2023-02-09 19:26 回答
  • 我删除了旧的答案 - 这是一个有效的:

    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#xlimitsmaxselect#xlimitsmin你的.css陈述中删除了

    2)我把你自己的两个控件放在自己的位置,div()并给它们起名字XXminXXmax.然后我添加了.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样式).如果你不这样做,标签和盒子就像两个独立的实体一样,在这种情况下很难操纵它们.

    2023-02-09 19:28 回答
  • 作为在类中放置详细样式声明的替代方法,您似乎可以根据自己的喜好轻松扩展闪亮标记函数.默认情况下,这个特别的方便.(这是闪亮的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)),
    

    2023-02-09 19:28 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有