web-dev-qa-db-ja.com

R光沢のあるmainPanelの表示スタイルとフォント

私は光沢のあるアプリを学んでおり、レイアウト、特にスタイルとフォントの調整についていくつかの基本的な質問があります。ポインタや明示的な回答に感謝します、ありがとう！

基本的な入出力アプリについて考えてみます。ユーザーはsidebarPanelにデータを入力し、mainPanelに結果をリアクティブに出力します。

enter image description here

  1. MainPanelの出力テーブルをsidebarPanelのようにフォーマットするにはどうすればよいですか？たとえば、背景が色付き（おそらく別の色）のほぼ同じサイズの長方形で、データが同じサイズのボックスに表示されているとします。

  2. パネル内のフォントタイプ、フォントサイズ、フォントサイズを制御するにはどうすればよいですか？

コードからわかるように（runGistの詳細は以下の数行を参照）、sidebarPanelのnumericInputボックスのサイズをカスタマイズすることに成功しましたが、フォントスタイルを制御できませんでした（私のtag $です）スタイルコードが間違っていますか？）。

美的目的でさらに重要なのは、mainPanelをsidebarPanelのようにフォーマットする方法を理解できなかったことです。ほとんどの場合、光沢のあるWebサイトの例を変更しましたが、明らかにいくつかの重要なことを見逃していました。

編集1：Scott Chamberlainの提案に従って、server.Rファイルとui.Rファイルをgithubにコピーしました。

_library("shiny") 
runGist("Gist.github.com/annoporci/7313856") 
_

編集2：スコットはChrome/Firefoxの「要素の検査」の使用を提案しました（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内でも機能するようです。 pageWithSidebar（）のすぐ内側に配置する方が（私にとっては）直感的ですが、それは機能しませんでした。

これが編集された光沢のあるものです：

_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に同じ色を選択しました。

出力には大きなフォントを選択しました。これはここではきれいではありませんが、実際のアプリでは意味があります。それに加えて、私は何よりも実験しています。

出力ボックスの高さを入力ボックスと同じになるように微調整するために、デフォルトの20pxではなく21pxの行の高さを選択しました。繰り返しますが、実験です。

Server.Rの表示スタイルも変更しました。

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

これは、「MyOutput」という単語の下に結果を表示したかったためです。試行錯誤の結果、_<br><br>_を区切り文字としてベクトルc()内の文字列を絞り、改行を強制できることを発見しました。これが推奨されるアプローチだとしたらショックを受けるので、正しい方法を知っているならチャイムを鳴らしてください。

重要度の低いフォローアップ質問：

サイドバーパネルの入力番号と同様に、出力結果を白色のボックスに表示する方法を見つけることができるかどうかを確認します。どんな提案も歓迎します。

Server.Rおよびui.Rと一緒に保存するために、すべてのhtml変更を同じ別個のファイルに収集することは可能でしょうか？

スコットの答えを選択するのは、スコットが私の出力を私が望んでいた方法で取得するのに十分な発見を助けてくれたからです。ただし、上記の説明にエラーや不正確さが見られる場合は、編集してください。

rshiny
20
PatrickT

たとえば、sidebarpanelの呼び出し内に、任意のhtmlを含めることができます。

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

これは私のShinyアプリの1つからコピーしたものです

ブラウザのインス​​ペクタツールを使用して、変更する必要のあるcss要素を特定できます。

MainPanel内でwellPanelを使用すると、wellPanelが青色に変更されます。

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

これは本当に古い投稿ですが、後世のために：mainPanel（）呼び出しにcssを入れるだけです。サイドバーレイアウトのmainPanelで固定位置プロットが必要な場合：

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

シャイニーにスタイリングを挿入する別の方法は、そのtagコマンドを使用することです。結果は、プレーンHTMLを挿入した場合と同じになります。

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

結果はプレーンHTMLコードの挿入と同じになります（この例では、結果はスコットによる最後のコードスニペットと同じになります）

3
Matteo Furlan