R/bulma-demo-forms.R
Defines functions bulma_demo_forms_file bulma_demo_forms_radio bulma_demo_forms_checkbox bulma_demo_forms_select bulma_demo_forms_input bulma_demo_forms_general bulma_demo_forms
bulma_demo_forms <- function() {
bulma_demo_nav(
size = "small",
"General" = bulma_demo_forms_general(),
"Input" = bulma_demo_forms_input(),
"Select" = bulma_demo_forms_select(),
"Checkbox" = bulma_demo_forms_checkbox(),
"Radio" = bulma_demo_forms_radio(),
"File" = bulma_demo_forms_file()
)
}
bulma_demo_forms_general <- function() {
bulma_container(
bulma_title("Forms"),
bulma_subtitle("All generic form controls, designed for consistency"),
bulma_demo_side(div(
bulma_form_field(
bulma_form_label("Name"),
bulma_form_control(
bulma_form_input(
name = "name",
placeholder = "Last name, First Name, M.I."
)
)
),
bulma_form_field(
bulma_form_label("Username"),
bulma_form_control(
icons = c("left", "right"),
bulma_form_input(
name = "username",
value = "bulma",
color = "success",
placeholder = "Username"
),
bulma_form_icon("fas fa-user", align = "left"),
bulma_form_icon("fas fa-check", align = "right", color = "primary")
),
bulma_form_help(
color = "success",
"This username is available."
)
),
bulma_form_field(
bulma_form_label("Email"),
bulma_form_control(
icons = c("left", "right"),
bulma_form_input(
name = "email",
value = "bulma@",
color = "danger",
placeholder = "Email"
),
bulma_form_icon("fas fa-envelope", align = "left"),
bulma_form_icon("fas fa-times", align = "right", color = "danger")
),
bulma_form_help(
color = "danger",
"This email is invalid"
)
),
bulma_form_field(
bulma_form_label("User type"),
bulma_form_control(
bulma_form_select(
name = "user_type",
bulma_form_select_option("Rider"),
bulma_form_select_option("Driver"),
bulma_form_select_option("Eater")
)
)
),
bulma_form_field(
bulma_form_label("Message"),
bulma_form_control(
bulma_form_textarea(
name = "message",
rows = 4L,
placeholder = "Put in a message"
)
)
),
bulma_form_field(
bulma_form_control(
bulma_form_checkbox(
name = "terms_and_conditions",
"I agree to the terms and conditions"
)
)
),
bulma_form_field(
bulma_form_control(
bulma_form_radio("consent", "Yes"),
bulma_form_radio("consent", "No")
)
),
bulma_form_field(
grouped = TRUE,
bulma_form_control(
bulma_button(color = "success", "Submit"),
bulma_button(color = "danger", "Cancel")
)
),
bulma_form_field(
grouped = TRUE,
grouped_align = "right",
grouped_multiline = TRUE,
bulma_form_control(
bulma_button(color = "success", "Submit"),
bulma_button(color = "danger", "Cancel")
)
)
)),
bulma_demo_side(
bulma_form_field(
attach = TRUE,
attach_align = "centered",
bulma_form_control(bulma_form_input(name = "Search")),
bulma_form_control(bulma_button(color = "info", "Search"))
)
),
bulma_demo_side(
bulma_form_field(
attach = TRUE,
bulma_form_control(
expanded = TRUE,
bulma_form_input(name = "Search")
),
bulma_form_control(bulma_button(color = "info", "Search"))
)
),
bulma_demo_down(div(
bulma_form_horizontal_field(
bulma_form_horizontal_field_label("From"),
bulma_form_horizontal_field_body(
bulma_form_field(
bulma_form_control(
expanded = TRUE,
icons = "left",
bulma_form_icon("fas fa-user", aligh = "left"),
bulma_form_input(name = "username")
)
),
bulma_form_field(
bulma_form_control(
expanded = TRUE,
icons = "right",
bulma_form_icon("fas fa-lock", aligh = "right"),
bulma_form_input(name = "password")
)
)
)
),
bulma_form_horizontal_field(
bulma_form_horizontal_field_label(),
bulma_form_horizontal_field_body(
bulma_form_field(
bulma_form_control(
expanded = TRUE,
icons = "left",
bulma_form_icon("fas fa-user", aligh = "left"),
bulma_form_input(name = "username")
)
)
)
),
bulma_demo_side(
bulma_form_fieldset(
disabled = TRUE,
bulma_form_field(
attach = TRUE,
bulma_form_control(bulma_form_input(name = "Search")),
bulma_form_control(bulma_button(color = "info", "Search"))
)
)
)
))
)
}
bulma_demo_forms_input <- function() {
bulma_container(
bulma_title("Text Input"),
bulma_subtitle("The text input and its variations"),
bulma_demo_side(div(
bulma_form_input("plain", value = "plain"),
bulma_form_input("password", value = "password", type = "password"),
bulma_form_input("email", value = "email@example.com", type = "email"),
bulma_form_input("tel", value = "+639175588769", type = "tel")
)),
bulma_demo_side(
bulma_form_input("rounded", value = "Rounded", rounded = TRUE)
),
bulma_demo_side(
bulma_form_control(
loading = TRUE,
bulma_form_input("loading", value = "Loading")
)
),
bulma_demo_side(
bulma_form_control(
bulma_form_input("disabled", value = "Disabled", disabled = TRUE)
)
),
bulma_demo_side(
bulma_form_control(
bulma_form_input("readonly", value = "Readonly", readonly = TRUE)
)
),
bulma_demo_side(
bulma_form_control(
bulma_form_input("loading", value = "Loading", state = "static")
)
)
)
}
bulma_demo_forms_select <- function() {
bulma_container(
bulma_title("Select"),
bulma_subtitle("The browser built-in select dropdown, styled accordingly"),
bulma_demo_side(
bulma_form_select(
name = "select",
bulma_form_select_option("Choice 1"),
bulma_form_select_option("Choice 2"),
bulma_form_select_option("Choice 3")
)
),
bulma_demo_side(
bulma_form_control(
expanded = TRUE,
bulma_form_select(
name = "select",
bulma_form_select_option("Choice 1"),
bulma_form_select_option("Choice 2"),
bulma_form_select_option("Choice 3")
)
)
),
bulma_demo_side(
bulma_form_select(
name = "multiple",
multiple = TRUE,
rows = 3L,
bulma_form_select_option("Choice 1"),
bulma_form_select_option("Choice 2"),
bulma_form_select_option("Choice 3"),
bulma_form_select_option("Choice 4"),
bulma_form_select_option("Choice 5"),
bulma_form_select_option("Choice 6")
)
),
bulma_demo_side(
bulma_form_select(
name = "color",
color = "danger",
bulma_form_select_option("Choice 1"),
bulma_form_select_option("Choice 2"),
bulma_form_select_option("Choice 3")
)
),
bulma_demo_side(
bulma_form_select(
name = "rounded",
color = "warning",
rounded = TRUE,
bulma_form_select_option("Choice 1"),
bulma_form_select_option("Choice 2"),
bulma_form_select_option("Choice 3")
)
),
bulma_demo_side(
bulma_form_select(
name = "small",
color = "warning",
rounded = TRUE,
size = "small",
bulma_form_select_option("Choice 1"),
bulma_form_select_option("Choice 2"),
bulma_form_select_option("Choice 3")
)
),
bulma_demo_side(
bulma_form_control(
icons = "left",
bulma_form_select(
name = "icon",
icons = "left",
bulma_form_select_option("Choice 1"),
bulma_form_select_option("Choice 2"),
bulma_form_select_option("Choice 3")
),
bulma_form_icon("fas fa-globe", align = "left")
)
)
)
}
bulma_demo_forms_checkbox <- function() {
bulma_container(
bulma_title("Checkbox"),
bulma_subtitle("The 2-state checkbox in its native format"),
bulma_demo_side(
bulma_form_checkbox("checked", "Checked?")
),
bulma_demo_side(
bulma_form_checkbox("checked", "Checked?", disabled = TRUE)
)
)
}
bulma_demo_forms_radio <- function() {
bulma_container(
bulma_title("Radio Buttons"),
bulma_subtitle("The mutually exclusive radio buttons in their native
format"),
bulma_demo_side(
bulma_form_control(
bulma_form_radio("radio", "Choice 1"),
bulma_form_radio("radio", "Choice 2"),
bulma_form_radio("radio", "Choice 3")
)
),
bulma_demo_side(
bulma_form_control(
bulma_form_radio("radio", "Choice 1"),
bulma_form_radio("radio", "Choice 2", checked = TRUE),
bulma_form_radio("radio", "Choice 3", disabled = TRUE)
)
)
)
}
bulma_demo_forms_file <- function() {
bulma_container(
bulma_title("File Upload"),
bulma_subtitle("A custom file upload input, without JavaScript"),
bulma_demo_side(
bulma_form_file(
name = "file",
label = "Upload"
)
),
bulma_demo_side(
bulma_form_file(
name = "file",
label = "Upload",
file_name = "filename.png",
color = "primary"
)
),
bulma_demo_side(
bulma_form_file(
name = "file",
align = "right",
label = "Upload",
file_name = "filename.png",
color = "warning"
)
),
bulma_demo_side(
bulma_form_file(
name = "file",
label = "Upload",
fullwidth = TRUE,
file_name = "filename.png",
color = "warning"
)
),
bulma_demo_side(
bulma_form_file(
name = "file",
label = "Upload",
color = "info",
boxed = TRUE
)
),
bulma_demo_side(
bulma_form_file(
name = "file",
label = "Upload",
color = "link",
boxed = TRUE,
file_name = "duck.png"
)
)
)
}
