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;