Waiting for initialization
Sometimes it can be necessary to wait until an SDX Web Component is loaded and rendered. This example demonstrates how to wait until an instance of sdx-tabs is ready.
<!-- Example tabs -->
<sdx-tabs id="myTabs">
<sdx-tabs-item label="Tab 1"></sdx-tabs-item>
<sdx-tabs-item label="Tab 2"></sdx-tabs-item>
<sdx-tabs-item label="Tab 3"></sdx-tabs-item>
</sdx-tabs>
// Get a reference to the example tabs
const myTabs = document.getElementById("myTabs");
// First, wait for "sdx-tabs" to be fetched and registered
await customElements.whenDefined(myTabs.tagName.toLowerCase());
// Then, wait until the instance is rendered
await myTabs.componentOnReady();
// Everything ready, custom code can now be executed, e.g.
// myLoadingSpinner.hide();
Prevent jumping content for overlays
SDX components that use overlays (e.g. <sdx-dialog />) disable scrolling on the body while they’re open. This is done to prevent the page in the background from being scrolled while the end user is actually scrolling on the overlay. This is a common practice in frontend development.
However, it can lead to the ugly "jumping content" glitch on Windows because of its scrollbars. As soon as the content is longer than the page, those scrollbars appear and when an overlay is opened, they disappear again and the glitch occurs. A common workaround is to always display the scrollbar — regardless of whether they’re needed or not. As depicted below. But there are also other ways, each with their own pros and cons. SDX leaves it up to the consumer to implement the way that suits their app best.
body {
overflow-y: scroll;
}
Overlay outlet
<sdx-menu-flyout />, <sdx-dialog /> and <sdx-select /> all use an overlay which is by default appended to document.body. This can lead to events being swallowed with newer versions of React. The <div id="sdx-overlay-outlet"></div> can be used to define the position where this overlay will be inserted.
function App() {
return (
<div>
<sdx-menu-flyout>
<sdx-menu-flyout-toggle>/* … */</sdx-menu-flyout-toggle>
<sdx-menu-flyout-content>
<p>Welcome to My Swisscom</p>
</sdx-menu-flyout-content>
</sdx-menu-flyout>
<!-- Appended overlays here instead of document.body -->
<div id="sdx-overlay-outlet"></div>
</div>
)
}
Overlay in scrollable containers
When incorporating <sdx-menu-flyout />, <sdx-dialog /> or <sdx-select /> within a scrollable container, it is essential to set position: relative; on the container. This ensures accurate layout calculations within the container.
.scrollable-container-example {
position: relative;
overflow: scroll;
height: 50vh;
}
Apple iOS app review
When submitting an app to the Apple App Store that uses SDX, it will probably happen that it gets rejected immediately. It is because the SDX package includes font type files, which are not allowed by Apple. If your app does not need these font files, you can remove them with the following Jenkins step:
steps {
sh "rm -f $WEB_APP_PATH/{TheSansB,sdx-icons}*.{woff,woff2,eot,svg}"
}