mirror of https://github.com/hashicorp/consul
5fb9df1640
* Adding explicit MPL license for sub-package This directory and its subdirectories (packages) contain files licensed with the MPLv2 `LICENSE` file in this directory and are intentionally licensed separately from the BSL `LICENSE` file at the root of this repository. * Adding explicit MPL license for sub-package This directory and its subdirectories (packages) contain files licensed with the MPLv2 `LICENSE` file in this directory and are intentionally licensed separately from the BSL `LICENSE` file at the root of this repository. * Updating the license from MPL to Business Source License Going forward, this project will be licensed under the Business Source License v1.1. Please see our blog post for more details at <Blog URL>, FAQ at www.hashicorp.com/licensing-faq, and details of the license at www.hashicorp.com/bsl. * add missing license headers * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 --------- Co-authored-by: hashicorp-copywrite[bot] <110428419+hashicorp-copywrite[bot]@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| README.mdx | ||
| index.hbs | ||
| index.js | ||
README.mdx
# Outlet
The `Outlet` component should be used to wrap *every* ember `{{outlet}}`. It
provides/will provide functionality (along with the `<Route />` component)
for setting and announcing the title of the page, passing data down through
the route/template hierarchy, automatic orchestration of nested routing and
visual animating/transitioning between routes.
## Arguments
| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `String` | `undefined` | The name of the route in ember routeName format e.g. `dc.services.index`. This is generally the `routeName` variable that is available to you in all Consul UI route/page level templates.|
| `model` | `Object` | `undefined` | Arbitrary hash of data to pass down to the child route (available in the `<Route as |route|>` export). |
```hbs
<Outlet
@name={{routeName}}
@model={{hash
dc=(hash
Name="dc-1"
)
}}
>
{{outlet}}
</Outlet>
```
Currently, using the `<Outlet />` component means that every single page/route
template is wrapped in a HTML `<section>` element. This `<section>` element
has various data attributes attached to indiciate the loading state of the
outlet. These can be used to specifically target every individual outlet via
CSS.
## Attributes
| Data Attribute | Description |
| --- | --- |
| `data-outlet` | The name of this outlet in ember routeName format e.g. `dc.services.index` |
| `data-route` | The name of the current child route of this outlet in ember routeName format e.g. `dc.services.show` |
| `data-state` | The current state of this outlet, `idle` or `loading` |
| `data-transition` | A combination of `idle` and `loading` states |