Theme:
TypeScript TypeScript

Class StyleGuide

The StyleGuide class is the entry class into the Style Guide. You have to import them once into your project so that all components run correctly.

There is one JavaScript file per theme:

  • finanzen.ch: script-ch.js
  • default: script-default.js
  • markets-insider: script-mi.js
  • finanzen-net: script-net.js
// Example how to integrate the finanzen-net theme script
import { StyleGuide } from '@finanzen-net/common-styles/dist/script-net';

Script API

In the following we show all properties and functions of the Style Guide script class.

Static Properties

  • const styleGuide = StyleGuide.Instance; return the current Style Guide instance
  • StyleGuide.Observer the Observer from the Observer Pattern
  • StyleGuide.AccordionHandler the class handler for .accordion
  • StyleGuide.BackToTopHandler the class handler for .back-to-top
  • StyleGuide.CarouselHandler the class handler for .carousel
  • StyleGuide.CopyHandler the class handler for .copy
  • StyleGuide.ColorScheme the class for the light and dark scheme
  • StyleGuide.DatepickerHandler the class handler for .datepicker
  • StyleGuide.DebugModeHandler this handler toggles the debug mode from Style Guide
  • StyleGuide.DetailsNavigationHandler the class handler for .details-navigation
  • StyleGuide.DropdownHandler the class handler for .dropdown
  • StyleGuide.FormControlHandler the class handler for form control elements
  • StyleGuide.InputHandler the class handler for .input
  • StyleGuide.ListingHandler the class handler for .listing
  • StyleGuide.MenuHandler the class handler for .menu
  • StyleGuide.MessageHandler the class handler for .message
  • StyleGuide.MultiDotBarHandler the class handler for .multi-dot-bar
  • StyleGuide.NotificationHandler the class handler for .notification
  • StyleGuide.QuoteTickerHandler the class handler for .quote-ticker
  • StyleGuide.PageHeaderHandler the class handler for .page-header
  • StyleGuide.PaginationHandler the class handler for .pagination
  • StyleGuide.PerformanceBarHandler the class handler for .performance-bar
  • StyleGuide.RatingHandler the class handler for .rating
  • StyleGuide.RealtimePushHandler the class handler for .realtime-push
  • StyleGuide.SidePanelHandler the class handler for .side-panel
  • StyleGuide.SnapshotHandler the class handler for .snapshot
  • StyleGuide.SuggestSearchHandler the class handler for .suggest-search
  • StyleGuide.TabHandler the class handler for .tab
  • StyleGuide.TabRegionHandler the class handler for .tab-region
  • StyleGuide.TooltipHandler the class handler for .tooltip

Static Functions

Properties

  • version the current Style Guide version number
  • name the class name, includes the theme
  • styleGuide.isMobile boolean that is true, when currently the browser has a mobile screen size (xs, sm, md)
  • styleGuide.Color see Colors class
  • styleGuide.browser access to the initialized browser class
  • styleGuide.accordionHandler access to the initialized .accordion handler class
  • styleGuide.backToTopHandler access to the initialized .back-to-top handler class
  • styleGuide.carouselHandler access to the initialized .carousel handler class
  • styleGuide.copyHandler access to the initialized .copy handler class
  • styleGuide.colorScheme access to the initialized the ColorScheme handler class
  • styleGuide.DatepickerHandler access to the initialized .datepicker handler class
  • styleGuide.debugModeHandler access to the initialized debug mode handler class
  • styleGuide.detailsNavigationHandler access to the initialized .details-navigation handler class
  • styleGuide.dropdownHandler access to the initialized .dropdown handler class
  • styleGuide.formControlHandler access to the initialized form control elements handler class
  • styleGuide.inputHandler access to the initialized .input handler class
  • styleGuide.listingHandler access to the initialized .listing handler class
  • styleGuide.menuHandler access to the initialized .menu handler class
  • styleGuide.messageHandler access to the initialized .message handler class
  • styleGuide.multiDotBarHandler access to the initialized .multi-dot-bar handler class
  • styleGuide.notificationHandler access to the initialized .notification handler class
  • styleGuide.quoteTickerHandler access to the initialized .quote-ticker handler class
  • styleGuide.pageHeaderHandler access to the initialized .page-header handler class
  • styleGuide.paginationHandler access to the initialized .pagination handler class
  • styleGuide.performanceBarHandler access to the initialized .performance-bar handler class
  • styleGuide.ratingHandler access to the initialized .rating handler class
  • styleGuide.realtimePushHandler access to the initialized .realtime-push handler class
  • styleGuide.sidePanelHandler access to the initialized .side-panel handler class
  • styleGuide.snapshotHandler access to the initialized .snapshot handler class
  • styleGuide.suggestSearchHandler access to the initialized .suggest-search handler class
  • styleGuide.tabHandler access to the initialized .tab handler class
  • styleGuide.tabRegionHandler access to the initialized .tab-region handler class
  • styleGuide.tooltipHandler access to the initialized .tooltip handler class

Functions

  • styleGuide.show(element: Element): void remove the .display-none global modifier from the given element
  • styleGuide.hide(element: Element): void add the .display-none global modifier to the given element
  • styleGuide.toggle(element: Element, show?: boolean): void toggle the .display-none global modifier on the given element
  • styleGuide.isShown(element: Element): boolean return false, if the .display-none global modifier is attached to the given element
  • styleGuide.notify(text: string, options: NotificationOptions): void show a message in the global notification, see .notification
  • styleGuide.popup(popupContent: HTMLElement, options: NotificationOptions): void show a popup, see .notification

Callbacks

You can run functions after the Style Guide has been initialized. Push directly to the global window.styleGuideCallbacks array variable a callback function, or use the StyleGuide.addCallback() function.

HTML Example

<script>
  window.styleGuideCallbacks = window.styleGuideCallbacks || [];
  window.styleGuideCallbacks.push(() => { console.log('do stuff'); });
</script>

JavaScript Example

import { StyleGuide } from '@finanzen-net/common-styles/dist/script-net';
StyleGuide.addCallback(() => { console.log('do stuff'); });