The following tags are available for annotating preview classes:
@label
<text>
Customises the label to display in the nav.
Arguments:
<text>
|
String
|
Text to use for the label |
Example:
# @label Primary Button
def main_but
end
@logical_path
<directory_path>
Sets a custom nav directory location for the preview to be displayed at.
Arguments:
<directory_path>
|
String
|
Nav tree directory path |
Example:
# @logical_path path/to/directory
class FooComponentPreview < ViewComponent::Preview
# ...
end
@!group
<name?> ... @!endgroup
Groups scenarios together for rendering in a single preview.
Arguments:
<name?>
|
String
|
Optional group name. Will default to the name of the first example in the group if not provided. |
Example:
# @!group Colors
def red_button
end
def blue_button
end
# @!endgroup
@param
<name> [<type?>] <input_type?> <description?> <opts?>
Specifies a dynamic preview parameter that will be editiable in the UI via a form input. Cannot be applied at the class level. Used for scenario methods only.
Arguments:
<name>
|
String
|
Name of the example method parameter that this should be used for. |
<type?>
|
String
|
Optional data type to cast the value to before passing to the example as a parameter. Must be wrapped in square brackets. |
<input_type?>
|
String
|
The type of form input to render. Will be guessed if not provided. |
<description?>
|
String
|
Optional short description of what the param is used for, supplied as a double-quoted string. |
<opts?>
|
Hash
|
Hash of param options |
Example:
# @param theme [Symbol] select { choices: [primary, secondary, danger] }
def themed_example(theme: :primary)
end
@display
<key> <value>
Sets the value of a display variable for use in preview layouts.
Example:
# @display bg_color "#000"
def light_on_dark
end
@component
<identifier>
Identifies the component being rendered in the preview.
Example:
# @component Elements::ButtonComponent
# @component elements/button.html.erb
class InteractiveComponentsPreview < ViewComponent::Preview
end
@source
<file_path>
Replace the default content of the 'Source' panel with the contents of the specified file. Cannot be applied at the class level. Used for scenario methods only.
Arguments:
<file_path>
|
String
|
File path. Will be resolved relative to the current preview file if it begins with a “.” (i.e. |
Example:
# @source ./component.js
def default_example
end
@after_render
<transformer_method_name>
Specify a method to transform the preview HTML prior to display.
Arguments:
<transformer_method_name>
|
String
|
The (symbolized) name of the method to use |
Example:
# @after_render :do_transform
def example
# ...
end
private
def do_transform(html)
html + "this has been transformed"
end