View
The View system provides a consistent container structure for displaying content within the application.
Base Structure
The Layout element is the core component of every View, providing a consistent container for your content. Views can optionally include a Title Bar for additional context.
View with Title Bar
The view view--full classes create a full-width view.
Also available are view--half_horizontal, view--half_vertical, view--quadrant.
When combined with a title bar, it provides context and navigation options.
If you're building a screen in the markup editor, you do not need to wrap your content
with the view view--{{size}} classes.
The example code below is sufficient for any layout.
Title
Instance
<div class="layout">
<!-- Your content here -->
</div>
<div class="title_bar">
<img class="image" src="/images/plugins/trmnl--render.svg" />
<span class="title">Title</span>
<span class="instance">Instance</span>
</div>View without Title Bar
For simpler interfaces, you can create a view without a title bar using just the base view classes.
<div class="layout">
<!-- Your content here -->
</div>Screen Container Modifiers
The screen container that wraps your views has a no-bleed option that removes padding. This can be controlled through Private and Public Plugin settings, or applied directly in your code when developing locally.
No Bleed Modifier
The screen--no-bleed modifier removes the default padding around the screen container,
allowing content to extend fully to the edges.
<div class="screen screen--no-bleed">
<div class="view view--full">
<div class="layout">
<!-- Your content here -->
</div>
</div>
</div>