sciter pagecontrol
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]
features
- load tab contents inline or from external source
- when loaded from external source, 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
- support screenreaders
demo
- git clone the repository
- install packages
npm install - install latest sciter sdk
npm run install-sdk - start the demo
npm run scapp
demo requirements
- A recent version of Node.js
node(tested with 16 LTS) and its package managernpm.- On Windows download and run the installer
- On Linux check the installation guide
add to your project
using npm
- install package
npm install sciter-pagecontrol
using source
- copy 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.html" icon="fas fa-star" />
</pagecontrol>styling
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;
}
}known issues
- 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.
todo
- use exceptions instead of console logging?