Noisy Pterodactyl Melodies

    @ne1410s/demo
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.39 • Public • Published

    @ne1410s/demo

    A custom element for demonstration purposes and to serve as a project template.

    <ne14-demo-tooltip reveal="Hey!">
      <p>Hello world</p>
    </ne14-demo-tooltip>
    • Use: <script src="PATH_TO_UMD_SCRIPT"></script>
    • Extend: npm i -S @ne1410s/demo

    Attributes

    <ne14-demo-tooltip corner="3" reveal="Definition here"
      >YO' STUFF<ne14-demo-tooltip></ne14-demo-tooltip
    ></ne14-demo-tooltip>
    • corner: If specified, the reveal text is positioned in a corner of the screen:
      • 1: Top-left, 2: Top-right, 3: Bottom-right, 4: Bottom-left
    • reveal: The definition text that gets shown on hover

    Events

    const tooltip = document.querySelector('ne14-demo-tooltip');
    
    tooltip.addEventListener('...', () => {
      console.log('Event fired!');
    });
    • There are no bespoke events raised in the internal workings of this element

    Methods

    • There are no bespoke methods exposed in this element

    Properties

    • set corner (number): Sets the attribute with the corresponding value
    • set reveal (string): Sets the attribute with the corresponding value

    CSS Variables

    Some degree of custom styling can be provided, by way of css variables:

    ne14-demo-tooltip {
      --src-border: 1px solid green;
      --reveal-trg-bg: rebeccapurple;
    }
    • --src-border-radius Source item border radius. Defaults to: 3px
    • --src-border Source item border. Defaults to: 1px solid black
    • --src-bg Source item background. Defaults to: inherit
    • --src-fg Source item foreground. Defaults to: inherit
    • --trg-border-radius Target item border radius. Defaults to: 3px
    • --reveal-src-border Source item border (in reveal mode). Defaults to: --src-border
    • --reveal-src-bg Source item background (in reveal mode). Defaults to: inherit
    • --reveal-src-fg Source item foreground (in reveal mode). Defaults to: inherit
    • --reveal-trg-border Target item border (in reveal mode). Defaults to: 1px solid black
    • --reveal-trg-bg Target item background (in reveal mode). Defaults to: white
    • --reveal-trg-fg Target item foreground (in reveal mode). Defaults to: inherit

    Install

    npm i @ne1410s/demo

    DownloadsWeekly Downloads

    116

    Version

    0.0.39

    License

    MIT

    Unpacked Size

    18.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • ne1410s