https://github.com/8ctopus/sciter-pagecontrol
A sciter.js pagecontrol component
https://github.com/8ctopus/sciter-pagecontrol
pagecontrol sciter-js tabs
Last synced: about 1 year ago
JSON representation
A sciter.js pagecontrol component
- Host: GitHub
- URL: https://github.com/8ctopus/sciter-pagecontrol
- Owner: 8ctopus
- License: mit
- Created: 2021-05-26T04:02:30.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-10T13:00:49.000Z (about 1 year ago)
- Last Synced: 2025-05-12T23:46:36.043Z (about 1 year ago)
- Topics: pagecontrol, sciter-js, tabs
- Language: JavaScript
- Homepage:
- Size: 877 KB
- Stars: 5
- Watchers: 1
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sciter pagecontrol
This is a [sciter.js](https://sciter.com/) 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]](https://wiki.freepascal.org/TPageControl)
## features
- 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
## 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 22 LTS) and its package manager `npm`.
- On Windows [download](https://nodejs.dev/download/) and run the installer
- On Linux check the [installation guide](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04#option-2-%E2%80%94-installing-node-js-with-apt-using-a-nodesource-ppa)
## add to your project
You can either add it to your project using npm or by copying the src directory.
### using npm
- install package `npm install sciter-pagecontrol`
### copy source
- add the `src` dir to your project
### add to css
```html
/* include using npm */
@import url(node_modules/sciter-pagecontrol/src/pagecontrol.css);
/* include using src dir */
@import url(src/pagecontrol.css);
first tab content
test
another button
```
## styling
To apply a custom style to the control, you will need to use the `pagecontrol` `@set`
```css
@set pagecontrol < pagecontrol-base {
/* set tab border to red */
div.tabs {
border: 1dip solid red;
}
}
```
## known issues
- module `import` in 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. see `tab4.htm`.
## todo
- use exceptions instead of console logging?