-
-
Notifications
You must be signed in to change notification settings - Fork 110
Adding documentation on @processContent
#381
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome!
|
||
```HTML TabHeader.html | ||
<template> | ||
<button class="btn btn-link" class.bind="isActive?'active':''" click.delegate="tabSelector()"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A little space typo here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tried to resolve it. Maybe it was a tab/space thing. Copied from code sandbox or something like that.
``` | ||
|
||
The `processTabs` method used in `@processContent` may look overwhelming, but all it does is mostly pure DOM manipulation. The function takes four arguments, out of which `node` holds the DOM fragment for `<tabs>...</tabs>` used in `app.html`. And then in this function, we transforms the original DOM fragment to something like below. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should there be a before/after comparison for the "look" of <tabs>...</tabs>
as the content are a bit far away from each other?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you mean like a side by side two column comparison? If yes, then I am not really sure how to do that in pure markdown. That might be possible if I use HTML, but then again follow the question of code highlighting and all. Or just duplicating the previous code fragment right before this one, will do? Or have I completely misunderstood?
|
||
[simple tab demo](https://codesandbox.io/s/48lj5v3924?autoresize=1&hidenavigation=1&module=%2Fsrc%2FTabs.js&view=preview) | ||
|
||
*Psst psst: have you noted that you can register the control with a different name and use that while creating the element? So it is possible to alias your `tab-header` as `zaphod-beeblebrox`. Fancy that!* |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh well, fun had 😆
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😃
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I enjoyed it :)
Btw, awesome demos. |
Thanks 😃 |
Great work @Sayan751 If it's ok with you, I'd like to move your demos over to our official Aurelia CodeSandbox so we can maintain them in one place going forward. Any objections to that? |
On the contrary, I would like those code sandboxes to be inherited by Aurelia core team, so that I don't have to maintain those 😀 And thank you for the kind words 😄 |
Excellent. I'll try to get that taken care of in the next couple of days and get this doc release out. |
Submitting documentation on
@processContent
for review. The suggestion coined from the discussion on discourse.@EisenbergEffect @bigopon Hope the details provided is easy to understand. However, please feel free to suggest/make edits.