A Flarum extension. Adds a bottom tab on mobile.
Install with composer:
composer require acpl/mobile-tabcomposer update acpl/mobile-tab
php flarum migrate
php flarum cache:clearImportant
These instructions are for Flarum 2.0. For Flarum 1.x documentation, please refer to: Flarum 1.x Guide
You can add, modify, and delete items in the mobile tab using your own extension. Read: https://docs.flarum.org/2.x/extend/extending-extensions
- Install
acpl/mobile-tabas your extension's composer dependency or add it as an optional dependency in yourcomposer.json. - In the
tsconfig.jsonfile add"ext:acpl/mobile-tab/*": ["../vendor/acpl/mobile-tab/js/dist-typings/*"]to thecompilerOptions.pathsobject. - You can now import and use the registry classes to modify the mobile tab.
Create extendMobile.ts in your extension's js/common directory:
import MobileTabItemsRegistry from "ext:acpl/mobile-tab/common/MobileTabItemsRegistry";
import app from "flarum/common/app";
import { extend } from "flarum/common/extend";
export default () => {
extend(MobileTabItemsRegistry.prototype, "items", (items) => {
// Add a simple link item
items.add("following", {
icon: "fas fa-star",
label: app.translator.trans("my-ext.forum.index.following_label"),
href: () => app.route("following"),
canView: () => !!app.session.user,
source: "extension",
});
// Add an item that we plan to turn into an interactive component on the forum frontend
items.add("my-interactive-item", {
icon: "fas fa-rocket",
label: app.translator.trans("my-ext.forum.my_interactive_item_label"),
source: "extension",
});
});
};Use this file in both admin and forum. Example for the admin side:
import app from "flarum/admin/app";
import extendMobileTab from "../common/extendMobileTab";
app.initializers.add("my-ext/mobile-tab-example", () => {
extendMobileTab();
// ... other initializers
});To make an item interactive on the forum, assign a component using the forumComponent property.
Note
Interactive components should be registered in MobileTabItemsRegistryForum because they import from flarum/forum/*.
Registering them in the common registry would break the admin panel.
import MobileTabItemsRegistryForum from "ext:acpl/mobile-tab/forum/data/MobileTabItemsRegistryForum";
import { extend } from "flarum/common/extend";
import app from "flarum/forum/app";
import extendMobileTab from "../common/extendMobileTab";
import MyCustomTabItem from "./components/MyCustomTabItem";
app.initializers.add("my-ext/mobile-tab-example", () => {
extendMobileTab();
extend(MobileTabItemsRegistryForum.prototype, "items", (items) => {
// Get the item defined in common and enhance it for the forum
const myItem = items.get("my-interactive-item");
items.setContent("my-interactive-item", {
...myItem, // Keep icon, label, and other shared properties
forumComponent: MyCustomTabItem, // Add the forum-only interactive component
});
});
// ... other initializers
});import MobileTabComponent from "ext:acpl/mobile-tab/common/components/MobileTabComponent";
import Button from "flarum/common/components/Button";
export default class MyCustomTabItem extends MobileTabComponent {
view() {
const { icon, label } = this.attrs.definition;
return (
<Button
className="Button MyCustomTabComponent"
icon={icon}
onclick={() => console.log("clicked")}
>
{label}
</Button>
);
}
}