/sciter-pagecontrol

A sciter.js pagecontrol component

Primary LanguageJavaScriptMIT LicenseMIT

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]

sciter pagecontrol screenshot

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 manager npm.

add to your project

using npm

  • install package npm install sciter-pagecontrol

using source

  • copy the src dir 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 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?