Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Feature Request] v-tabs Vertical option #3971

Closed
AGPDev opened this issue Apr 30, 2018 · 10 comments
Closed

[Feature Request] v-tabs Vertical option #3971

AGPDev opened this issue Apr 30, 2018 · 10 comments
Assignees
@johnleider
Labels
T: feature A new feature
Milestone
v2.0.0

Comments

@AGPDev
Copy link

AGPDev commented Apr 30, 2018

Problem to solve

i need use other vue plugin to create vertical tabs in complex projects

Proposed solution

implement option to use
@nekosaur
Copy link
Member

Please provide more information about this feature request. Do you have an example of what you want to achieve? What would the proposed new markup look like?

@nekosaur nekosaur added pending review The issue is still pending disposition S: need more info labels May 17, 2018
@nekosaur nekosaur mentioned this issue May 21, 2018
Closed
@AGPDev
Copy link
Author

AGPDev commented May 23, 2018 •
edited
Loading

I make this using v-list, v-card and CSS

W4 Example working:
https://www.w3schools.com/howto/howto_js_vertical_tabs.asp

@blaconix
Copy link

I recently stumbled with a case where vertical tabs would be really beneficial. If it's not implemented soon, I was thinking about having a list change the v-model of a container.

Vertical tabs would be a great addition, though!

@ArturGrigio
Copy link

We had a similar use case, ended up using the v-stepper with :vertical=true and hiding the numbers in front of the steps.

It ended up looking like this:
screen-shot-2018-06-29-at-3 52 56-pm

in this scenario, the tabs are the steps (Employee Detail, ..., ..., History)
and the tab item is the stepper content

@jacekkarczmarczyk
Copy link
Member

jacekkarczmarczyk commented Aug 5, 2018 •
edited
Loading

I've created a component for my personal use: https://gist.github.com/jacekkarczmarczyk/eca6015c176e85ea78706e63383bbe5c

Usage:

        <vertical-tabs v-model="tab" :items="['foo', 'bar', 'baz', 'foo bar', 'foo baz', 'bar baz', 'foo bar baz', 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum']"></vertical-tabs>

        <vertical-tabs vertical-text height="300" v-model="tab" :items="['foo', 'bar', 'baz']"></vertical-tabs>

It doesn't support router nor many tabs props (like show-arrows, icons, etc), first version (with horizontal text) has fixed width 200px, but maybe some people will find it useful in their projects

tabs

@tjb1187
Copy link

tjb1187 commented Oct 17, 2018

Artur would you be kind enough to share some code for how you got your verticle tabs working? I'm trying to replicate but having a few issues? Thanks

@johnleider johnleider added missing information The issue was not created with issue creator and removed S: need more info labels Oct 25, 2018
@jacekkarczmarczyk jacekkarczmarczyk added T: feature A new feature and removed missing information The issue was not created with issue creator pending review The issue is still pending disposition labels Nov 21, 2018
@KaelWD KaelWD mentioned this issue Dec 14, 2018
Closed
@johnleider
Copy link
Member

vertical-tabs

@johnleider johnleider mentioned this issue Feb 28, 2019
Merged
8 tasks
johnleider added a commit that referenced this issue Feb 28, 2019
@johnleider
feat(VTabs): add **vertical** support
6e8ce12 
resolves #3971
@johnleider johnleider self-assigned this Feb 28, 2019
@johnleider johnleider added this to the v2.0.0 milestone Feb 28, 2019
johnleider added a commit that referenced this issue Mar 5, 2019
@johnleider
feat(VTabs): update to md2 (#6606)
f22d754 
* feat(VTabs): initial conversion

* refactor(VTab): add value functionality from existing v-tab

* refactor(VTabs): improve styling, hook up existing functionality, fix slider

* feat(VTab): add hover/focus styles

* docs(Api): remove tabs color

* refactor(VTabs): improve a11y support

* docs(VTabs): update examples

* feat(VTabs): hookup existing functionality

* test(VTabs): move/rename unit tests

* test(VTab): fix unit tests

* test(VTabs): fix unit tests

* chore: remove deprecated files

* chore: cleanup/fix tests

* test(VTab): fix lint

* chore(VTabs): rename index to ts

* chore(VTabs): remove deprecated files

* refactor(VTabs): move height from tab to tab-bar

* fix(VTabs): reset slider if no active tab

BREAKING CHANGE: fixes #5636

* test(VTabs): fix tests

* fix(VTabs): move pseudo to :before

was making other items not clickable

* fix(VItemGroup): derive item index in real time

* chore(VTabs): add comments throughout

* refactor(VTabs): improve scroll arrow functionality

utilize existing computed property, updated tests to accommodate

* feat(VSlideGroup): add rtl support

resolves #6575

* fix(VTabs): add missing scroll into view functionality

fixes #5398

* fix(VTabs): use internalValue for tabs-bar and tabs-items

* fix(VTabsItems): set mandatory prop default false

handled by VTabsBar. If the mandatory value of bar/items are different, causes crash

* fix(VTabs): remove entry animation

* fix(VTabsBar): react to route changes

determine if entered route does not match to existing tab and remove slider/active state

fixes #6505

* docs(VTabs): update examples

* test(VItemGroup): fix test

* fix(VTabs): fix **fixed-tabs** styling

* fix(VTabs): spec improvements

should blur if mouse event similar to v-btn

* docs(VTabs): update examples

* refactor(VTabs): improve initial callSlider process

* fix(VTab): fix icon color with inactive

* refactor(VTabs): quality of live adjustments

* docs(VTabs): update/add more examples

* chore(VTabs): add missing prop language

* docs(VTabs): cleanup descriptions, improve examples

* fix(VTabs): propagate active-class to correct component

* fix(VTabs): apply correct margin with hidden slider

* feat(VTabs): add **vertical** support

resolves #3971

* style(VTabs.spec): fix lint

* style(VTabs): clean-up types

* refactor: simplify ternary

* style(VTab): remove useless code

* style(VWindowItem): clean-up types

* Update packages/vuetify/src/components/VTabs/VTabsBar.ts

Co-Authored-By: johnleider <john@vuetifyjs.com>

* style(VTabsBar): add Route type import

* fix(VTabs): add additional watchers

when grow and showArrows are toggled, should call slider

* style(VTab): use keyCodes util for keydown comparison

* fix(VTabs): rtl mode with **vertical** prop

* style(VTabs): split out variables

* fix(light.scss): use correct tabs color

* fix(VTab): horizontal alignment with **fixed-tabs** in IE11

* style(VTabsBar): improve typings

* docs(VTabs): improve example

* fix(VTabs): add missing disabled styles

* docs(VTabs): fix usage example

* docs(VTabs): fix dynamic example deprecations

* refactor(VTabsBar): apply local class to content for better style scoping

* fix(VTabs): add missing slider property

* style(VTabs): add comment explanations for genItems method

* style(VTabs): improve code readability

* refactor(VSlideGroup): rename prepend -> prev, append -> next to match rest of framework

* refactor(VTabs): change prop names for v-tabs-bar

* docs: update tabs kitchen

* fix(VTab): adjust font size to match spec

* fix(VSlideGroup): adjust flex-basis for prepend/append

* style(VTab): rename base class to **v-tab**

* style(VTabsBar): rename base class to **v-tabs-bar**

* style(VTabsSlider): rename base class to **v-tabs-slider**

* fix(VTab): adjust margin when inside of `v-toolbar`

fixes #4420
@johnleider
Copy link
Member

Resolved in f22d754

@nimoos
Copy link

nimoos commented Mar 16, 2019

using still showing horizontal , i updated vuetify still having this issue

@MajesticPotatoe
Copy link
Member

This is in 2.0 alpha build.
We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.

@lock lock bot locked as resolved and limited conversation to collaborators Mar 17, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@johnleider johnleider

Labels
T: feature A new feature
Projects
None yet
Milestone
v2.0.0
Development

No branches or pull requests
9 participants
@nekosaur @AGPDev @ArturGrigio @johnleider @blaconix @jacekkarczmarczyk @MajesticPotatoe @nimoos @tjb1187