acpl / mobile-tab
Fund package maintenance!
android-com-pl/mobile-tab?sponsor=1
Installs: 13 030
Dependents: 2
Suggesters: 0
Security: 0
Stars: 6
Watchers: 4
Forks: 5
Open Issues: 0
Language:TypeScript
Type:flarum-extension
Requires
- flarum/core: ^1.8
README
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 yourcomposer.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" ] } } }