R блестящий mainPanel стиль и шрифт

Я изучаю блестящие приложения и задаю некоторые основные вопросы по настройке макета, особенно стиля и шрифта. Я был бы благодарен за указатели или явные ответы, спасибо!

Рассмотрим основное приложение ввода-вывода: пользователь вводит данные в sidebarPanel, и он реагирует на результат в mainPanel.

enter image description here

  • Как я могу отформатировать таблицу вывода в mainPanel, чтобы больше походить на sidebarPanel? скажем, прямоугольник примерно того же размера с цветным фоном (может быть, другого цвета) и данными, появляющимися в ящике одинакового размера.

  • Как я могу контролировать тип шрифта, размер шрифта и размер шрифта внутри панелей?

Как вы можете видеть из кода (cf runGist подробно описывает пару строк ниже), мне удалось настроить размер поля numericInput в sidebarPanel, но я не смог управлять стилями шрифтов ( мой тег $style code неуместен?).

Что еще важнее для эстетических целей, я не мог понять, как отформатировать mainPanel, чтобы он выглядел как sidebarPanel. В основном я модифицировал примеры с блестящего веб-сайта, но, очевидно, я пропустил некоторые важные вещи.

Изменить 1: Следуя предложению Скотта Чемберлена, я скопировал файлы server.R и ui.R на github:

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

Изменить 2: Скотт предложил использовать Chrome/Firefox "Inspect Element" (щелкните правой кнопкой мыши по тексту страницы html, другие браузеры могут иметь одинаковую функцию). Ниже приведен скриншот:

Проверить элемент

enter image description here

Предложение Скотта использовать инструмент "Проверка элемента" оказалось очень плодотворным.

Вот что я узнал (если не ошибаюсь):

  • container-fluid и row-fluid управляют общим контейнером.
  • span12 управляет headerPanel
  • span4 управляет sidebarPanel
  • span8 управляет mainPanel
  • shiny-bound-input для входной стороны
  • shiny-bound-output и shiny-html-output (оба они действительны) для выходной стороны

Основываясь на этих выводах, я поместил стили HTML в mainPanel, потому что он казался очевидным местом, но он, похоже, работает и внутри sidebarPanel. Было бы более интуитивно (для меня) разместить его непосредственно внутри страницыWithSidebar(), но это не сработало.

Вот отредактированный блеск:

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

Вот стили HTML:

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

Я выбрал 50% для общей ширины контейнера, чтобы он был маленьким.

Я выбрал тот же цвет для sidebarPanel и mainPanel.

Я выбрал более крупный шрифт для вывода, который здесь не очень хорош, но имеет смысл в моем реальном приложении. И кроме того, я больше экспериментирую.

Я выбрал высоту строки 21px, а не 20px по умолчанию, чтобы настроить высоту окна вывода так же, как поле ввода. Опять же, эксперимент.

Я также изменил стиль отображения на сервере .R, а именно

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

Это потому, что я хотел, чтобы результат отображался под словами "Мой вывод". В результате проб и ошибок я обнаружил, что я мог бы сжимать строки в векторе c() с <br><br> в качестве разделителя для принудительного разрыва строки. Я был бы шокирован, если бы это был рекомендуемый подход, поэтому, пожалуйста, звоните, если вы знаете правильный способ сделать это.

Последующие вопросы меньшей важности:

Я посмотрю, смогу ли я найти способ вывода моего результата в ящик белого цвета, аналогичный номеру ввода в sidebarPanel. Любые предложения приветствуются.

Возможно ли собрать все html-модификации в том же отдельном файле, который будет храниться вместе с сервером. R и ui.R?

Я выберу ответ Скотта, потому что он помог обнаружить достаточно, чтобы получить мои результаты только о том, как я этого хотел. Но, пожалуйста, отредактируйте, если вы видите ошибки или неточности в моем описании выше.

Ответы

Ответ 1

Вы можете включить произвольный html, например, в вызове sidebarpanel, вы можете сделать

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

это просто что-то скопированное из одного из моих блестящих приложений

Вы можете использовать инструменты инспектора в браузере, чтобы выяснить, какие элементы CSS необходимо изменить.

Если вы используете wellPanel внутри mainPanel, это изменит, что wellPanel будет синим

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

Ответ 2

Другой способ вставить стиль в Shiny - через команду tag. Результат будет таким же, как вставка простого HTML:

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

результат будет таким же, как вставка простого HTML-кода (в этом примере результат будет таким же, как и последний фрагмент кода Скоттом)

Ответ 3

Это действительно старое сообщение, но для потомков: вы можете просто поместить css в свой вызов mainPanel(). Если вам нужен участок фиксированной позиции в mainPanel в макете боковой панели:

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