Tags Reference


        
        @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


        
        @hidden

Prevents the target preview class or scenario from appearing in the nav.

Example:

# @hidden
def not_ready
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.

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.

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. ./component.js), otherwise it will be resolved relative to the base preview directory

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

Arguments:

Example:

Arguments:

Example:

Example:

Arguments:

Example:

Arguments:

Example:

Example:

Example:

Arguments:

Example:

Arguments:

Example:

User Guide

Extending Lookbook

API

Elsewhere