Leaderboard
On this page
Purpose of this web component is to display leaderboard of users or teams.
<scill-leaderboard class="scill-web-component"
app-id="632397832778612749"
leaderboard-id="643154716901539841"
avatar-images="false"
pagination="true"
member-type="user"
page-size="5"
>
</scill-leaderboard>
Attributes
Attribute | Description |
---|---|
user-id | Required attribute to fetch correct data from SCILL. |
app-id (required) | Required attribute to fetch correct data from SCILL. app-id you can find in the admin under Apps |
leaderboard-id (required) | Required attribute to display leaderboard data. If leaderboard-id is not provided leaderboard table will be empty. |
avatar-images | If you set this attribute 'true' then avatars will be displayed, otherwise they will be hidden. Default is 'false' . If your image need sufix and prefix you can set it by avatar-url-prefix and avatar-url-suffix attributes. Result will be avatar-url-prefix + your_image + avatar-url-suffix |
avatar-url-prefix | Prefix helper for avatar images, depends how you get image name from server. avatar-url-prefix + your-image . In most cases this is URL where you store your images |
avatar-url-suffix | Suffix helper for avatar images, depends how you get image name from server. your-image + avatar-url-suffix . e.g. If you get only image name, you will add extension as your avatar-url-suffix attribute. Result will be your_image + .png |
pagination | If you set this attribute 'false' then pagination will not be displayed, otherwise it will displayed. Default is 'true' |
member-type | Indicates what type this entry is, it’s either user or team . Default is user |
page-size | Set number of table rows per page. Default is 25 |
language | Set language for leaderboard table. It can be en or de , en is default |
Leaderboard customization
To change table styles we have provided few CSS
classes.
Class | Description |
---|---|
.scill-leaderboard-header | Customize leaderboard table header |
.scill-leaderboard-header-cell | Customize leaderboard table header cell |
.scill-leaderboard-row | Customize leaderboard table body row |
.scill-leaderboard-cell | Customize leaderboard table body cell |
.scill-leaderboard-footer | Customize footer of leaderboard table (pagination row) |
.scill-leaderboard-footer-cell | Customize leaderboard table footer cell |