ember-nrg-ui v4.1.12
ember-nrg-ui
Ember NRG UI
Compatibility
- Ember.js v3.28 or above
- Ember CLI v3.28 or above
- Node.js v14 or above
Ember NRG UI is an opinionated UI addon based on how KUB scaffolds web applications. The addon provides the skeleton of an Ember app so that a developer can immediately start solving a business problem. It includes an application shell with sidebar navigation, typical UI components, and a Release Notes route implementation to get you started.
What it does
- Overwrites
application.hbs
to usenrg-application
component - Converts the application to use Sass
- Adds routes
/release-notes
and404 Not Found
- Modifies
config/environment.js
- Modifies
ember-cli-build.js
- Installs
ember-cli-mirage
andember-cli-sass
- Uninstalls
ember-welcome-page
- Adds
public/.htaccess
file - Adds
app/styles/_nrg-override.scss
for theming
Example App
Ember NRG UI comes with a dummy app that implements all of the components. Check out that dummy app for reference. To start it, run
git clone git@github.com:knoxville-utilities-board/ember-nrg-ui.git
cd ember-nrg-ui
yarn install && ember serve
and go to http://localhost:4200.
Installation
Installing the library is as easy as:
ember install ember-nrg-ui
See the Contributing guide for details.
Getting Started
Once the addon is installed, create a new index route and template:
<!-- app/index/template.hbs -->
<div class='ui segment basic'>
<NrgHomeCards as |view|>
<view.home-card
@label='Hello World'
@icon='globe'
@route='index'
@meta='obligatory'
/>
</NrgHomeCards>
</div>
Theming
Use the _nrg-override.scss
file to override base colors and Logo
// app/styles/_nrg-override.scss
$primary: #6200ee;
$primaryVariant: #3700b3;
.nrg-application.nrg-application.nrg-application,
.ui.modal.side-by-side--takeover.side-by-side--takeover.side-by-side--takeover {
.main.menu.menu {
background-color: rgba($primary, 0.98);
}
}
.nrg-list.nrg-list.nrg-list .items > .item.active.active {
background-color: $primary;
& .description,
& .description > a,
& .header,
& .meta,
& > .icon {
color: #fff;
}
}
.home-card.home-card.home-card.home-card .image.icon {
background-color: $primaryVariant;
}
Import the override file into the main app.scss
// app/styles/app.scss
@import 'nrg-override';
Displaying Environment In App Bar
By default, every environment will be displayed in the App Bar except for prod
.
To change this, add an array property called productionEnvironments
to the ENV
variable in the config/environment.js
file for your app.
For example, if your production environments are prd
and prod
the environment.js
file would look something like this:
module.exports = function(/* environment, appConfig */) {
const ENV = {
...
'ember-nrg-ui': {
productionEnvironments: ['prd', 'prod'] // <- Look Here
}
...
}
return ENV;
};
8 days ago
10 days ago
17 days ago
24 days ago
30 days ago
1 month ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
6 months ago
6 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago