Tags Reference
See the preview tag annotations overview for more details.
@label
Sets the label displayed in the nav.
@label <text>
| <text> | Text to use for the label |
# @label Primary Button
def main_but
@logical_path
Sets a custom nav directory location for the preview to be displayed within.
@logical_path <directory_path>
| <directory_path> | Nav tree directory path |
# @logical_path path/to/directory
class FooComponentPreview < ViewComponent::Preview
# ...
end
@hidden
Prevents the target from appearing in the nav.
@hidden <value?>
| <value?> | Whether to hide the entity or not |
# @label hidden
def not_ready
@!group
Groups examples together for rendering in a single preview.
@!group <name?> ... @!endgroup
| <name?> | Optional group name. Will default to the name of the first example in the group if not provided. |
# @!group
def example_one
end
def example_two
end
# @!endgroup
@param
Specifies a dynamic preview parameter that will be editiable in the UI via a form input. Not valid for preview classes. Example methods only.
@param <name> [<type?>] <input_type?> <description?> <opts?>
| <name> | Name of the example method parameter that this should be used for. |
| <type?> | Optional data type to cast the value to before passing to the example as a parameter. Must be wrapped in square brackets. |
| <input_type?> | The type of form input to render. Will be guessed if not provided. |
| <description?> | Optional short description of what the param is used for, supplied as a double-quoted string. |
| <opts?> | Hash of param options |
# @param theme [Symbol] select { choices: [primary, secondary, danger] }
def example(theme: :primary)
@display
Sets the value of a display variable for use in preview layouts.
@display <key> <value>
# @display bg_color "#000"
def light_on_dark
@component
Identifies the component being rendered in the preview. Only necessary when it is not possible to guess it from the preview class name.
Can be applied multiple times if there is more than one component being rendered,
@component <class_name>
# @component Elements::ButtonComponent
# @component Elements::ToggleComponent
class InteractiveComponentsPreview < ViewComponent::Preview
@source
Replace the default content of the ‘Source’ panel with the contents of the specified file
@source <file_path>
| <file_path> | File path. Will be resolved relative to the current preview file if it begins with a “.” (i.e. |
# @source ./component.js
def default_example