Class: Primer::Alpha::Layout
- Defined in:
- app/components/primer/alpha/layout.rb
Overview
‘Layout` provides foundational patterns for responsive pages. `Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.
On smaller screens, `Layout` uses vertically stacked rows to display content.
‘Layout` flows as both column, when there’s enough horizontal space to render both ‘Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance); or it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device). `Layout` should always work in any screen size.
Defined Under Namespace
Constant Summary collapse
- FIRST_IN_SOURCE_DEFAULT =
:sidebar
- FIRST_IN_SOURCE_OPTIONS =
[FIRST_IN_SOURCE_DEFAULT, :main].freeze
- SIDEBAR_COL_PLACEMENT_DEFAULT =
:start
- SIDEBAR_COL_PLACEMENT_OPTIONS =
[SIDEBAR_COL_PLACEMENT_DEFAULT, :end].freeze
- GUTTER_DEFAULT =
:default
- GUTTER_MAPPINGS =
{ :none => "Layout--gutter-none", :condensed => "Layout--gutter-condensed", :spacious => "Layout--gutter-spacious", GUTTER_DEFAULT => "" }.freeze
- GUTTER_OPTIONS =
GUTTER_MAPPINGS.keys.freeze
- STACKING_BREAKPOINT_DEFAULT =
:md
- STACKING_BREAKPOINT_MAPPINGS =
{ :sm => "", STACKING_BREAKPOINT_DEFAULT => "Layout--flowRow-until-md", :lg => "Layout--flowRow-until-lg" }.freeze
- STACKING_BREAKPOINT_OPTIONS =
STACKING_BREAKPOINT_MAPPINGS.keys.freeze
- SIDEBAR_ROW_PLACEMENT_DEFAULT =
:start
- SIDEBAR_ROW_PLACEMENT_OPTIONS =
[SIDEBAR_ROW_PLACEMENT_DEFAULT, :end, :none].freeze
- SIDEBAR_WIDTH_DEFAULT =
:default
- SIDEBAR_WIDTH_MAPPINGS =
{ SIDEBAR_WIDTH_DEFAULT => "", :narrow => "Layout--sidebar-narrow", :wide => "Layout--sidebar-wide" }.freeze
- SIDEBAR_WIDTH_OPTIONS =
SIDEBAR_WIDTH_MAPPINGS.keys.freeze
Constants inherited from Component
Component::INVALID_ARIA_LABEL_TAGS
Constants included from Status::Dsl
Constants included from ViewHelper
Constants included from TestSelectorHelper
TestSelectorHelper::TEST_SELECTOR_TAG
Constants included from FetchOrFallbackHelper
FetchOrFallbackHelper::InvalidValueError
Constants included from Primer::AttributesHelper
Primer::AttributesHelper::PLURAL_ARIA_ATTRIBUTES, Primer::AttributesHelper::PLURAL_DATA_ATTRIBUTES
Instance Method Summary collapse
-
#initialize(stacking_breakpoint: STACKING_BREAKPOINT_DEFAULT, first_in_source: FIRST_IN_SOURCE_DEFAULT, gutter: :default, **system_arguments) ⇒ Layout
constructor
A new instance of Layout.
- #render? ⇒ Boolean
Methods inherited from Component
Methods included from JoinStyleArgumentsHelper
Methods included from TestSelectorHelper
Methods included from FetchOrFallbackHelper
#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?
Methods included from ClassNameHelper
Methods included from Primer::AttributesHelper
#aria, #data, #merge_aria, #merge_data, #merge_prefixed_attribute_hashes
Constructor Details
#initialize(stacking_breakpoint: STACKING_BREAKPOINT_DEFAULT, first_in_source: FIRST_IN_SOURCE_DEFAULT, gutter: :default, **system_arguments) ⇒ Layout
Returns a new instance of Layout.
86 87 88 89 90 91 92 93 94 95 96 97 |
# File 'app/components/primer/alpha/layout.rb', line 86 def initialize(stacking_breakpoint: STACKING_BREAKPOINT_DEFAULT, first_in_source: FIRST_IN_SOURCE_DEFAULT, gutter: :default, **system_arguments) @first_in_source = fetch_or_fallback(FIRST_IN_SOURCE_OPTIONS, first_in_source, FIRST_IN_SOURCE_OPTIONS) @system_arguments = system_arguments @system_arguments[:tag] = :div @system_arguments[:classes] = class_names( "Layout", STACKING_BREAKPOINT_MAPPINGS[fetch_or_fallback(STACKING_BREAKPOINT_OPTIONS, stacking_breakpoint, STACKING_BREAKPOINT_DEFAULT)], GUTTER_MAPPINGS[fetch_or_fallback(GUTTER_OPTIONS, gutter, GUTTER_DEFAULT)], system_arguments[:classes] ) end |
Instance Method Details
#render? ⇒ Boolean
99 100 101 |
# File 'app/components/primer/alpha/layout.rb', line 99 def render? main? && end |