README

A Flarum 扩展。在移动端添加底部标签。

安装

使用 composer 安装

composer require acpl/mobile-tab

更新

composer update acpl/mobile-tab
php flarum cache:clear

扩展

您可以使用自己的扩展添加、修改和删除移动标签中的项目。阅读：https://docs.flarum.org/extend/extending-extensions/

将 acpl/mobile-tab 作为扩展的 composer 依赖项安装，或在您的 composer.json 中添加它作为可选依赖项。
将 acpl-mobile-tab 添加到您的扩展的 webpack.config.js 中，以确保正确的捆绑

const config = require("flarum-webpack-config");

module.exports = config({
  useExtensions: ["acpl-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");
  });
};

如果您正在使用 TypeScript，将以下路径添加到您的 tsconfig.json 中，以在代码编辑器中启用移动标签组件的类型提示

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

acpl / mobile-tab

维护者

详细信息

README

安装

更新

扩展

链接