jonjamz / blaze-tabs Goto Github PK
View Code? Open in Web Editor NEWReactive tabbed interfaces compatible with routing (Meteor).
Home Page: https://atmospherejs.com/templates/tabs
License: MIT License
Reactive tabbed interfaces compatible with routing (Meteor).
Home Page: https://atmospherejs.com/templates/tabs
License: MIT License
I haven't tried this package yet, but it looks very promising. Does it support stateful/sticky routes, similar to Angular's ui-router-extras?. For the best UX, form inputs, scroll state, text selection etc. should be preserved when navigating back to a route. iron:router doesn't yet support this. If tabs
does, it would be a major distinguishing feature to add to the About heading of the README.
been trying various things and can't get the styles applied. it seems something is dynamically overriding styles on load.
I have a "basicTabs" interface working, and want to add "activeTab" functionality so that I can route directly into a tab.
Adding the "activeTab" parameter to the tabs container "works", except that the tab then renders completely blank. Clicking to another tab and then back to the one I made "active" then makes the content appear... but the initial render is completely blank.
Using FlowRouter for routing, in case that helps?
Some code snippets below; let me know what else I can do to help provide a reproducible example:
Diff of change to tab-container:
'- {{#basicTabs name="tab-container" tabs=tabs}} <<< this was working
'+ {{#basicTabs name="tab-container" tabs=tabs activeTab=activeTab}} <<< this now fails
Simplified template helper:
activeTab: function () {
return 'plan';
// return FlowRouter.getParam('activetab');
}
HTML; "plan" is a valid slug:
{{#tabContent slug='plan'}}
{{>planSettings}}
{{/tabContent}}
At https://atmospherejs.com/templates/tabs I see
Build any tabbed interface: * really easily. * with custom templates. * with router integration. * and sticky tab states.
Re-publish maybe? If that doesn't fix it, https://github.com/percolatestudio/atmosphere/issues
Please do not use colon character (:
) in file names as this conflicts on Windows systems.
When attempting to install the package as it's current, an ENOENT
error is prompted regarding templates:tabs.html
not being found in the temp folder. Full error log:
C:\Users\myusername\AppData\Local\.meteor\packages\meteor-tool\1.1.10\mt-os.windows
.x86_32\dev_bundle\lib\node_modules\fibers\future.js:278
throw(ex);
^
Error: ENOENT, open 'C:\Users\myusername\AppData\Local\Temp\tempfolder\web.browser\t
emplates:tabs.html'
at [...]
Temporary solution found :
templates_tabs
with a subfolder for the version (e.g. 2.2.1
).isopack.json
for the package. I won't go in details here as there are enough documentation regarding this or simply copy an isopack
from another package.C:\Users\myusername\AppData\Local\.meteor\packages\
meteor add templates:tabs
and launch your application. Enjoy.Is there a way to conditionally (maybe based upon the value of a helper) show/hide a tab?
When I try to use this package in another package it complains that it can't find "basicTabs". If I paste the "basicsTab" template in to the html of my package then I get "Error: No such function: isActiveTab".
I've tried to include the package in all possible load orders but still no luck. Any one knows whats going on ?
The README says:
There are two ways to define content for your tabs:
1. Wrap each tabbed section in a blank `<div></div>`.
Sections must correspond with the order of the tabs you specified.
2. Wrap each tabbed section in the provided block helper (RECOMMENDED!).
`{{#tabContent slug="nameOfSlug"}} ... {{/tabContent}}`
These can be defined in any order you like.
Is 1
really an option? If so, how is one supposed to "unhide" it (since the block helper is responsible for setting the active
class that changes the display
setting)?
FYI, I'm just trying to add a class to the <section>
's without forking, so I'd again be satisfied with:
<template name="tabContent">
<section class="tabs-content {{klass}} {{isActiveTab slug}}" data-tab={{slug}}>
I find the use of the word name
in this project ambiguous. I would think name
would refer to what is displayed on the screen, but it is also used to refer to a CSS class:
<template name="basicTabs">
<div class="basicTabs-container {{name}}">
...
I wonder if it wouldn't be better to name it something else, for example:
<template name="basicTabs">
<div class="basicTabs-container {{klass}}">
...
It would also be nice if there were a similar functionality in BasicTabs
for assigning classes to tab-item
's, for example:
<ul class="tabs-list">
{{#each tabs}}
<li class="tab-item {{klass}} {{isActiveTab slug}}">{{name}}</li>
{{/each}}
</ul>
I am trying to group autoform fields into individual tabs but the data on an 'update' form is all blank.
I am just using the basic tabs example. Here is what the autoform template looks like...
<template name="updateRecipe">
<h1>Update Recipe - {{recipeName}}</h1>
{{#basicTabs name="" tabs=tabs}}
{{#autoForm collection="Recipes" id="updateRecipeForm" type="method-update" meteormethod="updateRecipe" doc=this class="form-inline"}}
{{#tabContent slug="details"}}
{{> afQuickField name='recipeName'}}
{{> afQuickField name='purpose'}}
{{> afQuickField name='source'}}
{{> afQuickField name='description' rows=6}}
{{> afQuickField name='image'}}
{{/tabContent}}
{{#tabContent slug="ingredients"}}
<h3>Ingredients</h3>
{{> afQuickField name='yieldWeightPerUnit'}}
{{> afQuickField name='yieldNumberOfUnits'}}
{{> afArrayField name='recipeIngredients'}}
{{/tabContent}}
{{#tabContent slug="method"}}
<h3>Method</h3>
{{> afArrayField name='method'}}
{{/tabContent}}
<button type="submit" class="btn btn-primary">Update</button>
{{/autoForm}}
{{/basicTabs}}
</template>
Not sure if it's related but I am using iron router for the update page like this...
Router.route('/recipes/update/:_id', function () {
var item = Recipes.findOne({_id: this.params._id});
this.render('updateRecipe', {data: item});
}, {
name: 'recipe.show'
});
So just to clarify. If I don't use the tabs in the template, all the data from the document shows up as it should. If I use the tabs, all the fields are blank.
Thanks
This is going to be hastily reported, sorry in advance, let me know if you need more details.
In my routes:
this.render("toptemplate",{data:{info1: "hi", info2: 7}})
Template:
<template name="toptemplate">
{{#dynamicTabs name="app_sections" tabs=tabs }}
{{ahelper}}
{{#tabContent slug="tab1"}}
tab1
{{/tabContent}}
{{/dynamicTabs}}
</template>
toptemplate.js:
Template.toptemplate.helpers({
ahelper: function(){
console.log(Template.currentData().info1) //undefined
console.log(Template.parentData().info1) //"hi"
}
})
I guess it should be documented that the template's data is moved to parentData()
under those circumstances. It was unexpected for me and took me a bit of time to work out what was wrong.
Great lib btw - cheers!
Is there a easy way to add an icon, from say the Meteor Font Awesome package, to the tab in addition to the normal text that's displayed?
First, thank you for this package. This is awesome!
I want to use this within my project, though am unsure how to leverage Meteor template helpers within the individual tabs. My thought is that I would like to move the Meteor.subscribe methods to the individual tab render functions and remove them from the iron router waitOn functions. That way I could speed up the load time a bit and not bring back all the data at once.
Currently I'm using iron router and the waitOn: method to subscribe to a few collections.
waitOn: function() {
return [Meteor.subscribe('colors', this.params._id), etc.....];
},
On the parent template, I have blocks of code that loop through the collection data to list out all the entries.
Per your docs and so I have seen, each tab has it's own scope, which is awesome, just not sure the best way to go about leveraging meteor helpers within the tab render callback (if that is even feasible).
Any help would be appreciated. Thanks in advance and again, thank you! -Chris
Hey @jonjamz, thanks for the awesome package! Does it support Flow Router? The documentation only mentions Iron Router. (I've recently began using React so needed to switch from IR to Flow).
Thanks,
Kris
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.