egoist / vue-slim-tabs Goto Github PK

View Code? Open in Web Editor NEW

103.0 4.0 18.0 1.23 MB

A slim tab component for Vue.js (1.3 kB minified)

Home Page: https://vue-slim-tabs.egoist.sh/

License: MIT License

Vue 53.12% JavaScript 31.03% CSS 10.56% TypeScript 5.29%

tabs component vue

vue-slim-tabs's Introduction

tabs

Install

yarn add vue-slim-tabs

CDN: UNPKG | jsDelivr

Usage

<template>
  <tabs>
    <tab title="Vue">
      This is Vue
    </tab>
    <tab title="React">
      This is React
    </tab>
    <tab title="Svelte">
      This is Svelte
    </tab>
  </tabs>
</template>

<script>
import { Tabs, Tab } from 'vue-slim-tabs'

export default {
  components: {
    Tabs, Tab
  }
}
</script>

<!-- optionally use our default style -->
<style src="vue-slim-tabs/themes/default.css"></style>

You can use it as a plugin if you don't mind registering components globally:

import * as Tabs from 'vue-slim-tabs'

Vue.use(Tabs)

Use a slot as tab title

<template>
  <tabs>
    <tab title-slot="vue">
      This is Vue
    </tab>

    <template slot="vue">
      <strong>Vue</strong>
    </template>
  </tabs>
</template>

Props

`<Tabs>`

defaultIndex

Type: Number
Default: 0

Index of selected tab on the first render.

onSelect

Type: function
Default: undefined

The function to invoke as user selects a tab by clicking:

function onSelect(e, index) {
  // e: click event
  // index: index of selected tab
}

`<Tab>`

title

Type: string vNode
Required: required unless titleSlot is set

Use a string or vNode as tab title.

titleSlot

Type: string

Use a slot as the tab title.

disabled

Type: Boolean
Default: undefined

Disable relevant tab, i.e. make it unselectable.

Development

Run the example with Poi:

cd vue-slim-tabs
yarn
yarn dev

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

Author

vue-slim-tabs © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoist.moe · GitHub @egoist · Twitter @_egoistlily

vue-slim-tabs's People

Contributors

Stargazers

Watchers

Forkers

enjoygeek cristijora moocss savokiss trendingtechnology t-cst kdrdgn sererejegede insidegen dominuskelvin codebender828 userbig tawawhite junjak hiteshmah-jan polosson tchoupinax alaypanov

vue-slim-tabs's Issues

Icons as tab labels / titles

How can I use icons as tab labels / titles like native android & ios?

Provide types for TypeScript

*.ts

import * as Tabs from 'vue-slim-tabs';

Could not find a declaration file for module 'vue-slim-tabs'. '.../node_modules/vue-slim-tabs/dist/vue-slim-tabs.common.js' implicitly has an 'any' type. Try npm install @types/vue-slim-tabs if it exists or add a new declaration (.d.ts) file containing declare module 'vue-slim-tabs';ts(7016)

IssueHunt Summary

Backers (Total: $100.00)

issuehunt ($100.00)

Submitted pull Requests

#27 Add TS typings

Become a backer now!

Or submit a pull request to get the deposits!

Tips

Checkout the Issuehunt explorer to discover more funded issues.
Need some help from other developers? Add your repositories on IssueHunt to raise funds.

IssueHunt has been backed by the following sponsors. Become a sponsor

Emit event on tab change

Rather than (or in addition to) using an onSelect prop: this.$emit('select', index).

Additionally, onSelect fires every time a tab is selected, even if it's already the active tab. This may not be intended behavior, so:

    switchTab(e, index, isDisabled) {
      // Only fire event/function if not currently selected
      if (!isDisabled && this.selectedIndex !== index) {
        this.selectedIndex = index;
        // Left in place for backwards compatibility
        this.onSelect && this.onSelect(e, index);
        // Not sure if the event variable is actually needed here
        this.$emit('select', index);
      }
    }

Dead demo site

https://vue-slim-tabs.egoist.sh/

tab scroll

how could we scroll through tabs?
via mouse

Tabs hang occasionally

Thanks for the simplicity of tabs component.

I am experiencing the tabs to hang occasionally. After the freeze, one cannot change to another tab anymore and it seems that only part of the tabpage was loaded.

Any thoughts on what may cause the problem? I reproduced the freeze both in Chrome and in Firefox.

I am using an unordered list within a tab, everything item is, therefore, a list item.

Any thoughts greatly appreceated.

cache component in tab content

Every time I switch back to the tab, component in it will be re-mounted. How can I make it cached there? No need to re-mount every time I switch back to it. Thank you!