Wondering what’s next for npm?Check out our public roadmap! »

    ngx-foldable
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    📖 ngx-foldable

    NPM version Node version Angular version Build Status License

    ngx-foldable is a set of components and services to help you build dual-screen experiences for foldable or dual-screen devices, such as the Surface Duo

    See the live demo or read the full documentation.

    How to test on your browser

    The dual-screen emulation feature requires latest Microsoft Edge or Google Chrome versions, with experimental flags to enable.

    Follow the instructions here to setup your browser for dual-screen emulation.

    Library usage

    Check out the demo source code to see an example usage of the library.

    Add the library to your Angular project:

    npm install ngx-foldable

    Import the library in your app:

    import { FoldableModule } from 'ngx-foldable';
    ...
    
    @NgModule({
      ...
      imports: [
        FoldableModule
        ...
      ],
      ...
    })
    export class AppModule { }

    Use the provided fdSplitLayout, fdWindow and fdIfSpan directives to build your layout:

    <!--
      SplitLayout supports: flex, grid or absolute
      Styling is only added when a multi screen mode is detected.
    -->
    <div fdSplitLayout="grid">
    
      <!-- Assign to first window segment -->
      <section fdWindow="0">
        This will be displayed on the first window segment of a multi screen or single screen device.
        
        <p *fdIfSpan="'none'; else alt">This is only visible on a single screen device.</p>
        <ng-template #alt><p>This is only visible on a multi screen device.</p></ng-template>
      </section>
    
      <!-- Assign to second window segment -->
      <section fdWindow="1">
        This will be displayed on the second window segment of a multi screen device.
    
        <p *fdIfSpan="'multi'">This is only visible on multi screen device, regardless of the orientation.</p>
        <p *fdIfSpan="'fold-horizontal'">This is only visible on horizontal fold spanning.</p>
        <p *fdIfSpan="'fold-vertical'">This is only visible on vertical fold spanning.</p>
      </section>
    </div>

    Using the ScreenContext service, you can also receive updates when the screen context changes:

    import { ScreenContext } from 'ngx-foldable';
    ...
    export class AppComponent {
      constructor(private screenContext: ScreenContext) {
        this.screenContext
          .asObservable()
          .subscribe(context: ScreenContextData) {
            console.log('Screen context changed:', context);
          }
      }
    }

    You can read the full documentation here.

    Contributing

    You're welcome to contribute to this project! Make sure you have read the code of conduct before posting an issue or a pull request.

    Follow these steps to run this project locally:

    1. Clone the repository on your machine
    2. Run npm install to install packages
    3. Run npm start to start the dev server with the demo app

    You can then start making modifications on the library or demo app code.

    Related work

    Install

    npm i ngx-foldable

    DownloadsWeekly Downloads

    3

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    313 kB

    Total Files

    28

    Last publish

    Collaborators

    • avatar