jb_menu 4.1.3
jb_menu: ^4.1.3

Dart 2 incompatible

An Angular 4 Component for a responsive menu

jb_menu #

An Angular Component for easy responsive menus (was started before angular material).

Usage #

  1. Add the component module to your pubspec.yaml with git and specific branch reference

     # update this with current version
     jb_menu: "^1.0.0" "
  2. Show this module to angular dependency injection -> see App Class in app_initialize.dart

     import 'package:jb_menu/jb_menu.dart';
     class App extends Angular.Module {
       App() {

Options for jb-menu #

Option NameOption ValuesRequiredDesctiption
operation-modestatic or responsiverequiredsets, whether jb-menu reacts to breakpoint changes or not
label-collapsedstring, default "MenĂ¼"optionalsets the text on the menu button in collapsed state
is-openbool, default falseoptionalsets the initial state of the menu to opened, if no other option prohibits this
collapsed-state-breakpointslist of breakpoint names from root contextif not set = operation-mode="static"
breakpoints where the menu should be collapsed
current-breakpointstring, two-way-bindablerequired for operation-mode="responsive"should be bound to

Change internal styles: #

  1. Add jb-style tag somewhere
  2. Add content attribute to it (two way bindable var)
  3. Add this two way variable to the style attribute of jb-menu or to each jb-menu-item tag to inject the style into their shadow dom

Internal styles in jb-menu: nav { display: inline-flex; flex-flow: row nowrap; align-items: stretch; }

nav.collapsed { width: 100%; flex-flow: column nowrap; align-items: stretch; }

Internal styles in jb-menu-item:

  • { box-sizing: border-box; }

    a { /* text-settings */ text-decoration: none; font-family: 'Roboto', sans-serif; font-style: normal; font-size: 1.5em; font-weight: 300; /text-shadow: #666666 1px 1px 5px;/ color: #000000; /color: #5e5e5e;/

    margin: 5px;
    padding: 5px;
    cursor: pointer;


    a.collapsed { text-align: center; }

    a:hover, .active { font-weight: bold; padding-left: 3px; padding-right: 2px; /text-shadow: rgb(180, 180, 180) 1px 1px 10px;/ }