{"id":20527395,"url":"https://github.com/bellgasp/ember-dashboard-controls","last_synced_at":"2025-04-14T04:21:58.946Z","repository":{"id":22056600,"uuid":"95016934","full_name":"BellGasp/ember-dashboard-controls","owner":"BellGasp","description":"A Ember wrapper for the controls available in the Dashboard Bootstrap Theme.","archived":false,"fork":false,"pushed_at":"2022-12-07T07:34:55.000Z","size":1269,"stargazers_count":4,"open_issues_count":18,"forks_count":0,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-27T18:13:32.452Z","etag":null,"topics":["bootstrap","dashboard","ember","ember-addon","wrapper"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BellGasp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-21T15:08:48.000Z","updated_at":"2019-06-06T16:20:43.000Z","dependencies_parsed_at":"2023-01-11T21:27:50.258Z","dependency_job_id":null,"html_url":"https://github.com/BellGasp/ember-dashboard-controls","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BellGasp%2Fember-dashboard-controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BellGasp%2Fember-dashboard-controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BellGasp%2Fember-dashboard-controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BellGasp%2Fember-dashboard-controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BellGasp","download_url":"https://codeload.github.com/BellGasp/ember-dashboard-controls/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248819681,"owners_count":21166523,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","dashboard","ember","ember-addon","wrapper"],"created_at":"2024-11-15T23:18:41.791Z","updated_at":"2025-04-14T04:21:58.923Z","avatar_url":"https://github.com/BellGasp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ember Dashboard Controls\n\n[![npm version](https://badge.fury.io/js/ember-dashboard-controls.svg)](https://badge.fury.io/js/ember-dashboard-controls)\n[![Ember Observer Score](https://emberobserver.com/badges/ember-dashboard-controls.svg)](https://emberobserver.com/addons/ember-dashboard-controls)\n[![Build Status](https://travis-ci.org/BellGasp/ember-dashboard-controls.svg?branch=master)](https://travis-ci.org/BellGasp/ember-dashboard-controls)\n[![Code Climate](https://codeclimate.com/github/BellGasp/ember-dashboard-controls/badges/gpa.svg)](https://codeclimate.com/github/BellGasp/ember-dashboard-controls)\n\n## Description\nThis Ember Addon simply wraps some of the new controls available in the [Dashboard Bootstrap Theme](https://themes.getbootstrap.com/products/dashboard) into an easy to use addon.\n\nThis addon is still a work in progress.\n\n_N.B._ The theme itself is not included in this addon since it is a premium theme and requires a purchase.\n\n## Installation\n\nLike most ember addons, simply run `ember install ember-dashboard-controls` and you should be all set.\n\n## Docs\n\n### Dashhead\n\nThe Dashhead currently exposes the `titles` and `toolbar` components which can be used to create the left and right side of the dashhead component respectively.\n\n#### Titles\n\nThe `titles` component exposes the `title` and `subtitle` components which can be used to display the title and subtitle in the Dashhead.\n\n#### Toolbar\n\nThe `toolbar` currently only exposes the `divider` component which is used to create vertical dividers inside the toolbar. The toolbar items themselves should use the `dashhead-toolbar-item` class for the time being.\n\n_Here's what a complete dashhead would look like:_\n\n```hbs\n{{#db-dashhead as |dashhead|}}\n  {{#dashhead.titles as |titles|}}\n    {{#titles.title}}Example Title{{/titles.title}}\n    {{#titles.subtitle}}Example Subtitle{{/titles.subtitle}}\n  {{/dashhead.titles}}\n\n  {{#dashhead.toolbar as |toolbar|}}\n    \u003cdiv class=\"btn-group dashhead-toolbar-item\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-outline-primary\"\u003e1\u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-outline-primary\"\u003e2\u003c/button\u003e\n    \u003c/div\u003e\n\n    {{toolbar.divider}}\n\n    \u003cdiv class=\"btn-group dashhead-toolbar-item\"\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-outline-primary\"\u003e3\u003c/button\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-outline-primary\"\u003e4\u003c/button\u003e\n    \u003c/div\u003e\n  {{/dashhead.toolbar}}\n{{/db-dashhead}}\n```\n\n### Icon Navigation\n\nThe Icon Navigation currently exposes the `brand` and `items` components which can be used to create the brand and navigation items of your icon menu.\n\n#### Brand\n\nThe `brand` component can be configured via the `icon` and `destination` properties. As you've probably guessed already the `icon` property lets you define the icon class that will be applied to your brand and the `destination` property will let you dictate the navigation target of the brand element.\n\n#### Items\n\nThe `items` component exposes the `item` component which together are combined to create the menu items.\n\n##### Item\n\nThe actual navigation item can be configured using the `icon`, `label` and `destination` properties.\n\n_Here's what a complete iconav would look like:_\n\n```hbs\n{{#db-iconav as |nav|}}\n  {{nav.brand icon=\"icon icon-home\"}}\n\n  {{#nav.items as |items|}}\n    {{items.item icon=\"icon icon-home\" label=\"Home\"}}\n    {{items.item icon=\"icon icon-user\" label=\"Profile\"}}\n    {{items.item icon=\"icon icon-gauge\" label=\"Dashboard\"}}\n  {{/nav.items}}\n{{/db-iconav}}\n```\n\n### List Group\n\nThe List Group currently exposes the `header` and `item` components in order to enable the creation of list groups.\n\n```hbs\n{{#db-list-group as |lg|}}\n  {{lg.header text=\"Header\"}}\n\n  {{! Item inline style }}\n  {{lg.item class=\"item-1\" text=\"text 1\" progress=25}}\n\n  {{! Item block style }}\n  {{#lg.item class=\"item-2\" progress=33}}\n    text 2\n  {{/lg.item}}\n{{/db-list-group}}\n```\n\n## Contributions\nAny contribution is more than welcomed. If you plan on introducing a new feature, please open an issue and share your idea prior to implementing it, it could save you precious time!\n\n## Troubleshooting\nIf something is not working as expected, simply open an issue and we'll discuss how we'll go about fixing it!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbellgasp%2Fember-dashboard-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbellgasp%2Fember-dashboard-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbellgasp%2Fember-dashboard-controls/lists"}