Mobile Tab Component
A Flarum extension. Adds a bottom tab on mobile.
Installation
Install with composer:
composer require acpl/mobile-tab
Updating
composer update acpl/mobile-tab
php flarum cache:clear
Extending
You can add, modify, and delete items in the mobile tab using your own extension.
Read: https://docs.flarum.org/extend/extending-extensions/
- Install
acpl/mobile-tab
as your extension's composer dependency or add it as an optional dependency in your composer.json
.
- Add
acpl-mobile-tab
to your extension's webpack.config.js to ensure proper bundling:
const config = require("flarum-webpack-config");
module.exports = config({
useExtensions: ["acpl-mobile-tab"],
});
- You can now import and use mobile tab components in your extension. Here are some examples of how to modify the mobile tab:
import { components } from "@acpl-mobile-tab";
import { extend } from "flarum/common/extend";
const { MobileTab, MobileTabItem } = components;
export default () => {
// Extend the items method of MobileTab prototype
extend(MobileTab.prototype, "items", (items) => {
// Add new item
items.add(
"following",
<MobileTabItem
href={app.route("following")}
icon="fas fa-star"
label={app.translator.trans("my-ext.forum.my-item")}
/>,
90,
);
// Add new item using custom HTML
items.add("my-item", <div>...This is my custom item</div>, 70);
// Remove item
items.remove("home");
});
};
If you are using TypeScript, add the following path to your tsconfig.json to enable type hints for the mobile tab components in your code editor:
{
"extends": "flarum-tsconfig",
"compilerOptions": {
"paths": {
"@acpl-mobile-tab": [
"./vendor/acpl/mobile-tab/js/dist-typings/index.d.ts"
]
}
}
}
Links