@psff/cmp-textarea

@psff/cmp-textarea psff-textarea

Component to show textareas.

Getting started

• Setup the package as a dependencie.

  yarn add @psff/cmp-textarea
  

• Use the component <psff-textarea />.

  import PsffTextarea from '@psff/cmp-textarea'
  
  @Component({
    components: {
      'psff-textarea': PsffTextarea,
    },
  })
  export default class MyComponent extends Vue {}
  

  .my-textarea {
    --psff-textarea-background-color: #fabada;
    --psff-textarea-label-color: black;
  }
  

  <psff-textarea
    class="my-textarea"
    label="Email"
    type="email"
    placeholder="ex. [e-mail]" />
  

Specifications

Component <psff-textarea />

This component render an textarea.

Parameters:

Extend <textarea> tag parameters with:

• label (string, optional): to show a label for the textarea.
• errorMessage (string, optional): 'right')*: to show an error message.

Events

• change (value: string): new value after user interaction.

Custom propperties:

• Generic:

  • --psff-textarea-label-color (default #5e88fc)
  • --psff-textarea-label-font-family (default inherit)
  • --psff-textarea-label-font-size (default inherit)
  • --psff-textarea-label-font-weight (default inherit)
  • --psff-textarea-label-line-height (default inherit)
  • --psff-textarea-label-margin-bottom (default 4px)
  • --psff-textarea-background-color (default #fff)
  • --psff-textarea-border-color (default #b8cbfd)
  • --psff-textarea-border-color-error (default #ffc0b9)
  • --psff-textarea-border-radius (default 4px)
  • --psff-textarea-border-size (default 1px)
  • --psff-textarea-box-shadow (default 2px 2px 4px rgba(94, 136, 252, .1))
  • --psff-textarea-color (default #313131)
  • --psff-textarea-font-family (default inherit)
  • --psff-textarea-font-size (default inherit)
  • --psff-textarea-font-weight (default inherit)
  • --psff-textarea-line-height (default inherit)
  • --psff-textarea-error-color (default #fb5f4f)
  • --psff-textarea-error-font-family (default inherit)
  • --psff-textarea-padding (default 16px)
  • --psff-textarea-placeholder-color (default none)

• Disabled:

  • --psff-textarea-label-color-disabled (default #848484)
  • --psff-textarea-background-color-disabled (default #ede9e5)
  • --psff-textarea-border-color-disabled (default #afaeaf)
  • --psff-textarea-color-disabled (default #afaeaf)

• Focused:

  • --psff-textarea-border-color-focused (default #5e88fc)
  • --psff-textarea-border-color-error-focused (default #fb5f4f)