https://github.com/hexonthebeach/rank-emoji

Add sports-medal emoji to a list easily
https://github.com/hexonthebeach/rank-emoji

component emoji medal ranking vue

Last synced: 5 days ago
JSON representation

Add sports-medal emoji to a list easily

• Host: GitHub
• URL: https://github.com/hexonthebeach/rank-emoji
• Owner: hexonthebeach
• Created: 2020-02-03T14:27:24.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-03-04T19:21:50.000Z (over 3 years ago)
• Last Synced: 2024-09-23T09:18:37.119Z (about 2 months ago)
• Topics: component, emoji, medal, ranking, vue
• Language: Vue
• Homepage:
• Size: 49.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# rank-emoji

Vue component for easily adding ranking emoji to a list.

It will add the medal-emoji by default to the first three items in the list

* 🥇

* 🥈

* 🥉

The rest will get a normal unmarked medal by default 🏅

### Properties You can work with

Disable the unmarked medals from showing after the top 3

`v-bind:with-between="false"`

 

Show the special emoji character for last-place

`v-bind:is-last="true"`

`v-bind:is-last="index == winners.length-1"` (practical example) 

Set different Emoji

`v-bind:emojis="{top:['💝','💘','💖'],between:'❤',last:'💔'}"`

To set your own Emoji you can Extend the RankEmoji component, see /src/RankPies.vue for example

## installation

use npm to get this into your app, from the root :

`npm i rank-emoji`

## code example

Add this component in the loop, it will take care of the rest automatically.

```

  


    


      

      

    

  


    import RankEmoji from 'rank-emoji';

    

    export default {

        ...

        components:{

            ... ,

            RankEmoji

        },

        data:function () {

            return {

                winners: [

                    {name:'Neil Armstrong'},

                    {name:'Buzz Aldrin'},

                    {name:'Pete Conrad'},

                    {name:'Alan Bean'},

                    {name:'Alan Shepard'},

                    {name:'Edgar Mitchell'},

                ]

            }

        }

    }

```