Skip to content

Conversation

Sayan751
Copy link
Member

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.

Copy link
Member

@bigopon bigopon left a 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()">
Copy link
Member

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

Copy link
Member Author

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.

Copy link
Member

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?

Copy link
Member Author

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!*
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh well, fun had 😆

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😃

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I enjoyed it :)

@bigopon
Copy link
Member

bigopon commented Jan 26, 2019

Btw, awesome demos.

@Sayan751
Copy link
Member Author

Btw, awesome demos.

Thanks 😃

@EisenbergEffect EisenbergEffect merged commit bca848e into aurelia:master Jan 26, 2019
@EisenbergEffect
Copy link
Contributor

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?

@Sayan751
Copy link
Member Author

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 😄

@EisenbergEffect
Copy link
Contributor

Excellent. I'll try to get that taken care of in the next couple of days and get this doc release out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants