An object details page packages together all details about an object in a full page of real estate. The ember-frost-object-details component will provide you free animations, styles and the frame of the page with simple setup.
With current design, you need have two directories named views and related at the same level as the template you decided to use frost-object-details. All your view routes and related routes should go into the corresponding dirs.
ember install ember-frost-object-details
Component | Attribute | Type | Value | Description |
---|---|---|---|---|
{{frost-object-details}} |
defaultRoute |
string |
Default entry route for object details view (Mandatory) | |
{{routes.view}} |
detailsRouteIndex |
number |
Provide left-to-right or right-to-left slide animation when transition between two view routes based on comparing their detailsRouteIndex value (Optional) | |
{{routes.related}} |
icon |
string |
The name of the icon to display (Optional) |
In this scenario, frost-object-details is rendered in details/template.hbs . Two dirs were created as details/views and details/related with corresponding sub-routes inside it. The frost-object-details is usually used with two contextual components, view and related. The 'view' route component is usually used to display and select alternate available object views, and the 'related' route component will render a quick link to important related data in context of the object.
Ember-block-slots is used in frost-object-details for conditional yield. Both 'view-route' and 'related-route' are predefined key for corresponding section yield and you should use it as so for your different routes section without change
Block-slot will yield back a hash containing contextual components which you can use to render your sub-routes. You can get access to these contextual components in hash via a predefined key. There are two different types of contextual components, '.view' for view routes and '.related' for related routes. Both of them are built on top of ember {{link-to}} helper and you can treat them just like {{link-to}} when handling route name and dynamic segments.
git clone git@github.com:ciena-frost/ember-frost-object-details.git
cd ember-frost-object-details
npm install && bower install
A dummy application for development is available under ember-frost-object-details/tests/dummy
.
To run the server run ember server
(or npm start
) from the root of the repository and
visit the app at http://localhost:4200.
Run npm test
from the root of the project to run linting checks as well as execute the test suite
and output code coverage.