@psff/cmp-tag v1.0.4

@psff/cmp-tag psff-tag

Tags are compact elements that allow users to select a choice, filter content, trigger an action or just highlight something.

This component render a tag. If a tag is clickable (has click event), it will be a <button>; on the other hand it will be a <div>.

Getting started

1. Setup the package as a dependencie.

   yarn add @psff/cmp-tag

2. Use the component <psff-tag />.

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

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

   <psff-tag class="my-tag">Click me!</psff-tag>
   <psff-tag class="my-tag">
     <template #icon>X</template>
     Close!
   </psff-tag>

Specifications

Parameters:

Extend <button> tag parameters with:

• type (string, default: 'button'): the HTML button type
• icon-position ('left'|'right', default: 'right'): the icon position

Events

This component does not emit any special events.

Custom propperties:

• Generic:

  • --psff-tag-background-color (default #f0f5f9)
  • --psff-tag-border-color (default #e0e5e9)
  • --psff-tag-border-radius (default .25rem)
  • --psff-tag-border-size (default 0)
  • --psff-tag-font-family (default: inherit)
  • --psff-tag-font-size (default: inherit)
  • --psff-tag-icon-spacing (default .2rem)
  • --psff-tag-line-height (default: inherit)
  • --psff-tag-label-color (default #5e88fc)
  • --psff-tag-padding (default .3125rem .5rem)
  • --psff-tag-width (default: inherit)

• Disabled (for clickable tag):

  • --psff-tag-background-color-disabled (default: #ede9e5)
  • --psff-tag-border-color-disabled (default --psff-tag-border-color)
  • --psff-tag-label-color-disabled (default: #313131)

• On hovered (for clickable tag):

  • --psff-tag-background-color-hovered (default: --psff-tag-background-color)
  • --psff-tag-border-color-hovered (default --psff-tag-border-color)
  • --psff-tag-label-color-hovered (default: --psff-tag-label-color)

• On focused (for clickable tag):

  • --psff-tag-background-color-focused (default: --psff-tag-background-color)
  • --psff-tag-border-color-focused (default --psff-tag-border-color)
  • --psff-tag-label-color-focused (default: --psff-tag-label-color)