@fluid-topics/ft-search-bar

使用 Fluid 主题 公共 API 的搜索栏组件 .

搜索栏要求 流体主题公共 API 财务报告和审定财务报表 材料图标字体 将独立导入.

折旧

本部分为去除而作折旧. 请使用 @fluid-topics/ft-search-context 换句话说.

安装

Javascript

npm install @fluid-topics/ft-search-bar
yarn add @fluid-topics/ft-search-bar

HTML 语言

放置在 HTML 正文末尾 :

<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/dist/fluidtopics.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-search-bar/build/ft-search-bar.min.js"></script>

使用量

升

import { html } from "lit"
import "@fluid-topics/public-api/dist/fluidtopics.min.js"
import "@fluid-topics/ft-search-bar"

function render() {
    return html`
        <ft-search-bar
            baseUrl="http://doc.fluidtopics.com"
            .displayedFilters=${ [ "Version_FT", "Category", "Platform", "audience" ] }
            @change=${ (e: SearchStateChangeEvent) => console.log("Search state change:", e.detail) }
        ></ft-search-bar>
    `
}

HTML 语言

<html lang="en">
<head>
    <title>My custom integration</title>
    <link href="http://doc.fluidtopics.com/api/stylesheets/fonts.css" rel="stylesheet">
    <link href="http://doc.fluidtopics.com/api/stylesheets/theme.css" rel="stylesheet">
</head>
<body>
    <ft-search-bar
            baseUrl="http://doc.fluidtopics.com"
            displayedfilters="[&quot;Version_FT&quot;,&quot;Category&quot;,&quot;Platform&quot;,&quot;audience&quot;]"
    ></ft-search-bar>

    <script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/dist/fluidtopics.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-search-bar/build/ft-search-bar.min.js"></script>
    <script>
        const searchBar = document.querySelector('ft-search-bar');
        searchBar.setAttribute("labels", JSON.stringify({
                                                            filtersButton: "Refine your search",
                                                            inputPlaceHolder: "Search our documentation"
                                                        }));
    </script>
</body>
</html>