inlineCSS: Add inline CSS
In shinyjs: Easily Improve the User Experience of Your Shiny Apps in Seconds
Description
Usage
Arguments
Value
Examples
Description
Add inline CSS to a Shiny app. This is simply a convenience function that
gets called from a Shiny app's UI to make it less tedious to add inline CSS.
If there are many CSS rules, it is recommended to use an external stylesheet.
CSS is a simple way to describe how elements on a web page should be
displayed (position, colour, size, etc.). You can learn the basics
at W3Schools.
Usage
1
inlineCSS(rules)
Arguments
rules
The CSS rules to add. Can either be a string with valid
CSS code, or a named list of the form
list(selector = declarations), where selector is a valid
CSS selector and declarations is a string or vector of declarations.
See examples for clarification.
Value
Inline CSS code that is automatically inserted to the app's
<head> tag.
Examples
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
if (interactive()) {
library(shiny)
# Method 1 - passing a string of valid CSS
shinyApp(
ui = fluidPage(
inlineCSS("#big { font-size:30px; }
.red { color: red; border: 1px solid black;}"),
p(id = "big", "This will be big"),
p(class = "red", "This will be red and bordered")
),
server = function(input, output) {}
)
# Method 2 - passing a list of CSS selectors/declarations
# where each declaration is a full declaration block
shinyApp(
ui = fluidPage(
inlineCSS(list(
"#big" = "font-size:30px",
".red" = "color: red; border: 1px solid black;"
)),
p(id = "big", "This will be big"),
p(class = "red", "This will be red and bordered")
),
server = function(input, output) {}
)
# Method 3 - passing a list of CSS selectors/declarations
# where each declaration is a vector of declarations
shinyApp(
ui = fluidPage(
inlineCSS(list(
"#big" = "font-size:30px",
".red" = c("color: red", "border: 1px solid black")
)),
p(id = "big", "This will be big"),
p(class = "red", "This will be red and bordered")
),
server = function(input, output) {}
)
}
Example output
Attaching package: 'shinyjs'
The following objects are masked from 'package:methods':
removeClass, show
shinyjs documentation built on Dec. 23, 2021, 5:06 p.m.
R Package Documentation
Browse R Packages
We want your feedback!
Note that we can't provide technical support on individual packages. You should contact the package authors for that.
Description Usage Arguments Value Examples
Description
Add inline CSS to a Shiny app. This is simply a convenience function that
gets called from a Shiny app's UI to make it less tedious to add inline CSS.
If there are many CSS rules, it is recommended to use an external stylesheet.
CSS is a simple way to describe how elements on a web page should be
displayed (position, colour, size, etc.). You can learn the basics
at W3Schools.
Usage
1 | inlineCSS(rules)
|
Arguments
rules |
The CSS rules to add. Can either be a string with valid
CSS code, or a named list of the form
|
Value
Inline CSS code that is automatically inserted to the app's
<head> tag.
Examples
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 | if (interactive()) {
library(shiny)
# Method 1 - passing a string of valid CSS
shinyApp(
ui = fluidPage(
inlineCSS("#big { font-size:30px; }
.red { color: red; border: 1px solid black;}"),
p(id = "big", "This will be big"),
p(class = "red", "This will be red and bordered")
),
server = function(input, output) {}
)
# Method 2 - passing a list of CSS selectors/declarations
# where each declaration is a full declaration block
shinyApp(
ui = fluidPage(
inlineCSS(list(
"#big" = "font-size:30px",
".red" = "color: red; border: 1px solid black;"
)),
p(id = "big", "This will be big"),
p(class = "red", "This will be red and bordered")
),
server = function(input, output) {}
)
# Method 3 - passing a list of CSS selectors/declarations
# where each declaration is a vector of declarations
shinyApp(
ui = fluidPage(
inlineCSS(list(
"#big" = "font-size:30px",
".red" = c("color: red", "border: 1px solid black")
)),
p(id = "big", "This will be big"),
p(class = "red", "This will be red and bordered")
),
server = function(input, output) {}
)
}
|
Example output
Attaching package: 'shinyjs'
The following objects are masked from 'package:methods':
removeClass, show
R Package Documentation
Browse R Packages
We want your feedback!
Note that we can't provide technical support on individual packages. You should contact the package authors for that.
Embedding an R snippet on your website
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.