Create a wa-page component — wa_page • shiny.webawesome

Generated wrapper for the Web Awesome wa-page component. Generated from Web Awesome metadata.

Usage

wa_page(
  ...,
  id = NULL,
  class = NULL,
  style = NULL,
  dir = NULL,
  disable_navigation_toggle = NULL,
  lang = NULL,
  mobile_breakpoint = NULL,
  nav_open = NULL,
  navigation_placement = NULL,
  view = NULL,
  aside = NULL,
  banner = NULL,
  footer = NULL,
  header = NULL,
  main_footer = NULL,
  main_header = NULL,
  menu = NULL,
  navigation = NULL,
  navigation_footer = NULL,
  navigation_header = NULL,
  navigation_toggle = NULL,
  navigation_toggle_icon = NULL,
  skip_to_content = NULL,
  subheader = NULL
)

Arguments

...: Child content for the component's default slot.
id: Optional DOM id attribute for HTML, CSS, and JS targeting.
class: Optional CSS class string.
style: Optional inline CSS style string.
dir: String. Optional Web Awesome attribute.
disable_navigation_toggle: Boolean. Default: FALSE. Determines whether or not to hide the default hamburger button. This will automatically flip to "TRUE" if you add an element with data-toggle-nav anywhere in the element light DOM. Generally this will be set for you and you don't need to do anything, unless you're using SSR, in which case you should set this manually for initial page loads.
lang: String. Optional Web Awesome attribute.
mobile_breakpoint: String. Default: 768px. At what page width to hide the "navigation" slot and collapse into a hamburger button. Accepts both numbers (interpreted as px) and CSS lengths (e.g. 50em), which are resolved based on the root element.
nav_open: Boolean. Default: FALSE. Whether or not the navigation drawer is open. Note, the navigation drawer is only "open" on mobile views.
navigation_placement: Enumerated string. Allowed values: end, start. Default: start. Where to place the navigation when in the mobile viewport.
view: Enumerated string. Allowed values: desktop, mobile. Default: desktop. The view is a reflection of the "mobileBreakpoint", when the page is larger than the mobile-breakpoint (768px by default), it is considered to be a "desktop" view. The view is merely a way to distinguish when to show/hide the navigation. You can use additional media queries to make other adjustments to content as necessary. The default is "desktop" because the "mobile navigation drawer" isn't accessible via SSR due to drawer requiring JS.
aside: Content to be shown on the right side of the page. Typically contains a table of contents, ads, etc. This section "sticks" to the top as the page scrolls.
banner: The banner that gets display above the header. The banner will not be shown if no content is provided.
footer: The content to display in the footer. This is always displayed underneath the viewport so will always make the page "scrollable".
header: The header to display at the top of the page. If a banner is present, the header will appear below the banner. The header will not be shown if there is no content.
main_footer: Footer to display inline below the main content.
main_header: Header to display inline above the main content.
menu: The left side of the page. If you slot an element in here, you will override the default navigation slot and will be handling navigation on your own. This also will not disable the fallback behavior of the navigation button. This section "sticks" to the top as the page scrolls.
navigation: The main content to display in the navigation area. This is displayed on the left side of the page, if menu is not used. This section "sticks" to the top as the page scrolls.
navigation_footer: The footer for a navigation area. On mobile this will be the footer for <wa-drawer>.
navigation_header: The header for a navigation area. On mobile this will be the header for <wa-drawer>.
navigation_toggle: Use this slot to slot in your own button + icon for toggling the navigation drawer. By default it is a <wa-button> + a 3 bars <wa-icon>
navigation_toggle_icon: Use this to slot in your own icon for toggling the navigation drawer. By default it is 3 bars <wa-icon>.
skip_to_content: The "skip to content" slot. You can override this If you would like to override the Skip to content button and add additional "Skip to X", they can be inserted here.
subheader: A subheader to display below the header. This is a good place to put things like breadcrumbs.

Value

An HTML tag for the component.

Shiny Bindings

None.