Code Monkey home page Code Monkey logo

ic-menu's Introduction

ic-menu Build Status

An accessible menu component for ember applications.

Demo

http://instructure.github.io/ic-menu/

Installation

bower install ic-menu

Usage

application.hbs

{{#ic-menu}}
  {{#ic-menu-trigger}}Actions{{/ic-menu-trigger}}
  {{#ic-menu-list}}
    {{#ic-menu-item on-select="remove"}}Remove{{/ic-menu-item}}
    {{#ic-menu-item on-select="save"
                    on-disabled-select="notifyDisabled"
                    enabled=foo}}
      Save
    {{/ic-menu-item}}
  {{/ic-menu-list}}
{{/ic-menu}}

application_controller.js

App.ApplicationController = Ember.Controller.extend({

  actions: {
    remove: function(icMenuItem) {
      // do stuff with the icMenuItem instance
    },
    save: function(icMenuItem) {
      // do stuff with the icMenuItem instance
    }
  }

});

Development

  1. Fork the repo
  2. npm install && bower install
  3. Create a new branch for your feature/bug fix
  4. grunt to build and watch files.
  5. testem in a new tab to run tests.
  6. Send a pull request.

ic-menu's People

Contributors

fivetanley avatar knomedia avatar ryanflorence avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

knomedia fivetanley machty jmonma envoy owain alexbaizeau isabella232

ic-menu's Issues

Adding conditional menu-item places it at the bottom of arrow order

When you create menu items where one of the items is conditionally shown, it gets registered last on the list of items in ic-menu-list. This happens even if it appears visually before other items on the list.

This means that when ic-menu-list keyDown is called to focus on the next item, it will skip over this item until it arrives to it at the end of the items list, which is out of order from what appears in the menu.

This is how I have the ic-menu-item conditionally shown.

{{#ic-actions}}
  {{#if somethingIsTrue}}
    {{#ic-menu-item on-select="action1"}}
      Item 1
    {{/ic-menu-item}}
  {{/if}}
  {{#ic-menu-item on-select="action2"}}
    Item 2
  {{/ic-menu-item}}
{{/ic-actions

z-index glitches

After changing the color (or any css) of ic-menu-item, i see glitches like text/icons showing behind menu. And in the example below, i can't select the second item in the menu.

screen shot 2014-07-13 at 11 56 58 am

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.