Extra Tabs
Last modified by Pierre Jeanjean on 2024/11/25 13:01
Table of Content
Description
Display tabs at the bottom of the pages in view mode.
Defining a new tab
Add @xwiki/cristal-extra-tabs-api to your project dependencies.
Define a class extending ExtraTab. And AbstractExtraTab also exist, with a constructor taking translation keys, and providing a vue-i18n t function, helping with translations.
import { injectable } from "inversify";
import { ExtraTab } from "@xwiki/cristal-extra-tabs-api";
import DemoTab from "./DemoTab.vue";
import { Component } from "vue";
@injectable()
class DemoExtraTab implements ExtraTab {
order = 1000;
title = "Demo"
id = "demo";
async panel(): Promise<Component> {
return DemoTab;
}
}
export { DemoExtraTab };
import { ExtraTab } from "@xwiki/cristal-extra-tabs-api";
import DemoTab from "./DemoTab.vue";
import { Component } from "vue";
@injectable()
class DemoExtraTab implements ExtraTab {
order = 1000;
title = "Demo"
id = "demo";
async panel(): Promise<Component> {
return DemoTab;
}
}
export { DemoExtraTab };
- order: tabs are sorted by ascending order
- title: the label of the tab
- id: the technical unique id of the tab
- panel(): returns the Vue component used to display the page content. Can be resolved asynchronously.
Existing Extra Tabs
- Information: displays information about the current page. Order = 1000
- Attachments: displays the list of attachments of the current page and a form to upload new attachments. Order = 2000
- History: displays the list of revisions of the current page. Will not be rendered for backends that do not support versioning. Order = 3000
This project is being financed by the French State as part of the France 2030 program
Ce projet est financé par l’État Français dans le cadre de France 2030
