Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/viewweiwu/vue3-tabs-chrome
chrome tab like.
https://github.com/viewweiwu/vue3-tabs-chrome
Last synced: 2 months ago
JSON representation
chrome tab like.
- Host: GitHub
- URL: https://github.com/viewweiwu/vue3-tabs-chrome
- Owner: viewweiwu
- Created: 2021-03-30T02:43:02.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T13:43:44.000Z (8 months ago)
- Last Synced: 2024-03-24T12:01:38.560Z (3 months ago)
- Language: Vue
- Homepage:
- Size: 919 KB
- Stars: 93
- Watchers: 2
- Forks: 26
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Lists
- awesome-vue - vue3-tabs-chrome - A Vue3 component for Chrome-like tabs. (Components & Libraries / UI Components)
- awesome-vue - vue3-tabs-chrome - A Vue3 component for Chrome-like tabs. (Components & Libraries / UI Components)
- awesome-vue - vue3-tabs-chrome - A Vue3 component for Chrome-like tabs. (Components & Libraries / UI Components)
- awesome-vue - vue3-tabs-chrome - chrome tab like. ` 📝 3 months ago` (UI Components [🔝](#readme))
README
# vue3-tabs-chrome
A Vue3 component for Chrome-like tabs.
Drag-and-drop support provided by Draggabilly by @desandro.
Currently there is only a simple api, waiting for the completion.
If you are using Vue2, please see here.
https://github.com/viewweiwu/vue-tabs-chrome
## Live Demo
[https://viewweiwu.github.io/vue3-tabs-chrome/](https://viewweiwu.github.io/vue3-tabs-chrome/)
## Code Sandbox
https://codesandbox.io/s/crazy-mcclintock-p514v?file=/src/App.vue
## Install
```bash
npm i vue3-tabs-chrome -S
# or
yarn add vue3-tabs-chrome -S
```
## Usage
```html
import Vue3TabsChrome from 'vue3-tabs-chrome'
import 'vue3-tabs-chrome/dist/vue3-tabs-chrome.css'
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
components: {
Vue3TabsChrome
},
setup() {
const tab = ref('google')
const tabs = reactive([
{
label: 'google',
key: 'google',
favico: require('./assets/google.jpg')
},
{
label: 'facebook',
key: 'facebook',
favico: require('./assets/fb.jpg')
},
{
label: 'New Tab',
key: 'costom key'
}
])
return {
tabs,
tab
}
}
})
```
## Attributes
| Attributes | Description | Type | Default |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- | ------- |
| tabs | tabs configuration. Details are mentioned below. | Array | [] |
| modelValue / v-model | binding value | String | - |
| insert-to-after | Insert to tag's after | Boolean | false |
| is-mousedown-active | set tab is active when mousedown | Boolean | true |
| render-label | render label | Function(tab, index) | - |
| auto-hidden-close-icon-width | auto hidden close tab width. if tabWidth < 120, close icon can not show. If you don’t want this feature, you can set the value to 0. | Number | 120 |
| on-close | when tab close btn click. if return false, it cannot be closed. | Function(tab, key, index) | - |
## Tabs Attributes
| Attributes | Description | Type | Default |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ------- |
| label | tab label | String | - |
| key | tab key | String | - |
| class | tab class | String | - |
| closable | tab closable | Boolean | true |
| dragable | tab dragable | Boolean | true |
| swappable | tab swappable | Boolean | true |
| favico | tab favico. Custom favico renderer. It uses Vue's render function. It accepts two arguments: the first is h, the second is an object. including tab and index | Function(tab, index), image src | - |
## Methods
| Method | Description | Parameters |
| --------- | ----------- | --------------------------- |
| addTab | add tab | (tab1, [, ...tab, ...tabN]) |
| removeTab | remove tab | (tabKey or index) |
## Events
| Event Name | Description | Parameters |
| ----------- | ------------------------------------------------------------------------------------------------------ | ------------------- |
| click | Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. | (event, tab, index) |
| swap | Swap tab | (tab, targetTab) |
| remove | Remove tab | (tab, index) |
| contextmenu | Contextmenu event | (event, tab, index) |
| dragstart | Tab dragstart event | (event, tab, index) |
| dragging | Tab dragstart event | (event, tab, index) |
| dragend | Tab dragend event | (event, tab) |
## Slots
| Attributes | Description |
| ---------- | -------------- |
| after | Tab after slot |
## Changelog
### 0.3.3
`2023-10-16`
fix: dragable = false No click event is triggered. [#19](https://github.com/viewweiwu/vue3-tabs-chrome/issues/19)
### 0.3.2
`2022-04-12`
fix: remove debugger trigger. [#8](https://github.com/viewweiwu/vue3-tabs-chrome/issues/8)
### 0.3.1
`2022-04-06`
fix: is-mousedown-active bug. [#7](https://github.com/viewweiwu/vue3-tabs-chrome/issues/7)
### 0.3.0
feat: add TypeScript support. [#PR5](https://github.com/viewweiwu/vue3-tabs-chrome/pull/5)
## License
MIT