jaggy / flarum-mobile-tab Goto Github PK

View Code? Open in Web Editor NEW

Flarum extension. Adds a bottom tab on mobile

License: MIT License

JavaScript 0.69% PHP 5.77% TypeScript 62.34% Less 31.19%

flarum-mobile-tab's Introduction

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 with your own extension. Read: https://docs.flarum.org/extend/extending-extensions/

Examples:

import { components } from "@acpl-mobile-tab";
import { extend } from "flarum/common/extend";

const { MobileTab, MobileTabItem } = components;

export default () => {
  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 a path to your tsconfig.json to enable type hints in your code editor:

{
  "extends": "flarum-tsconfig",
  // ...
  "compilerOptions": {
    // ....
    "paths": {
      // ...
      "@acpl-mobile-tab": [
        "./vendor/acpl/mobile-tab/js/dist-typings/index.d.ts"
      ]
    }
  }
}