@psff/cmp-tag

@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

• Setup the package as a dependencie.

  yarn add @psff/cmp-tag
  

• 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)