Overview
Previews render with the application layout by default, but it is strongly recommended to use a standalone preview layout for previews so it can be customised without the chance of affecting the main application.
Setting the layout
Use the layout option to set a specific layout for an individual preview class:
# test/components/previews/example_component_preview.rb
class ExampleComponentPreview < Lookbook::Preview
layout "admin"
# ...
end
To set a custom layout globally for all previews, use the preview_layout config option:
# Set the default layout to app/views/layouts/component_preview.html.erb
config.lookbook.preview_layout = "component_preview"
Note that if you are using ViewComponent, this option should be set via the view_component.default_preview_layout config option instead, as per the ViewComponent docs:
config.view_component.default_preview_layout = "component_preview"
Lookbook will respect this value when rendering its previews.
Preview layout example
An example preview layout template is shown below. It uses display variables to allow the background color and and the maximum width of the wrapper to be set on a per-preview basis.
<!-- app/views/layouts/component_preview.html.erb -->
<!DOCTYPE html>
<html style="background-color: <%= params.dig(:lookbook, :display, :bg_color) || "white" %>">
<head>
<title>Component Preview</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= stylesheet_pack_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
</head>
<body style="padding: 20px">
<div style="
margin-left: auto;
margin-right: auto;
max-width: <%= params.dig(:lookbook, :display, :max_width) || "100%" %>
">
<%= yield %> <!-- rendered preview will be injected here -->
</div>
</body>
</html>
Preview helpers
Lookbook includes a few helpers that are only accessible in preview templates and can be used to help clean up display param and custom data access, if desired:
lookbook_display
(key, fallback = nil)
No description available.
lookbook_data
(key, fallback = nil)
No description available.
url_for
(*args)
No description available.