Tabs Component

Tab Settings
CSS Selectors
Tabs Used Per Widget
List of All Tabs And Default Icons
Integration Example
- Code

Our Widgets are using Tabs component which can be customized to some extend by specifying additional settings in SIR function when adding a widget.

On how to include widget on a page please read Getting Started Guide.

Tab Settings

For styling av tab switcher you need to use branding namespace avTabSwitcher.

These are tabs related widget props:

Name	Type	Description
option	string	An option to change how tab content is rendered. Possible values are: `iconText` - content of the tab is an icon with text. `icon` - content of the tab is only an icon. `text` - content of the tab is only a text.
variant	string	Force tabs to occupy all horizontal space or not. Possible values are `fullWidth` and `standard`.
align	string	Change the horizontal alignment of your tabs. This setting applies when variant is set to `standard`. Possible values are: `start` - tabs are left-aligned. `center` - tabs are centered. `end` - tabs are right-aligned.
iconPosition	string	Display icon before or after tab text. This setting applies when option is set to `iconText`. Possible values are `start` and `end`.
icons	object	Apply custom icons to tabs. `icons: { matchInfo: 'path_to_your_image_file', //matchInfo is a tab id. standings: 'path_to_your_image_file', ... };` List of available tabs per widget can be found in Tabs Used Per Widget section.
arrowIcon	string	Path to your image file.
useClientTheming	boolean	Disables `srt` classes and applies `.srct-`classes for custom styling. List of applied classes is available in CSS Selectors section.

CSS Selectors

When useClientTheming setting is enabled (set to true), base styling is removed and CSS classes for custom styling are applied to tab elements. These are available css classes:

CSS Class	Description
.srct-tabs	Styles applied to the tabs wrapper element.
.srct-tab	Styles applied to the tab wrapper element.
.srct-tab__content	Styles applied on the container of tab icon, text label and tab indicator elements.
.srct-tab--active	Styles applied to active tab.
.srct-tab__indicator	Styles applied to the tab Indicator.
.srct-tab__indicator--active	Styles applied to the active tab indicator.
.srct-tab__arrow	Styles applied to the arrow element.
.srct-tab__text-label	Styles applied to the text label of the tab.
.srct-tab__icon	Styles applied to an icon in the tab.

Different widgets are using different tabs. Below is a list of available tab ids for specific widget.

Widget	Tab IDs
Live Match Tracker	statistics, detailedStatistics, headToHead, standings, timeline, lineups, boxscore, probabilities, pointByPoint, scorecard, leaderboard, avStream. Live Match Tracker has an option to set widget layout with `layout` prop. If `layout` is set as `single` another tab for pitch is visible. Pitch Tab Ids: pitchBadminton, pitchBaseball, pitchBasketball, pitchBeachVolleyball, pitchCricket, pitchDarts, pitchFutsal, pitchHandball, pitchHockey, pitchAmericanFootball, pitchRugby, pitchSnooker, pitchSoccer, pitchSquash, pitchTableTennis, pitchTennis, pitchVolleyball, track (formula).
Match Preview	matchInfo, leaders, lineups, standings, teamStats, leaderboard, playerProfile, ranking.
Tournament Preview	overview, leaders, results, standings, teams.
Head To Head	headToHead, form, teamStats, teamstatsmatch, lastMatches.

List of All Tabs And Default Icons

Tab ID	Matching Icon
statistics / teamStats
headToHead
standings
timeline / plays
lineups / roster
boxScore / scorecard
overview / matchInfo
cup / playoffs
form
teams
leaders
leaderboard
facts
ranking
pointByPoint
probabilities
results / lastMeetings / lastMatches
playerProfile
driverStandingsF1
teamStandingsF1
pitchDarts
pitchAmericanFootball
pitchBadminton
pitchBaseball
pitchBasketball
pitchBeachVolleyball
raceInfoF1
pitchFutsal
pitchHandball
pitchHockey
pitchRugby
pitchSnooker
pitchTableTennis
pitchTennis
pitchVolleyball
pitchSquash
pitchSoccer
avStream

Integration Example

For integration example we will take a look on how to customize tabs for Match Preview widget.

This will be our end result for tabs:

Code

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Match Preview Tabs Configuration</title>
        <style>
            .sr-widgets {
                max-width: 620px;
                width: 100%;
            }

            /* tabs */
            .sr-bb .srct-tab {
                background: #ac1a2f;
                color: #fff;
            }

            /* active tab */
            .sr-bb .srct-tab--active {
                background: #fff;
                color: #ac1a2f;
            }
        </style>
    </head>
    <body>
        <script>
            (function (a, b, c, d, e, f, g, h, i) {
                a[e] ||
                    ((i = a[e] =
                        function () {
                            (a[e].q = a[e].q || []).push(arguments);
                        }),
                    (i.l = 1 * new Date()),
                    (i.o = f),
                    (g = b.createElement(c)),
                    (h = b.getElementsByTagName(c)[0]),
                    (g.async = 1),
                    (g.src = d),
                    g.setAttribute('n', e),
                    h.parentNode.insertBefore(g, h));
            })(window, document, 'script', 'https://widgets.sir.sportradar.com/sportradar/widgetloader', 'SIR', {
                theme: false,
                language: 'en'
            });

            SIR('addWidget', '.sr-widget-1', 'match.preview', {
                matchId: match_id_here,
                branding: {
                    tabs: {
                        // tabs settings
                        useClientTheming: true,
                        option: 'iconText',
                        iconPosition: 'start',
                        variant: 'standard'
                    },
                    namespaces: {
                        avTabSwitcher: {
                            tabs: {
                                align: "end",
                                icons: {
                                    "avStream": "https://widgets.sir.sportradar.com/docs/img/logo.svg"
                                },
                                useClientTheming: true
                            }
                        }
                    },
                }
            });
        </script>
        <div class="sr-widgets">
            <div class="sr-widget sr-widget-1"></div>
        </div>
    </body>
</html>

Documentation