Studio Web
Switch Design System theme
Betclic / Clickbet
Shortcut : MAJ + T
Switch theme mode
Light / Dark
Shortcut : MAJ + D
Tab bar
The tab bar is a core element of the mobile touchpoint's UI — it creates a standardized and shared navigation experience that is recognizable across the entire application.
TWIG : Universes/_common/_mobile/_twig/_components/_tab_bar.twig
CSS : DesignSystem/_tactics/_components/_css/_mobile/_tab_bar/_tab_bar.scss
Animated
Each elements of tab bar can be animated by setting specific CSS classes. There are 3 states : default, active and inactive.
Tap on Tab Bar
When tap on navigation item, a CSS class is-touchStart is added to the navigation component to bounce it, then when we leave the tap, a CSS class is-touchEnd is added to play another bounce effect.
Animation duration : 150ms / 500ms
CSS variables : --tabBarNavigationTouchStartAnimationDuration
--tabBarNavigationTouchStartAnimationDelay
--tabBarNavigationTouchEndAnimationDuration
--tabBarNavigationTouchEndAnimationDelay
Scrolling Up & Down without Betting Slip
When scrolling down, a CSS class is-hidden is added to the tabBar component to hide it.
When scrolling up, a CSS class is-visible is added to the tabBar component to show it.
Animation duration : 350ms
CSS variables : --tabBarShowAnimationDuration
--tabBarShowAnimationDelay
--tabBarHideAnimationDuration
--tabBarHideAnimationDelay
Add & Remove Betting slip
When you have to display the Betting Slip in small view, a CSS class is-hidden is added to the navigation component to display/undisplay it.
Small Betting slip
Animation duration : 350ms
CSS variables : --tabBarNavigationShowAnimationDuration
--tabBarNavigationShowAnimationDelay
--tabBarNavigationHideAnimationDuration
--tabBarNavigationHideAnimationDelay
When you have to display the Betting Slip in large view, a CSS class is-hidden is added to each navigation_item components components to display/undisplay it.
Large Betting slip
Animation duration : 350ms
CSS variables : --tabBarNavigationItemsShowAnimationDuration
--tabBarNavigationItemsShowAnimationDelay
--tabBarNavigationItemsHideAnimationDuration
--tabBarNavigationItemsHideAnimationDelay
Scrolling Up & Down with Betting Slip
When scrolling down, a CSS class is-hidden is added to the navigation components to hide it.
When scrolling up, a CSS class is-visible is added to the navigation components to show it.
Small Betting slip
Animation duration : 350ms
CSS variables : --tabBarNavigationShowAnimationDuration
--tabBarNavigationShowAnimationDelay
--tabBarNavigationHideAnimationDuration
--tabBarNavigationHideAnimationDelay
When scrolling down, a CSS class is-hidden is added to the navigation components to hide it.
When scrolling up, a CSS class is-visible is added to the navigation components to show it.
Large Betting slip
Animation duration : 350ms
CSS variables : --tabBarNavigationShowAnimationDuration
--tabBarNavigationShowAnimationDelay
--tabBarNavigationHideAnimationDuration
--tabBarNavigationHideAnimationDelay
Switch universes
When you have to change universe, a CSS class is-hidden is added to the corresponding navigation component and a CSS class is-visible is added to the new navigation component.
Animation duration : 350ms
CSS variables : --tabBarNavigationShowAnimationDuration
--tabBarNavigationShowAnimationDelay
--tabBarNavigationHideAnimationDuration
--tabBarNavigationHideAnimationDelay
From home to specific page
When you have to change switch of pages, a CSS class is-hidden is added to the corresponding navigation component and a CSS class is-hidden is added to the corresponding navigation_item components.
Default
Animation duration : 350ms
CSS variables : --tabBarNavigationShowAnimationDuration
--tabBarNavigationShowAnimationDelay
--tabBarNavigationHideAnimationDuration
--tabBarNavigationHideAnimationDelay
--tabBarNavigationItemsShowAnimationDuration
--tabBarNavigationItemsShowAnimationDelay
--tabBarNavigationItemsHideAnimationDuration
--tabBarNavigationItemsHideAnimationDelay