search

Semantic-Org / Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.
http://www.semantic-ui.com
MIT License
51.12k stars 4.94k forks source link

how to use tab control in semantic-ui 0.16.1(lates) #801

Closed yizhl closed 10 years ago

yizhl commented 10 years ago

Hi, First I want to thank for Semantic-UI what is a amazing,real light weight and semantic css framework.Very beautiful,eazy to use it make a reponsive web. Here I want to ask a question about tab control in semantic-ui,I can see the css,js source in package but cannot find any detailed doc about it.I searched by google found that someone had asked before months ago but no results. 1 1

Some searched results as below:

https://github.com/Semantic-Org/Semantic-UI/issues/170 https://github.com/Semantic-Org/Semantic-UI/issues/209

From these link said tab control should be add docs after version above 1.0 and asked long time ago. But now Semantic-ui is 0.16.1 in latest version,thanks to the author's hard work. Is there any detailed doc about tab control in the latest versioni?

vanniktech commented 10 years ago

I am also interested in the Tab module. Have you found out anything so far?

Under Semantic API's, you can see a brief introduction of the tab module, but nothing special.

I am looking for a way to add and remove tabs.

jlukic commented 10 years ago

Beta documentation is now available here: http://beta.semantic-ui.com/modules/tab.html

This corresponds with the javascript available in the css branch which is for 1.0 release.

vanniktech commented 10 years ago

@jlukic Thanks for the documentation.

Can you point out whether it is possible to add and remove tabs programmatically or not? I cannot find a way to accomplish it.

jlukic commented 10 years ago

You can add tab content using AJAX endpoints, by either using auto:true in conjunction with history: true and having the server return responses for the full tab url, or by using apiSettings: { url: 'myendpoint/?tab={$tab}' } with the (also undocumented) API module.

If you want to add new tab menus or tab containers, you can just re-initialize tab using $('.whatever').tab(); after you add an element.

vanniktech commented 10 years ago

Yeah I figured out that .tab() is used to initialize the complete stuff. Same goes for deletion just delete the <a> element and the corresponding <div> element and call .tab(). Of course if you delete the current item, it has to be changed with .tab('change tab', '<data-tab>');.

I think that this should be mentioned in the new documentation. Anyway thank you so much for your help. Nice framework, keep up the brilliant work!

jlukic commented 10 years ago

Continued discussion in #209