Lgk NPM | npm.io

Projects that are using lgk

thefink-asiw
orange-asiw
colorganize-with-react
Neue St
sm (Startmon)
spongebob (Meme generator)
html_bones
tumblify
skill-guide
lgk-icons
simon

Missing in list

Pill menu

The pill menu can get embedded in products and applications to have a nice bar, so the user can quickly see the other LGK projects.

There are two ways to use it: With old-school vanilla HTML / CSS / JavaScript and with React.

Directly

<!DOCTYPE html>
<html>

<head>
    <!-- ... -->

    <link rel="stylesheet" href="https://lib.lgkonline.com/pill-menu/style.min.css">
</head>

<body>
    <!-- This is for the cookie message. If you don't set the legal link attr, it will get a default URL. -->
    <div class="lgk-cookie-message cc_banner-wrapper" data-legal-link="./legal"></div>

    <div class="lgk-pill">
        <iframe class="lgk-pill-content" src=""></iframe>
    </div>
    <div class="lgk-pill-btn">
        <span class="lgk-pill-icon"></span>
    </div>
    <div class="lgk-pill-wrapper"></div>

    <!-- ... -->

    <script src="https://lib.lgkonline.com/pill-menu/script.min.js"></script>
</body>

</html>

React

Install this package:

npm install -S lgk

Use it:

import React from "react";

import { LgkPillComponent } from "lgk";

class App extends React.Component {
    render() {
        return (
            <div>
                <LgkPillComponent legalLink="./link" black />

                <div className="container">
                    <h1>Hello World</h1>
                </div>
            </div>
        );
    }
}

export default App;

react prop-types

@everything-registry/sub-chunk-2063 lgk-ui @infinitebrahmanuniverse/nolb-lg @zalastax/nolb-lg

2 years ago

5 years ago

5 years ago

5 years ago

5 years ago