How to: render tabs #62
Conversation
dpobel
force-pushed
the
doc_tabs
branch
2 times, most recently
from
089c23b
to
cf884d2
Compare
docs/howto/render_tabs.md
Outdated
|
|
||
| Constraints: | ||
|
|
||
| * To be recognized, the tabs markup must be inside a `ez-server-side-content` |
There was a problem hiding this comment.
- To be recognized, the tabs markup must be inside an
ez-server-side-content
docs/howto/render_tabs.md
Outdated
| * To be recognized, the tabs markup must be inside a `ez-server-side-content` | ||
| custom element or a custom element extending this one (`ez-content-view`, ...) | ||
| * Each tab consists of a *tab label* and a *tab panel*. A panel must have an | ||
| `id` and the corresponding tab label must contain a link which |
There was a problem hiding this comment.
id and the corresponding tab label must contain a link whose
docs/howto/render_tabs.md
Outdated
|
|
||
| ### JavaScript API | ||
|
|
||
| When switching tab, the `ez:tabChange` custom event is dispatched from the |
There was a problem hiding this comment.
When switching tabs, the ez:tabChange custom event is dispatched from the
docs/howto/render_tabs.md
Outdated
|
|
||
| When switching tab, the `ez:tabChange` custom event is dispatched from the | ||
| `ez-server-side-content` custom element. This event carries the tab label | ||
| element and the tab panel element that are going to be selected. It is is |
There was a problem hiding this comment.
element and the tab panel element that are going to be selected. It is
docs/howto/render_tabs.md
Outdated
|
|
||
| ## Asynchronously loaded tabs | ||
|
|
||
| By definition, only one tab is visible at a time. So when having tabs, it is |
There was a problem hiding this comment.
By definition, only one tab is visible at a time. So when you have tabs, it is
docs/howto/render_tabs.md
Outdated
|
|
||
| #### Links | ||
|
|
||
| By default, a link in an `ez-asynchronous-block` behaves as [any link in the |
There was a problem hiding this comment.
By default, a link in an ez-asynchronous-block behaves like [any link in the
docs/howto/render_tabs.md
Outdated
| #### Links | ||
|
|
||
| By default, a link in an `ez-asynchronous-block` behaves as [any link in the | ||
| application](prevent_navigation_enhancement.md). By putting the class |
There was a problem hiding this comment.
application](prevent_navigation_enhancement.md). By assigning the class
docs/howto/render_tabs.md
Outdated
|
|
||
| By default, a link in an `ez-asynchronous-block` behaves as [any link in the | ||
| application](prevent_navigation_enhancement.md). By putting the class | ||
| `ez-js-local-navigation` on a link or one of its ancestors in the block, the |
There was a problem hiding this comment.
ez-js-local-navigation to a link or one of its ancestors in the block, the
docs/howto/render_tabs.md
Outdated
|
|
||
| So it's possible to listen to `ez:asynchronousBlock:updated` from the block | ||
| itself or from any ancestor HTML element (and even from the document) to apply | ||
| any kind of JavaScript enhanced on the newly added markup. |
There was a problem hiding this comment.
any kind of JavaScript enhancement on the newly added markup.
docs/howto/render_tabs.md
Outdated
| application](prevent_navigation_enhancement.md). By putting the class | ||
| `ez-js-local-navigation` on a link or one of its ancestors in the block, the | ||
| `ez-asynchronous-block` custom element considers a click on this link as a | ||
| *local navigation*. That means the block will prevent the default link behaviour |
There was a problem hiding this comment.
local navigation. That means the block will prevent the default link behavior
Requires: ezsystems/hybrid-platform-ui-core-components#28
Description
Documentation for tabs related stories: