Content Tabs

[James Galliford]

Hello,

This is my first time using Ractive and it's on a project I've inherited that has no documentation, so I'm piecing together my understanding as I go, so please excuse me if this is an obvious question.

I'm trying to create something similar to the following example, where I have tabbed content that I can show when the user clicks on the tab, providing different options and making different functionality and validators available: 

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_grid&stacked=h

Is this something that is possible, and if so could somebody show me a simple example in jsfiddle? I would appreciate a generic example over something specific to my code so that I have to perform the exact implementation for myself, since that's how I learn best.

Thanks.

[Chris Reeves]

A tab component can be a pretty complex beast, especially if you want to make it generic. The version of Ractive that you're using also has significant bearing on how you can approach it. The best way to have a generic declarative tab component involves shuffling some template ast, but you can achieve one-off results really easily:

https://ractive.js.org/playground/#N4IgFiBcoE5SBTAJgcwSAvgGhAF3gDwDOAxjAJYAOuABLgJ6UIC8AOnggB64D0YuAWwA27GuSRsOAykICGuBOwB8rAHatcBAK5ClwYAGIEskmBoA-HrlkAjIhgwEh5GgHtVAWhLOSAa0kAAgB0RAi4ABQA5KFCCCQKSJFYNAHkqkhcAJSi3rJERB4xcQmS4ZZF8cg0AD7VNAAMmTTMLSlpGZzK+kFyNghCDgQ8znrAPMamgzw6KuqaSOQAbrMaGvoGAO7kuGaW1nYA2uX9xVW1DQC6DmqruGuG5ABmNEGUsjC45LIDGDd3--clK93p9vtc5rd9P1QuDbpDuiR3ApVLgHL8If99DwnrDMWMtjtcUMFss1ENSBRqCtVMQyFRaAwmJIFNw+IIRCAxBJ2PsAIzKP4AFTA5CIYjFOwQdAQ0jkChoj1cMDothovKCZJ4FPp1IIJK5zPeaDuICUxKWShAOCI8ERqiItGVzBoqgQGxoACUTJ9FghwsA-tYYMbIDRIgYg8akoGZTJ5AhQ+GFLL49G5kh5LJQwGMfsiKGDhcsH8NKpZAIE2GAFauBCRP7ojCZADcN1UMFeWiIYCieaSNGANDeHy+QkTfP7vX6ice5BgDsiNCbrfbne7vdsRH7g7tyNw45FYtFNAINiU-GEQzPNF3CBRdDA8hvsnUrEitF3sjS0pTCkntmnMMkFcLclxbNQO0oLse3fTdtyHEFR2zH84wUA9j2PF8xFUZxXQQ+cqmTVCECCGgAEln1UGgiFkegaDAfohFcZJ9EsMsKwcRdsBoKcxzDXAYFcUUuJbK0QBIeAdAHGgBCNNJQ3qZsEKQBZVBQBSlOcB1CgYWJQ1UdwECU9FnGkhYiDjehQzSXCEA8GwmL8JS3hUtJ1IaIIAFYZSU2Tg3kjzvIEJSbCVDIYHs1xcFwVwBFDXlKE4ajXGcJAaAckxfGMtRnBCE5KjSwdQpgcLIui2L4sS5LUpoGBkGMzAgA

That example has hard-coded paths, and is thus not very reusable. It could be turned into a component though, which would be a good start.

If you'd like something pre-built, I have a generic tab component that mostly follows material design that I haven't gotten around to publishing yet.

Thanks, Chris

--
You received this message because you are subscribed to the Google Groups "Ractive.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Martin Kolárik]

Recently I built a generic "slider" component, and I would probably use a very similar approach for "tabs". The only difference is that my slider only cares about what content is displayed and doesn't have any UI (tabs) for switching the slides by default - this would be fairly easy to add. A good part of the code is also related to nice animations and could be removed if you don't need those. Here's a demo:

https://ractive.js.org/playground/#N4IgFiBcoE5SBTAJgcwSANCAzlA2uAC6EAO2kA9BQMZIB2AdAFbZIIA2AlgG4wN0JCFOiQC2FGAENqhHggC0hKXWydZAexXyAZuwCeAAQAMDAMwMjFJJ2xCpMuYuWqNW3XoYBXUUgajOjCwgALoAvliE8AA82NQwnCSEAASEeiQIALwAOiCECAAeQmCEouw5SZxI2bkIoiTsknk5AHxZdFmEUQBGnsSaSZry1FzUANbVBoRgNgzanDAIABQA5NhcbPIkC9zLAJQtAArbSWuVCFEUPX10re2dV4T9g8OcYxNTM3MLK6cb2GDqADuywwSSM+xAzQAjBcHppbh1ur1HnQBnQhiNxjlJtNsLN5ktVusFP8gSCklCIc0AEyw5HwtqIuGo56Y964-HfIlneSk4Gg6lU0x064I+70lnol5vbEfPFfQm-BQCQp7FoAOQQthOxJFKLFjM6SpgSWsCwcmmq3AQMFk1EkZRAppshEkdGomRy1KMLUNiKVBsIHQAKriKtgdWckgBiKEMP2dCgBhMxYmBkNhmyRtgx6nxu6IpNplPJgtBwihrNZpUx8wpotnMUXY23ZtxBKEBF0KLWbgVKo5V0wNBByEXXvNTA4eDUTTa41JDJJABK0lk1oYBTydCQi2Ahuo2HISQABgwF8AkiR1C5OJpIEkFg11wgANwDa0wXRAh-TJBsOh31CE8MENPI6mfBAHxPQ0ex4JJhkkI9qmNX0y2AYA9E4DgkFCUJYKsHgxRAw0kEaSQkkWXYkn3MsFkITwYFRWiOlY10HGtB8jFAssOjNBALToB9lgBeIAC9NFddgQQTPiXTdD0H29IxuNkwgkEYxo7yEpIABYVJ4tiOiVY88GCQzy1CV9DXCQ1NACNRKOoljyzlc9BB+YlsHJNy5h3ABBdh2AAYXUOpNAQOhCGwTyzj2XZrLLNyR1ithvN2PBko85Y1zkPZgncwgVly60fJgTwEASmyLM0BYdxtJyaITNySEkOrCAYTQVgAKnPYl5BVQhySoxdmhSDlBqoqqko5Vr2s6uger6nktgQHZQRGjIxpa7YpsStiWrayKOq65ZeqVXkAX5SiEFBJUAEl6vyaitvGmY+UWB6nt2aaOlsu5Bsor62HyRc3rxFKco4hA9iSABqClnITdhBGzLUwayoruTSvZ9vLThtEozHiuh2GojRvEUboFApiSeREaa3jCBR5JqEYk0lxMzKOUhkqYd2YI8bYlmkkBzmvLwYGCkFtSCaJnnsv4wTYYyVWkhE9RxMkh1YZcozCDZmA+GwDzLyUN1b00AB5RJtOPS8ECQgIUGErgBDa8kNKkVwH2J5Yva0zQ9lBfIH0UBWsesWwFP50E9C4pJQkT37yzYwbCr3FJnDUbSbdce2kkd1RqddgJHZgT3NJ98GGEhgPXGDpJQ5ruv5PdWOknjsFE+ToXLML9gTcZ-WOkN43Tazi2c+t225wfB2nZL9W3fLyvve032I5WevtMb5vuM7sO-aj1129hpPQhT-X05Noqzez1w87t+fC8Xl3l7Lj3QR3+8W8Vqvd67BDlxOOm8Zit2jmfaiF8r6WTUmPDOl4+YPm0A6E2oIbBW16L7cqCBk4MCmJFRYm0xoINvpnc2Khp50CfnPUWnggoYOwFgwgKC0F4MvrAjoN8J7IKzhVJhj0cEVXwYQxaJDRZbkQZPKhj9Z4qAfHQBh7BBE6VQYPDhP0+4dDcuQqGL5yRS2en3fCdx-odFWn2T6xJHogwxlvfReVqL00pMPcsIsTL2PAdlEyuMExy0WH7PmsMxrgjccLVGY8wZcyCaTAW2jmaozFhTSWNinoyyZgE4+BJlYvTVhrLWUUdZIyZqPdm0jKGWxofIguRdnal3dhXb+ADf7HxaXQPeYCIaKzbh6RuXcjA90vgk7hUjyH3ynnI-OL86lL2WCvL+pp2ldNrv-deQcgFNyPg4k+Md+kJxgQkpOHAh561Tgbcp4yZFVNoQomir9i7v3mZ-JpSz1k6Tae8zpYJQF-0jr0-mQyuHlh4Xfa51Dbm1Lfg01ezT3krLru075B8u7h28f8yBfToG9zUqY-WZDeHQzYRophLDhG3VEWAIhEiCVgsqRCmpijlGkuwUkdRQ9OEJNBZnPhSgBHhiEfwzRBCqXiJemNblEzZG50ZfQxhAq1HsOTsC3R2Vgl3TSSDWBeLCDmOildIGmqCglLYgEoxSRyaxIMT9cJrlZq7SMdqgeQ8zVGtBttBxwSbVnJ0RNLc1izi2ONSYmybRhmMndHOZINYlyrmhpuQokVdwuXAvURoUFTywV7AhBoyEchKnKLYPQKNqgYWjHLGwj08LXiqQ+SQXRsDqHYL0N8KR1AkC4u+QElQpgPihCpAApK+DCFACZ4TQmxMtcs+bjrLHBPsU7CbuDwu4eQAR5DqF6NUelUy7Y5BHWO0I6ZCAYSwjhWdbFxxEQTAe7QF7EwThIncWqSaGojTOaqrG7gyoVRTv9cN7RI0qGSBzSRgIVx8z3GBNqI5hLRiHCOGSdxU2QTgyh9NSHR5hWvAIKKBdjQaqjHq+ydBHLvuahyPySBQrhVw1jY0exzxXUWOCPG-6EpTmoPABh9zRAwYCJ2q8kh-z1LBO+LgtheSpBRooiKQE2hcHuVHNNXcAgr3kF0dg6gxjvlaiJpeJgACstR3x8eHAJsEDBjOiHfF0TWbAYAafUH0UQfaSCg0besJImnpCjHk3QLg7kUYyGQPcuzMAHNOZc25jzTbKiPmQEBEAoQgA

The code is part of an MIT licensed project available on GitHub (https://github.com/jsdelivr/www.jsdelivr.com/tree/master/src/views/components) so feel free to use it.

Dňa štvrtok, 7. septembra 2017 12:12:17 UTC+2 James Galliford napísal(-a):

[James Galliford]

Hello,

Firstly, thank you both for the quick replies. Yours in particular Chris is almost exactly what I'm looking for. I now have the problem that the website I'm working with is using version 0.7, rather than 0.9, so now there are several things that I need to change to make this work. 

Mostly these are just style-related issues, such as closing if or with statements, however there are a couple of issues I'm having that due to my inexperience I'm not able to solve very easily:

<tr class="setting">
 <th>Caption size</th>
 <td>
  <a class="button" on-click="setting:{{'captionSize'}},{{-2}}"><i class="fa fa-minus"></i></a>
 <span style="font-size: {{data.settings.captionSize}}px">{{data.settings.captionSize}} px</span>
  <a class="button" on-click="setting:{{'captionSize'}},{{+2}}"><i class="fa fa-plus"></i></a>
 </td>
</tr>

<tr class="setting">
 <th>Display for</th>
 <td>
  <a class="button" on-click="setting:{{'interval'}},{{-2}}"><i class="fa fa-minus"></i></a>
 <span>{{data.settings.interval}} seconds</span>
  <a class="button" on-click="setting:{{'interval'}},{{+2}}"><i class="fa fa-plus"></i></a>
 </td>
</tr>

and 

<div class="stars">
 <label>Customer service</label>
 <ul>
 {{#stars}}
 <li>
 <i class="fa {{fa(., service)}}"
 on-click="star.click:{{'service'}},{{.}}"></i>
 </li>
 {{/}}
 </ul>
</div>

both use the on-click functionality to call into other methods, passing string literals as parameters. I keep getting the errors like:

ParseError: Expected matching quote '"' at line ...

with the character always pointing at the colon for the on-click. Is this something that you have dealt with when upgrading versions before and is there an easy way to resolve this? 

Thanks,

James 

Thanks, Chris

To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+...@googlegroups.com.