Overview
Lookbook ships with a number of pre-defined param input types that are used when adding dynamic preview parameters to your previews.
However if you need a param type that isn’t provided by Lookbook (or want to override one of the existing ones) you can easily add your own and then reference them in your @param tags.
Adding a custom input
To define a custom input use the Lookbook.add_input_type method when when you configure your Lookbook installation:
Lookbook.
add_input_type
(name, partial_path, opts = {})
Arguments:
name
|
Symbol
|
Unique input type name |
partial_path
|
String
|
Path to the partial template used to render the input |
opts
|
Hash
|
Set of default options to be passed to the input. Any supplied param options will override these values |
For example, to create a customised url input with a https:// prefix in front of it you could do the following:
# config/application.rb
Lookbook.add_input_type(:prefixed_url, "inputs/prefixed_url")
<!-- app/views/inputs/_prefixed_url.html.erb -->
<div>
<strong>https://</strong>
<%= text_field_tag(name, value,
**input_options,
type: "url",
"x-model": "value"
) %>
</div>
This input field will then be rendered when using the prefixed_url input type in @param tags:
class IframeComponentPreview < ViewComponent::Preview
# @param src prefixed_url
def default(src: 'example.com')
render IframeComponent.new(src: src)
end
end
See the input template docs for more details on available template variables and helpers.