始める無料で始める

box を使ったワイヤーフレーム作成

新しい行は fluidRow() で定義します。

さらに、本文にはコンテンツを整理するために box() を追加できます。複数の box() を追加でき、各 box() のデフォルトの幅は 6 で、width 引数で調整できます。1 行の最大幅は 12 なので、デフォルト設定の box() は 1 行に 2 つまでしか置けません。height も設定でき、さまざまなサイズのボックスを配置できます。

ここでの box() には 2 つの主な目的があります。1 つ目は shinydashboard の要素を整理すること、2 つ目はワイヤーフレーム作成を行い、コンテンツを追加する前に各オブジェクトの配置を計画できるようにすることです。

この演習では、中身のないボックスでワイヤーフレームを作成します。

shiny と shinydashboard パッケージは読み込まれています。ダッシュボードのヘッダーとサイドバーは、それぞれ header と sidebar に保存されています。

この演習はコースの一部です

shinydashboard で作るダッシュボード

コースを見る

演習の手順

  • 1 行目に、width が 2、2、8 の box() を 3 つ追加します。
  • 2 行目に、行全体を埋める高さ 200 の box() を 1 つ追加します。
  • 3 行目には、同じ幅の空のボックスを 2 つ追加し、それぞれに "A slider goes here" と "Some info boxes go here" のラベルを付けます。

実践的なインタラクティブ演習

このサンプルコードを完成させて、この演習に挑戦してみましょう。

body <- dashboardBody(
  # Add three boxes with widths 2, 2 and 8
  fluidRow(box("Some buttons go here", ___, height = 100), 
           ___("Checkboxes go here", ___, height = 50),
           ___("A chart goes here", ___, height = 150)),
  # Add one box that fills the entire row and has height 200
  fluidRow(___("Data table goes here"), ___, ___),
  # Add a third row containing two boxes with equal widths
  fluidRow(___)
)

ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)
コードを編集して実行