0.0.2 • Published 7 months ago

pango-toolbar v0.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

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

PropTypeDefaultDescription
headerTitlestring"PAN-GO"The main toolbar title.
headerSubTitlestring"Human Functionome"The subtitle below the main title.
pangoHomestring"/"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

  1. Clone the repository
git clone [repository-url]
  1. Install dependencies
npm install
  1. Start development server
npm start
  1. Run tests
npm test
  1. Build for production
npm run build

Browser Support

  • Chrome 67+
  • Firefox 63+
  • Safari 10.1+
  • Edge 79+

License

MIT

0.0.2

7 months ago

0.0.1

7 months ago