0.0.2 • Published 7 months ago
pango-toolbar v0.0.2
Pango Toolbar Component
A customizable toolbar web component built with StencilJS. This component provides a structured navigation bar with a title, subtitle, social links, and a dropdown menu.
Features
- Customizable header title and subtitle
- Built-in social media and external links
- Dropdown menu for additional actions
- Shadow DOM encapsulation for style isolation
- Responsive design with flex-based layout
Installation
NPM
npm install pango-toolbar
CDN
<script type="module" src="https://unpkg.com/pango-toolbar@latest/dist/pango-toolbar/pango-toolbar.esm.js"></script>
Usage
Basic HTML
<script type="module" src="https://unpkg.com/pango-toolbar@latest/dist/pango-toolbar/pango-toolbar.esm.js"></script>
<pango-toolbar
header-title="PAN-GO"
header-sub-title="Human Functionome"
pango-home="/">
</pango-toolbar>
React
import { PangoToolbar } from 'pango-toolbar';
const App = () => {
return (
<PangoToolbar headerTitle="PAN-GO" headerSubTitle="Human Functionome" pangoHome="/" />
);
};
Angular
// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
// app.component.ts
import { Component } from '@angular/core';
import 'pango-toolbar';
@Component({
selector: 'app-root',
template: `<pango-toolbar headerTitle="PAN-GO" headerSubTitle="Human Functionome" pangoHome="/"> </pango-toolbar>`
})
export class AppComponent {}
Props
Prop | Type | Default | Description |
---|---|---|---|
headerTitle | string | "PAN-GO" | The main toolbar title. |
headerSubTitle | string | "Human Functionome" | The subtitle below the main title. |
pangoHome | string | "/" | The homepage URL linked to the logo. |
Pango Dropdown Component
A flexible dropdown web component that can be used inside pango-toolbar
or independently.
Features
- Customizable trigger slot
- Supports any HTML or Stencil components inside dropdown
- Click outside detection for auto-close behavior
Usage
<pango-dropdown>
<span slot="trigger">Download</span>
<div slot="content">
<a href="https://functionome.org/download/export_annotations.zip">As CSV</a>
<a href="https://functionome.org/download/export_annotations.json.gz">As JSON</a>
</div>
</pango-dropdown>
Styling
Both components support CSS variables for easy customization:
:root {
--pango-primary-color: #173672;
--pango-accent-color: #ebc336;
--pango-toolbar-height: 50px;
--pango-toolbar-bg: var(--pango-primary-color);
--pango-toolbar-color: var(--pango-accent-color);
}
Override these in your project to match your vibe
Development
- Clone the repository
git clone [repository-url]
- Install dependencies
npm install
- Start development server
npm start
- Run tests
npm test
- Build for production
npm run build
Browser Support
- Chrome 67+
- Firefox 63+
- Safari 10.1+
- Edge 79+
License
MIT