jb_menu 4.1.3

  • Readme
  • Changelog
  • Installing
  • 0

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;/ }

Changelog #

4.1.0 #

  • prepares jb-menu for publishing

4.0.0 #

  • updates angular to 4.0.0 as well as jb_responsive_breakpoints

2.2.0 #

  • added scss for internal component styling from the outside

2.0.0/2.0.1/2.1.0 #

  • upgraded whole component to angular2

1.0.6 #

  • ?

1.0.5 #

  • fixed error in bound value mode in "active" attribute

1.0.4 #

  • changed jb-menu dependencies to use https

1.0.3 #

  • changed style a:hover and a.active in jb_menu_item to be a text shadow instead of font weight bold

1.0.2 #

  • fixed error with "text" filed access on null object in JbMenu.onShadowRoot

1.0.1 #

  • added ng-cloak class support to fix content transclusion of menu labels before redering

1.0.0 #

  • first working version of jb-menu and jb-menu-item

0.0.1 #

  • Initial version

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  jb_menu: ^4.1.3

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:jb_menu/jb_menu.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://dart.dev/dart-2#migration.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.24.0 <2.0.0