This is a sciter.js pagecontrol component.
"It is a multi-page component that provides a container to hold a variety of controls per page. Much like a real-world notebook, it displays a "tab" per page so that the user can quickly switch between pages. Each page can contain its own selection of controls." [1]
- load tab contents inline or from external file
- when loaded from external file, tab can have its own css and js
- fully skinnable control
- support for fontawesome icons in tab header
- tab headers on any side
- select and iterate through tabs from code
- show/hide all tabs or a specific tab
- supports screenreaders
IMPORTANT: Works fine until 5.0.3.21 included. There is a new issue since 6.0.0.0 where scapp crashes when there are more than 2 pagecontrols on the page
- git clone the repository
- install packages
npm install - install latest sciter sdk
npm run install-sdk - start the demo
npm run scapp
- A recent version of Node.js
node(tested with 22 LTS) and its package managernpm.- On Windows download and run the installer
- On Linux check the installation guide
You can either add it to your project using npm or by copying the src directory.
- install package
npm install sciter-pagecontrol
- add the
srcdir to your project
<style>
/* include using npm */
@import url(node_modules/sciter-pagecontrol/src/pagecontrol.css);
/* include using src dir */
@import url(src/pagecontrol.css);
</style>
<body>
<pagecontrol header-position="top" header-visible="true">
<tab caption="first tab" selected>
<p> first tab content </p>
<button> test </button>
</tab>
<tab caption="2nd tab">
<button> another button </button>
</tab>
<tab caption="my tab" src="tab.htm" icon="fas fa-star" />
</pagecontrol>To apply a custom style to the control, you will need to use the pagecontrol @set
@set pagecontrol < pagecontrol-base {
/* set tab border to red */
div.tabs {
border: 1dip solid red;
}
}- module
importin tab file does not work unless it is a sciter module. You need to import in the main code and make the imported visible globally. seetab4.htm.
- use exceptions instead of console logging?