-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
cssgrid.Rmd
134 lines (111 loc) · 3.35 KB
/
cssgrid.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
---
title: Get started
output: rmarkdown::html_vignette
vignette: >
%\VignetteIndexEntry{cssgrid}
%\VignetteEngine{knitr::rmarkdown}
%\VignetteEncoding{UTF-8}
---
```{css css, echo = FALSE}
body {box-sizing: border-box;}
.cssgrid p {margin: 0;}
```
```{r knit-opt, include = FALSE}
knitr::opts_chunk$set(
collapse = TRUE,
comment = "#>",
eval = TRUE
)
```
```{r setup, include=FALSE}
library(cssgrid)
knitr::opts_chunk$set(echo = TRUE)
```
```{r cssgrid, echo = FALSE}
i <- function(x, ...) grid_item(x, ..., style = "border: solid black; text-align: center;")
txt <- function(x) div(x, style = "margin: 0;", class="foo")
grid_layout(
i(txt("C"), area = "a"), i(txt("S"), area = "b"), i(txt("S"), area = "c"),
i(txt("grid"), area = "d"),
cols = "1.5rem 1.5rem 1.5rem", rows = "1lh 1lh",
areas = c("a b c", "d d d"),
gap = ".5rem", class = "cssgrid"
)
```
<p></p>
```{r}
library(cssgrid)
```
# Simple examples
```{r area, results = 'asis'}
style <- "border: solid black;"
grid_layout(
grid_item("A", area = "a", style = style),
grid_item("B", area = "b", style = style),
grid_item("C", area = "c", style = style),
cols = c("1fr 2fr"), rows = c("1fr 1fr"), areas = c("a b", "a c"),
style = style
)
```
<p></p>
```{r row-col}
grid_layout(
grid_item("A", row = "1 / 3", col = "1 / 2", style = style),
grid_item("B", row = "1 / 2", col = "2 / 3", style = style),
grid_item("C", row = "2 / 3", col = "2 / 3", style = style),
cols = c("1fr 2fr"), rows = c("1fr 1fr"), style = style
)
```
## Tidyverse style coding
```{r df, results = 'asis'}
library(magrittr)
tibble::tibble(
content = list(
tags$h1("Title"), tags$h2("Sidebar"), tags$h2("Article A"), tags$h2("Article B")
),
area = c("title", "side", "A", "B"),
style = style
) %>%
purrr::pmap(function(content, ...) grid_item(content, ...)) %>%
# tagList %>%
grid_layout(
cols = c("1fr 2fr"), rows = c("auto, 1fr 1fr"),
areas = c(
"title title",
"side A",
"side B"
),
style = style
)
```
<p></p>
# Shiny UI
Valid units for sizing elements in `shiny` package are limited to
`px`, `%`, `em`, `pt`, `in`, `cm`, `mm`, `ex`, or `pc`.
Thus, there is a difficulty when layouting one element with certain size and the other fitting to the rest of area, or split the rest of the area for more elements with variety of ratios.
This is what CSS Grid Layout supports by the `fr` unit.
```{css, echo = FALSE}
.form-group .form-control {width: 100%;}
```
## Read button has auto width, and the rest of area is dominated by text input
```{r}
grid_layout(
shiny::textInput("url", "URL", "https://example.com", width = "100%"),
shiny::actionButton("read", "Read"),
rows = "auto", cols = "1fr auto", column_gap = "10px"
)
```
## Send button has auto width, and the rest of area is divided into 1:2 ratios
`grid_rowwise` is an alternative to `grid_layout` when layouting in 1 row.
`grid_rowwise` will add column size "auto" in case additional grids are required.
```{r}
items <- tagList(
shiny::textInput("to", "To", width = "100%"),
shiny::textInput("message", "Message", width = "100%"),
shiny::actionButton("read", "Send")
)
grid_rowwise(items, cols = "1fr 2fr auto", column_gap = "10px")
# This one misses cols for 3rd item, which will be treated as "auto".
# Thus the result becomes identical to the above.
grid_rowwise(items, cols = "1fr 2fr", column_gap = "10px")
```