CustomizableFileInputComponent

Info Generate Packages

The code defines a Ruby class named `FileInputComponent` which inherits from `ApplicationComponent`. This class is responsible for generating HTML markup for a file input form control with customizable styles. The `template` method within the class constructs the HTML structure, which includes a label element grouping a file input element alongside optional span elements for labels. The file input element can be modified based on properties such as color, size, and additional styles like bordered or ghost style. The customization options are represented by CSS classes such as `file-input-primary`, `file-input-lg`, and `file-input-bordered`. The component ensures a consistent and styled user interface element for file selection in a web application.

# frozen_string_literal: true

# File input component is modifable by:
# color: file-input-primary, file-input-secondary, file-input-accent, file-input-info, file-input-success, file-input-warning, file-input-error
# size: file-input-lg, file-input-md, file-input-sm, file-input-xs
# and:
# file-input-bordered: adds border to input
# file-input-ghost: adds ghost style to input
# the 4 span label-texts are all optional

class FileInputComponent < ApplicationComponent
  def template
    label(class: "form-control w-full max-w-xs") do
      div(class: "label") do
        span(class: "label-text") { "Pick a file" }
        span(class: "label-text-alt") { "Alt label" }
      end
      input(type: "file", class: "file-input file-input-bordered w-full max-w-xs")
      div(class: "label") do
        span(class: "label-text-alt") { "Alt label" }
        span(class: "label-text-alt") { "Alt label" }
      end
    end
  end
end

Try a prompt