@forter/popover

    2.13.0 • Public • Published

    fc-popover

    An element to be used to show additional content or operations

    Usage

    <script>
       import '@forter/popover';
    </script>
    
    <fc-popover>
         <fc-button slot="toggle">Open</fc-button>
         <div slot="content">
             <div>This is the content</div>
             <div>Of the famous popover</div>
             <div>From forter web components</div>
             <div>...</div>
         </div>
    </fc-popover>

    Examples

    Open
    Forter protects all of your online transactions from fraud Forter automatically evaluates the risk of each transaction affected by the directive protects your loyalty program accounts from unauthorized access or attempts to steal their points
    Open Ecommerce Forter protects all of your online transactions from fraud INR Solution Forter automatically evaluates the risk of each transaction affected by the directive Loyalty protects your loyalty program accounts from unauthorized access or attempts to steal their points Returns Identify and block consumers who abuse your business’ refund policies.
     <fc-list-item>
       <fc-icon icon="promotions"></fc-icon>
       <label> Promotions </label>
       <section> Prevent financial losses due to users who take advantage of your promotions and coupons.. </section>
     </fc-list-item>
    
     <fc-list-item>
       <fc-icon icon="gateway"></fc-icon>
       <label> Gateway </label>
       <section> determine whether credit card applicants are legitimate to safeguard your customer relationships </section>
     </fc-list-item>
    
     <fc-list-item>
         <fc-icon icon="developer"></fc-icon>
         <label>Developer</label>
         <section> Integration tools to help faster and smoother integration to Forter.</section>
     </fc-list-item>
    
    ```

    Properties

    Property Attribute Type Default Description
    close any
    closeable closeable boolean false whether popover is closed by clicking content.
    horizontaloffset horizontaloffset number 0 horizontal offset for the content in pixels
    open open boolean false whether popover is opened.
    openonhover openonhover boolean false whether popover is opened by mouse over instead of click.
    position position "top" | "bottom" | "left" | "right" | "right_top" | "left_top" | "bottom_left" | "bottom_right" popover position with relative to toggle slot
    registerToggle any
    toggle any
    verticaloffset verticaloffset number 0 vertical offset for the content in pixels

    Events

    Event Description
    closed hide popover visibility. method: close, example: { "open" : false }
    opened when visibility of pop over change. method: toggle, example: { "open" : true }
    transition-end when the conent finishes fading

    CSS Custom Properties

    Property Description
    --fc-popover-arrow-size content's arrow size. default: 10px
    --fc-popover-background-color content's background color. default: white
    --fc-popover-border-radius content's border radios. default: 10px
    --fc-popover-box-shadow content's box shadow size. default: 0 2px 6px 2px rgba(183, 203, 206, 0.25)
    --fc-popover-padding content's padding color. default: 10px
    --fc-popover-z-index content's z-index. default: 999

    Install

    npm i @forter/popover

    DownloadsWeekly Downloads

    41

    Version

    2.13.0

    License

    Apache-2.0

    Unpacked Size

    125 kB

    Total Files

    61

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar