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

Important

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

1. Install acpl/mobile-tab as your extension's composer dependency or add it as an optional dependency in your composer.json.

2. You can now import and use mobile tab components in your extension. Here are some examples of how to modify the mobile tab:

import { extend } from "flarum/common/extend";
import LinkButton from 'flarum/common/components/LinkButton';

import MobileTab from "ext:acpl/mobile-tab/forum/components/MobileTab";

export default () => {
  // Extend the items method of MobileTab prototype
  extend(MobileTab.prototype, "items", (items) => {
    // Add new item
    items.add(
      "following",
      <LinkButton
        href={app.route("following")}
        icon="fas fa-star"
      >
        {app.translator.trans("my-ext.forum.my-item")}
      </LinkButton>,
      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": {
      "ext:acpl/mobile-tab/forum": [
        "./vendor/acpl/mobile-tab/js/dist-typings/index.d.ts"
      ]
    }
  }
}

Links

• Packagist
• GitHub
• Discuss