Ribbon

ERibbon Ribbon is a custom micro-element that can be applied to specific elements such as cards or images to provide fixed information. Demo Here

Usage

<template>
  <ERibbon position="top-right">
    <template #element>
      <img src="/shoes.jpg" alt="Nike Air Max 270 Men's Shoes"/>
    </template>
    <template #content> Out of Stock</template>
  </ERibbon>
</template>

Props

For ERibbon component, the following props are available:

Prop	Type	Default	Note
rounded	Boolean	false	Applies full rounded style.
square	Boolean	false	Removes rounded corners of the element.
variant	String	"default"	The ERibbon element can be displayed in many ways: default, slide, folded ,header,footer, gradient, bookmark ,vertical. Demo Here
color	String	"primary"	The given color is applied to the ribbon - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
icon	Object	-	By using icon prop the slide ribbon element will be visualized with an Icon.More Info about icons here.
position	String	top-right	The position prop allows the ribbon to be position relative to the activator.The element can appear from the top-right, bottom-right,top-left or bottom-left edge of the parent.

Slots

The ERibbon component provides following slots that enable you to customize the content.

Slot	Description
element	The slot used for the ribbon's element.
content	The slot used for the ribbon's content.