Contents

require_relative '../helpers/indented_grid'

Voom::Presenters.define(:text_fields) do
  helpers Demo::Helpers::IndentedGrid
  attach :top_nav
  attach :component_drawer
  page_title 'Text Fields'

  indented_grid do
    headline 'Text'

    text_field name: :text do
      label 'Text...'
    end

    title 'Password'

    text_field name: :password, password: true do
      label 'Password'
    end

    headline 'Numeric'
    # Client side validation with hints
    title 'With Hints'
    text_field name: :numeric do
      label 'Number...'
      pattern /-?[0-9]*(\.[0-9]+)?/
      hint 'Input should be a number!'
    end

    title 'With Errors'
    text_field name: :guess_me do
      label 'Guess a number...'
      pattern /-?[0-9]*(\.[0-9]+)?/
      value '7'
      error 'Input is not the right number!'
    end


    title 'With Leading Icon'
    text_field name: :numeric do
      label 'Amount'
      icon :attach_money, position: :left
    end

    title 'With Trailing Icon'
    text_field name: :numeric do
      label 'Name'
      icon :remove_red_eye
    end

    card do
      headline 'Field Level Events'
      title 'Text Fields'
      body 'This demonstrates that a change event will submit the  field value to the event action. '\
                 'This works with posts and replace actions'
      text_field name: :myfield do
        label 'Data to post'
        event :change do
          replaces :context_list, :context_list
        end
      end
      attach :context_list
    end
    
    attach :code, file: __FILE__
  end
end

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
voom-presenters-0.2.0	app/demo/components/text_fields.pom