fb-msg-slide

Facebook Messenger Slide Component

A slide component with extra actions built with StencilJS

Getting Started

to use this component inside your project run the follwing command

npm install --save fb-msg-slide

To view the build, start an HTTP server inside of the /www directory.

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out our docs here.

Using this component

Script tag

Put this script <script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script> in the head of your index.html

   <fb-msg-slide>
      <div slot="item-start" >
       <span class="fa fa-eye"></span>

      </div>
      <div slot="item-middle" class="_middle" >
        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
       <p><strong>M.John</strong><br>Lorem ipsum dolor sit.</p>
      </div>
      <div slot="item-end" >
        <span class="fa fa-trash"></span>
      </div>
    
    
      </fb-msg-slide>

Node (ionic)

register component in main.ts

//main.ts
import { defineCustomElements } from 'fb-msg-slide/loader';

//...

defineCustomElements()

add CUSTOM_ELEMENTS_SCHEMA to your module

//yourmodule.ts
//...

 schemas: [CUSTOM_ELEMENTS_SCHEMA]

use it !

<fb-msg-slide>
       <div slot="item-start">
           <!-- element -->
       </div>
       <fb-msg-slide>
       <div slot="item-middle">
           <!-- element -->
       </div>
       <fb-msg-slide>
       <div slot="item-end">
           <!-- element -->
       </div>
  </fb-msg-slide>

License

MIT © Abdelhak Akermi