This component is a Vue 3 (Vuetify 3 based) closeable tab designed for use `v-tabs` component.
npm install @mamenko/closeable-tabThis component is a Vue 3 (Vuetify 3 based) closeable tab designed for use v-tabs component.
You can install the component via npm:
``bash`
npm install --save @mamenko/closeable-tab
`html
>
:value="item.id"
:is-modified="item.modified"
@closeRequest="closeRequest"
>
{{ item.name != "" ? item.name : "New tab" }}
`
* buttonIcons (Object): Properties for close and modified states of the tab's button.`
javascript`
{
close: {
class: "text-grey",
icon: "$close",
},
modified: {
class: "text-primary",
icon: "mdi-circle",
},
size: "x-small",
// Sets the height and width of the tab's button.
// Refer v-btn component page: https://vuetifyjs.com/en/components/buttons/#props-size
}
* (Boolean): Sets modified state for the tab.value
* (string): Value for the tab.
* closeRequest (tabValue: String): Triggered when the tab's button clicked.
CSS variables define some visual aspects of the closeable tab component. These properties can be customized or overridden to achieve the desired visual appearance of the tab close button.
`css`
.x-button {
--spacer-size: 20px;
--spacer-margin-top: 3px;
--button-size: 18px;
--button-margin-top: -3px;
--button-padding-top: 2px;
}
The component is in action on the site.
This component requires vue version 3.4.31 and above; vuetify` version 3.7.2 and above.
This project is licensed under the MIT License.