column.Rd
These functions are the foundation of any application. Grid elements are
nested as follows: container() > columns() > column() ~ column()
. A
column()
may be created with an explicit width, 1 through 12. To fit a
column automatically to its content use width = "content"
. To divide the
space in a row evenly amongst all columns use width = "equal"
. For examples
and usage tips see the sections below.
column(..., width = "equal") columns(...) container(..., centered = FALSE)
... | Any number of tags elements passed as child elements or named arguments passed as HTML attributes to the parent element. |
---|---|
width | A responsive argument. One of |
centered | One of |
Other layout functions:
fieldset()
,
flex()
,
navbar()
,
responsive
,
webpage()
### Equal width columns container( columns( column( "Aliquam erat volutpat." ), column( "Mauris mollis tincidunt felis." ), column( "Cum sociis natoque penatibus et magnis dis parturient montes,", "nascetur ridiculus mus." ) ) )#> <div class="container-fluid"> #> <div class="row"> #> <div class="col">Aliquam erat volutpat.</div> #> <div class="col">Mauris mollis tincidunt felis.</div> #> <div class="col"> #> Cum sociis natoque penatibus et magnis dis parturient montes, #> nascetur ridiculus mus. #> </div> #> </div> #> </div>### Shiny's panel with sidebar layout container( columns( column( width = 4, card( title = "Sidebar", formGroup( label = "Control 1", selectInput("control1", "...") ), formGroup( label = "Control 2", selectInput("control2", "...") ), formGroup( label = "Control 3", selectInput("control3", "...") ) ) ), column( d4("Main panel") ) ) )#> <div class="container-fluid"> #> <div class="row"> #> <div class="col-4"> #> <div class="card" title="Sidebar"> #> <div class="card-body"> #> <div class="form-group"> #> <label>Control 1</label> #> <div class="yonder-select" id="control1"> #> <input type="text" class="form-control custom-select" data-toggle="dropdown" data-boundary="window" placeholder="..."/> #> <div class="dropdown-menu"> #> <button class="dropdown-item active" value="...">...</button> #> </div> #> <div class="valid-feedback"></div> #> <div class="invalid-feedback"></div> #> </div> #> </div> #> <div class="form-group"> #> <label>Control 2</label> #> <div class="yonder-select" id="control2"> #> <input type="text" class="form-control custom-select" data-toggle="dropdown" data-boundary="window" placeholder="..."/> #> <div class="dropdown-menu"> #> <button class="dropdown-item active" value="...">...</button> #> </div> #> <div class="valid-feedback"></div> #> <div class="invalid-feedback"></div> #> </div> #> </div> #> <div class="form-group"> #> <label>Control 3</label> #> <div class="yonder-select" id="control3"> #> <input type="text" class="form-control custom-select" data-toggle="dropdown" data-boundary="window" placeholder="..."/> #> <div class="dropdown-menu"> #> <button class="dropdown-item active" value="...">...</button> #> </div> #> <div class="valid-feedback"></div> #> <div class="invalid-feedback"></div> #> </div> #> </div> #> </div> #> </div> #> </div> #> <div class="col"> #> <h1 class="display-4">Main panel</h1> #> </div> #> </div> #> </div>### Mobile friendly grids # Use `column()`s [responsive] `width` argument to make mobile friendly # applications. container( columns( column( width = c(sm = 4), "Mauris ac felis vel velit tristique imperdiet." ), column( width = c(sm = 4), "Nam vestibulum accumsan nisl." ), column( width = c(sm = 4), "Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus." ) ) )#> <div class="container-fluid"> #> <div class="row"> #> <div class="col-sm-4">Mauris ac felis vel velit tristique imperdiet.</div> #> <div class="col-sm-4">Nam vestibulum accumsan nisl.</div> #> <div class="col-sm-4">Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.</div> #> </div> #> </div># or container( columns( column( width = c(sm = 4), "Aenean in sem ac leo mollis blandit." ), column( width = c(sm = 8), "Nulla posuere. In id erat non orci commodo lobortis." ) ) )#> <div class="container-fluid"> #> <div class="row"> #> <div class="col-sm-4">Aenean in sem ac leo mollis blandit.</div> #> <div class="col-sm-8">Nulla posuere. In id erat non orci commodo lobortis.</div> #> </div> #> </div>### Fit columns to their content container( columns( column(), column( width = "content", "Cras placerat accumsan nulla. Aenean in sem ac leo mollis blandit." ), column() ) )#> <div class="container-fluid"> #> <div class="row"> #> <div class="col"></div> #> <div class="col-auto">Cras placerat accumsan nulla. Aenean in sem ac leo mollis blandit.</div> #> <div class="col"></div> #> </div> #> </div>