angular-ribbon

A Ribbon component using AngularJS.

Examples: https://github.com/OkGoDoIt/Office-Ribbon-2010

Design Notes

Backstage content should be reusable in a welcome screen. There should be a directive for the content (menu and details), which will be used by a backstage and welcome screen directive, each of which will indicate context.

Each action is a directive that can handle itself: layout, linebreaks.

Features:

1. Tabs
2. Backstage
   1. Backstage Menu
   2. Backstage Content
   3. Slide in animation
   4. Slide out animation
3. Title Bar
4. Quick Access Toolbar
5. Collapsible
   1. Slide down animation
   2. Handle double clicks on tabs
   3. Handle click outside ribbon (don't collapse on all clicks)
6. Responsive
7. Contextual Tabs
   1. Support groups
   2. Multiple tabs in contextual group
   3. Group title affects Document title position
8. User Settings
9. Actions
   1. Large Button
   2. Small Button (vNext)
   3. Button Group (vNext)
   4. Drop Button - Custom Content
   5. Split Button - Custom Content
   6. Separator (vNext)
   7. Gallery (vNext)
10. Commands
    1. Contextual Commands
11. Declarative
12. API