Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ThinkR-open/w3css
[WIP] Implementation of W3.CSS for {shiny}
https://github.com/ThinkR-open/w3css
golemverse shiny
Last synced: 9 days ago
JSON representation
[WIP] Implementation of W3.CSS for {shiny}
- Host: GitHub
- URL: https://github.com/ThinkR-open/w3css
- Owner: ThinkR-open
- License: other
- Created: 2020-09-18T11:50:02.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-27T10:44:19.000Z (over 1 year ago)
- Last Synced: 2024-11-28T21:53:02.027Z (14 days ago)
- Topics: golemverse, shiny
- Language: R
- Homepage:
- Size: 104 KB
- Stars: 6
- Watchers: 6
- Forks: 1
- Open Issues: 27
-
Metadata Files:
- Readme: README.Rmd
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - ThinkR-open/w3css - [WIP] Implementation of W3.CSS for {shiny} (R)
README
---
output: github_document
---
```{r, include = FALSE}
knitr::opts_chunk$set(
collapse = TRUE,
comment = "#>",
fig.path = "man/figures/README-",
out.width = "100%",
eval = FALSE
)
```
# w3css
[](https://lifecycle.r-lib.org/articles/stages.html#experimental)
[](https://github.com/thinkr-open/w3css/actions/workflows/R-CMD-check.yaml)
[WORK IN PROGRESS] There are still a lot of elements/features to implement.
An implementation of W3 CSS for 'shiny'.
## Installation
``` r
remotes::install_github("thinkr-open/w3css")
```
## About
You're reading the doc about version : `r pkgload::pkg_version()`
This README has been compiled on the
```{r eval = TRUE}
Sys.time()
```
Here are the test & coverage results :
```{r eval = TRUE}
devtools::check(quiet = TRUE)
```
```{r echo = FALSE, eval = TRUE}
unloadNamespace("w3css")
```
```{r eval = TRUE}
covr::package_coverage()
```
## Note about W3.CSS approach
W3.CSS philosophy is to allow a lot of flexibily in your UI design by setting CSS class to your component.
For example, to create a container with a padding and centered, you'd do:
```html
My content
```
Which will be translated here with:
```{r}
w3_container(
class = w3_center(),
class = w3_padding(24),
htmltools::tags$p(
"My content"
)
)
```
## Example
```{r}
library(w3css)
library(shiny)
ui <- function() {
w3_page(
w3_container(
w3_panel(
w3_actionButton(
"w3_actionButton",
"Show Modal"
)
),
w3_panel(
w3_modal(
"w3_modal",
"Here is a modal",
"Its body",
"Its footer",
"teal"
)
),
w3_panel(
w3_numericInput(
"w3_numericInput",
"Enter number",
value = 5,
min = 1,
max = 10,
step = 2
),
w3_checkbox(
"w3_checkbox",
"Click me"
),
w3_checkboxGroupInput(
"w3_checkboxGroupInput",
"Checkbox group",
choices = letters[1:4]
)
),
w3_panel(
w3_radioButton(
"w3_radioButton",
label = "Hey there",
choices = letters[1:3]
)
),
w3_panel(
w3_selectInput(
"w3_selectInput",
label = "Hey there",
choices = letters[1:3]
)
),
w3_panel(
w3_textInput(
"w3_textInput",
"Text"
)
),
w3_panel(
w3_passwordInput(
"w3_passwordInput",
"password"
)
),
w3_panel(
w3_dateInput(
"w3_dateInput",
"Pick a date"
)
),
w3_panel(
w3_editableListInput(
"w3_editableListInput",
"Editable list",
choices = names(mtcars)
)
)
)
)
}
server <- function(
input,
output,
session
) {
observeEvent(input$w3_actionButton, {
print(input$w3_actionButton)
req(input$w3_actionButton > 0)
w3_show_modal("w3_modal")
})
observeEvent(input$w3_numericInput, {
print(input$w3_numericInput)
})
observeEvent(input$w3_checkbox, {
print(input$w3_checkbox)
})
observeEvent(input$w3_checkboxGroupInput, {
print(input$w3_checkboxGroupInput)
})
observeEvent(input$w3_radioButton, {
print(input$w3_radioButton)
})
observeEvent(input$w3_selectInput, {
print(input$w3_selectInput)
})
observeEvent(input$w3_textInput, {
print(input$w3_textInput)
})
observeEvent(input$w3_passwordInput, {
print(input$w3_passwordInput)
})
observeEvent(input$w3_dateInput, {
print(input$w3_dateInput)
})
observeEvent(input$w3_editableListInput, {
print(input$w3_editableListInput)
})
}
shinyApp(ui, server)
```
```{r}
pkgload::load_all()
library(shiny)
ui <- function(request) {
w3_page(
w3_actionButton(
"w3_actionButton",
"Update"
),
w3_numericInput(
"w3_numericInput",
"Enter number",
value = 5,
min = 1,
max = 10,
step = 2
),
w3_selectInput(
"w3_selectInput",
"Select",
choices = letters
)
)
}
server <- function(
input,
output,
session
) {
observeEvent(
input$w3_actionButton,
{
w3_updateNumericInput(
"w3_numericInput",
"Enter number",
value = 15,
min = 5,
max = 55,
step = 3
)
w3_updateSelectInput(
"w3_selectInput",
"Select",
choices = LETTERS
)
},
ignoreInit = TRUE
)
observe({
print(input$ w3_selectInput)
})
}
shinyApp(ui, server)
```