fuentes - R brillante mainPanel muestra estilo y fuente

estilos de la letra r

Question

Estoy aprendiendo aplicaciones brillantes y tengo algunas preguntas básicas sobre cómo ajustar el diseño, particularmente el estilo y la fuente. Agradecería los punteros o las respuestas explícitas, gracias!

Considere una aplicación básica de entrada y salida: el usuario ingresa datos en el panel lateral y genera un resultado de manera reactiva en el panel principal.

1. ¿Cómo podría formatear la tabla de salida en mainPanel para parecerme más a sidebarPanel? diga un rectángulo de aproximadamente el mismo tamaño con un fondo de color (quizás otro color) y los datos que aparecen en un cuadro de tamaño similar.

2. ¿Cómo puedo controlar el tipo de fuente, el tamaño de fuente y el tamaño de fuente dentro de los paneles?

Como puede ver en el código (cf runGist detalla un par de líneas a continuación), he tenido éxito en la personalización del tamaño del cuadro de ingreso numérico en el panel lateral, pero no he podido controlar los estilos de fuente (es mi etiqueta $ código de estilo fuera de lugar?).

Más importante aún para fines estéticos, no pude averiguar cómo formatear el panel principal para que se vea como el panel lateral. Principalmente modifiqué ejemplos del brillante sitio web, pero obviamente me perdí algunas cosas importantes.

Edición 1: Siguiendo la sugerencia de Scott Chamberlain, he copiado los archivos server.R y ui.R en github:

library("shiny") 
runGist("gist.github.com/annoporci/7313856") 

Edición 2: Scott sugirió usar Chrome / Firefox "Inspeccionar elemento" (haga clic derecho en el cuerpo de la página html, otros navegadores pueden tener la misma función). A continuación se muestra una captura de pantalla:

Inspeccionar elemento

La sugerencia de Scott de usar la herramienta "Inspeccionar elemento" resultó muy fructífera.

Esto es lo que aprendí (si no me equivoco):

• container-fluid row-fluid controlan el contenedor general.
• span12 controla el headerPanel
• span4 controla el sidebarPanel la sidebarPanel
• span8 controla el mainPanel
• shiny-bound-input es para el lado de entrada
• shiny-bound-output shiny-html-output y la shiny-bound-output shiny-html-output (ambas parecen ser válidas) son para el lado de salida

Basándome en estos hallazgos, coloqué los estilos HTML en el panel principal, porque parecía un lugar obvio, pero parece que también funciona dentro del panel lateral. Sería más intuitivo (para mí) colocarlo inmediatamente dentro de la página Con barra lateral (), pero eso no funcionó.

Aquí está el brillante editado:

runGist("https://gist.github.com/annoporci/7346772")

Aquí están los estilos HTML:

  HTML(''<style type="text/css">
    .row-fluid { width: 50%; }  
    .well { background-color: #99CCFF; }
    .shiny-html-output { font-size: 20px; line-height: 21px; }
  </style>'')

Seleccioné el 50% para el ancho total del contenedor, para mantenerlo pequeño.

Seleccioné el mismo color para el panel lateral y el panel principal.

Seleccioné una fuente más grande para la salida, que no es bonita aquí, pero tiene sentido en mi aplicación de la vida real. Y además estoy experimentando más que nada.

Seleccioné una altura de línea de 21 px en lugar de la predeterminada de 20 px solo para ajustar la altura del cuadro de salida para que sea la misma que el cuadro de entrada. De nuevo, un experimento.

También cambié el estilo de visualización en server.R, a saber

output$myResults <- renderText({
  r <- myFunction(input$myinput)
  c("My Output:","<br><br>",r)
})

Esto se debe a que quería que el resultado se mostrara debajo de las palabras "Mi salida". Por prueba y error, descubrí que podía comprimir cadenas en un vector c() con <br><br> como separador para forzar un salto de línea. Me sorprendería si este fuera el enfoque recomendado, así que, por favor, insista si sabe la forma correcta de hacerlo.

Preguntas de seguimiento de menor importancia :

Veré si puedo encontrar una manera de hacer que mi resultado de salida aparezca en un cuadro de color blanco similar al número de entrada en el panel de la barra lateral. Cualquier sugerencia de bienvenida.

¿Podría ser posible reunir todas las modificaciones de html en el mismo archivo separado que se almacenará junto con server.R y ui.R?

Seleccionaré la respuesta de Scott porque él me ayudó a descubrir lo suficiente para obtener mi salida tal como la quería. Pero edite si ve errores o imprecisiones en mi descripción anterior.

Answer 1

Esta es una publicación muy antigua, pero para la posteridad: puedes poner css en tu llamada mainPanel (). Si desea un gráfico de posición fija en el panel principal en un diseño de barra lateral:

sidebarLayout(
     sidebarPanel(), 
     mainPanel(style="position:fixed;margin-left:32vw;",
          plotOutput("plot")
     )
)

Answer 2

Otra forma de insertar estilo en Shiny es a través de su comando de tag . El resultado será el mismo que al insertar HTML plano:

tags$style(type="text/css", ".span8 .well { background-color: #00FFFF; }")

el resultado será el mismo que al insertar un código HTML simple (en este ejemplo, el resultado sería el mismo que el último fragmento de código de Scott)

Answer 3

Puede incluir html arbitrario, por ejemplo, dentro de la llamada a sidebarpanel , puede hacerlo

HTML(''<style type="text/css">
     .row-fluid .span4{width: 26%;}
     </style>'')

esto es solo algo copiado de una de mis aplicaciones Shiny

Puede usar las herramientas del inspector en el navegador para averiguar qué elementos css deben cambiarse.

Si usa un panel de pozo dentro del panel principal, se modifica ese panel de pozo para que se vuelva azul.

HTML(''<style type="text/css">
        .span8 .well { background-color: #00FFFF; }
        </style>''),