Create a configurable LCARS box.
lcarsBox(
...,
title = NULL,
subtitle = NULL,
corners = c(1, 4),
sides = c(1, 3, 4),
left_inputs = NULL,
right_inputs = NULL,
color = "atomic-tangerine",
side_color = color,
title_color = color,
subtitle_color = color,
title_right = TRUE,
subtitle_right = TRUE,
clip = TRUE,
width_left = 150,
width_right = 150,
width = "100%"
)box contents.
character, box title at top right.
character, box subtitle at bottom right.
integer, 1:4, a vector specifying which corner elbows
to include: top left, top right, bottom right, bottom left. See details.
integer, 1:4, a vector specifying which sides to include
panels: top, right, bottom, left. See details.
optional input column for left side, for example a column
of buttons made with inputColumn. See details.
optional input column for right side, for example a
column of buttons made with inputColumn. See details.
box border colors. See details.
box border colors. See details.
text title color.
text subtitle color.
logical, right align title.
logical, right align subtitle.
logical, use empty margin space. See details.
numeric, the width of the left side panel in pixels. This also adjusts associated corner elbows to match. Defaults to the maximum allowed: 150.
numeric, the width of the right side panel in pixels. This also adjusts associated corner elbows to match. Defaults to the maximum allowed: 150.
a valid CSS unit, the width of the entire box. Fixed pixel width recommended. See details.
an HTML widget
This function allows you to customize the inclusion and colors of specific border components of the box. The defaults are closer to standard LCARS style. You can turn on or off specific corner elbows, connecting side panels, control colors of each, as well as title and subtitle inclusion, color and alignment.
Control which corners of the box display the characteristic LCARS elbow, clockwise from top left. The top and bottom borders are independent of one another. Each work in the same manner. For each, you can have a left elbow (default), a right elbow, or both.
When only one corner is present (on top or on bottom), the bar extends to the other corner and terminates with the characteristic LCARS half pill if the panel border is included (see side panel section below). If the side between the elbow areas is excluded, only the elbows are displayed.
If both elbows are excluded from the top or from the bottom, a simple,
straight lcarsHeader element is placed above or below the main
content area instead, but this can be controlled via sides.
Control which sides of the box include an LCARS-styled border, clockwise
from top left. Sides connect elbows using straight bars. The top and bottom
sides are where title and subtitle text are placed. The title for the top
and subtitle for the bottom are included in the bar with standard LCARS
right alignment, which can be switched to left. If the top or bottom side
panel is excluded, the vertical space remains if title or
subtitle are included, respectively, retaining the text labels;
otherwise the space is removed.
By default, left and right sides are 150 pixels wide; top and bottom sides
are 30 pixels tall. The top and bottom are fixed, but the widths of the left
and right side panels can be adjusted using width_left and
width_right, respectively. They can only be adjusted down to smaller
widths. This is to ensure proper scaling for connected corners. The side
panels are not meant to accommodate wider inputs and should primarily be
used for small buttons and short text.
Input columns are different from left and right sides. The latter refers to whether or not there are vertical connecting bars from elbow to elbow. An input column represents a separate element that is placed in the left or right side panel area above the plain side panel bar itself.
If the side is included and a column of inputs is provided, they combine vertically to form the side panel. Some amount of plain sidebar will pad the bottom beneath any input column, however tall. If the side is excluded, the input column will take up the entire vertical space.
If the side is excluded and no input column is provided, the side panel area is blank. The main content area extends left or right to fill any completely missing left or right side panel. To restrict this, use a black side panel to match the background.
Since the inputs contained in an input column are defined separately and
passed to lcarsBox, they should be defined to have widths that match
the box side panel widths.
Box color can be any color given in hex format. Named colors must be LCARS
colors. See lcarsdata for options. By default, all border
colors inherit from a single color passed to color.
color is recycled to length four as needed. color actually
defines all four corner elbow colors. For corner elbows, use a vector of
four colors for the top left, top right, bottom right, and bottom left,
respectively.
Similarly for the bars between elbows with side_colors, use a vector
of four colors for the top, right side, bottom, and left side. This is also
recycled to length four. If not provided, it inherits from color.
title_color and subtitle_color are scalar. They inherit from
the first color in color.
When at least one corner elbow is present on a top or bottom side, that side
will include empty margin space to the inside of the elbow. This space is
part of the grid area of the side panel. This is why main panel content does
not extend into it. You can override this and make use of this space by
setting clip = FALSE.
Note that this should only be done when both side panels are present so that the main panel content is not directly under or above the elbow near the extreme edge of the box. If you do not want a side panel, you can include it, but set its color to match the background.
There are limitations to the container responsiveness of the LCARS box and
sweep. In some cases, using percentage width, e.g., width = "100%"
will work, but it may respond sluggishly or may not work at all. Fixed pixel
width is recommended for lcarsBox and lcarsSweep. Regardless
of responsiveness, these widgets are also not intended to fit very small
displays.
## Only run examples in interactive R sessions
if (interactive()) {
ui <- lcarsPage(
lcarsBox(
fluidRow(
column(3,
h4("Main panel area"),
HTML("<p>Some paragraph text and <a href='#'>a link</a>
with LCARS styling.</p>
<p>Use <code>lcarsPage</code>
to apply the LCARS theme and <code>lcarsBox</code>
to draw a characteristic box for framing content.</p>
<p>Many of the <code>lcarsBox</code>
properties are configurable.
See <code>lcars::lcarsApp(\"box\")</code> for a demo</p>")
),
column(9, plotOutput("plot1"))
),
title = "box title",
left_inputs = inputColumn(lcarsButton("btn1", "A button"))
)
)
server <- function(input, output) {
output$plot1 <- renderPlot({
hist(rnorm(500))
})
}
shinyApp(ui, server)
}