Foldable Device Configurator is a little Web Component which you can drop in your application to test the CSS Viewport Segments Polyfill located here
$ npm install --save-dev foldable-device-configurator
You then need to import the ESM module into your project (which depends on how you import ES modules), here is an example :
<script type='module' src="../node_modules/foldable-device-configurator/src/foldable-device-configurator.js"></script>
When imported, in your HTML file just add the following lines:
<foldable-device-configurator></foldable-device-configurator>
This web component will let you emulate various foldable configurations and will set the foldable polyfills accordingly. Currently there are two polyfills you can use to design or adapt web contents for foldable devices :
- A JavaScript API called Viewport Segments located here
- CSS Properties called Viewport Segments located here
Both are proposals from Microsoft. At this time the configurator will only set the viewportsegments media-queries.
This project makes use of ECMAScript Modules (ESM) and runs them directly in the browser using Vite. If you install new dependencies using npm
like npm install --save my-dependency
, then please run npm run build
afterwards to generate the new modules in docs
folder. Also, the docs
folder should be committed. Make sure to update the package.json file accordingly.
To install app dependencies and but any further steps, run
$ npm install
Shoelace web components can be found here
$ npm run build
To test in the browser, run
$ npm run start
To build, run
$ npm run build
The build is then ready to publish to npm (inside the dist/ directory)
This demo is being developed by :