class Shared::Field(T)
- Shared::Field(T)
- BaseComponent
- Lucky::BaseComponent
- Reference
- Object
Overview
This component is used to make it easier to render the same fields styles throughout your app.
Extensive documentation at: https://luckyframework.org/guides/frontend/html-forms#shared-components
Basic usage:
Renders a text input by default and will guess the label name "Name"
mount Shared::Field, op.name
Call any of the input methods on the block
mount Shared::Field, op.email, &.email_input
Add other HTML attributes
mount Shared::Field, op.email, &.email_input(autofocus: "true")
Pass an explicit label name
mount Shared::Field, attribute: op.username, label_text: "Your username"
Customization
You can customize this component so that fields render like you expect. For example, you might wrap it in a div with a "field-wrapper" class.
div class: "field-wrapper" label_for field yield field mount Shared::FieldErrors, field end
You may also want to have more components if your fields look
different in different parts of your app, e.g. CompactField
or
InlineTextField
Included Modules
- Lucky::CatchUnpermittedAttribute
Defined in:
components/shared/field.crConstant Summary
-
ASSIGNS =
[attribute : Avram::PermittedAttribute(T), label_text : String | ::Nil] of Nil
-
This component is used to make it easier to render the same fields styles throughout your app.
Extensive documentation at: https://luckyframework.org/guides/frontend/html-forms#shared-components
Basic usage:
Renders a text input by default and will guess the label name "Name"
mount Shared::Field, op.name
Call any of the input methods on the block
mount Shared::Field, op.email, &.email_input
Add other HTML attributes
mount Shared::Field, op.email, &.email_input(autofocus: "true")
Pass an explicit label name
mount Shared::Field, attribute: op.username, label_text: "Your username"
Customization
You can customize this component so that fields render like you expect. For example, you might wrap it in a div with a "field-wrapper" class.
div class: "field-wrapper" label_for field yield field mount Shared::FieldErrors, field end
You may also want to have more components if your fields look different in different parts of your app, e.g.
CompactField
orInlineTextField
Constructors
-
.new(attribute : Avram::PermittedAttribute(T), label_text : String | Nil = nil, **unused_exposures)
This component is used to make it easier to render the same fields styles throughout your app.
Class Method Summary
-
.file_location
Returns the relative file location to the project root.
Instance Method Summary
- #attribute
- #label_text
- #render(&)
-
#render
Use a text_input by default
Class methods inherited from class BaseComponent
file_location
file_location
Constructor Detail
This component is used to make it easier to render the same fields styles throughout your app.
Extensive documentation at: https://luckyframework.org/guides/frontend/html-forms#shared-components
Basic usage:
Renders a text input by default and will guess the label name "Name"
mount Shared::Field, op.name
Call any of the input methods on the block
mount Shared::Field, op.email, &.email_input
Add other HTML attributes
mount Shared::Field, op.email, &.email_input(autofocus: "true")
Pass an explicit label name
mount Shared::Field, attribute: op.username, label_text: "Your username"
Customization
You can customize this component so that fields render like you expect. For example, you might wrap it in a div with a "field-wrapper" class.
div class: "field-wrapper" label_for field yield field mount Shared::FieldErrors, field end
You may also want to have more components if your fields look
different in different parts of your app, e.g. CompactField
or
InlineTextField
Class Method Detail
Returns the relative file location to the project root. e.g. src/components/my_component.cr