npm 包 @npm-polymer/paper-dialog-scrollable 使用教程

在前端开发中，经常需要使用对话框来显示一些内容，而会在对话框中显示过多的内容时，对话框就会出现滚动条。本文将介绍如何使用 @npm-polymer/paper-dialog-scrollable 包来实现一个可滚动的对话框。

安装

在使用 @npm-polymer/paper-dialog-scrollable 之前，先确保已经安装 Node.js 和 npm。在终端中执行以下命令：

--- ------- ------ ------------------------------------

使用方法

首先，在 HTML 文件中引入所需的 CSS 和 JS 文件：

----- ---------------- -----------------------------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------------------------

然后，在 HTML 文件中定义一个包含文本的对话框：

--------- --------------------
    -------
        ------------ -
            ------ ------
            ------- ------
            -------- -----
        -
    --------
    --------------
        ---------------
        -------------------------
            -------------
            --------------
            --------------
            -----------------------
            -------------------
        --------------------------
        ---- ----------------
            ------------- --------------------------------
        ------
    ---------------
-----------

注意：paper-dialog-scrollable 要放在 paper-dialog 的内部。

接下来，在 JavaScript 文件中调用上面定义的模板：

------ - --------------- ---- - ---- -------------------

----- --------- ------- -------------- -
  ------ --- ---------- -
    ------ -----
      ------- -------------------------------------
      ------- ------ ---------- ----
        ----------
          -----------------------------------------------
          ------------- ----------- --------------
            --------- --------------- --------- ------------- ----
              --------- ----------- ------ ------------- ----
                --------- ------------- --------------------
                  -- ------------- --
                -----------
                --------
                  ---------
                    --- ------------------ - -- ----- ---
                    ---------- --------------
                    ----------- -
                      ------- -
                        ----- -------
                        ------- -----
                        ------ ---------- -
                          ------ -------------------------------- ---------------
                        -
                      -
                    --
                  ---
                ---------
                ---- ----------------
                  ------------- --------------------------------
                  ------------- --------------- -------------------------------------
                ------
              -----------
            -----------
          ---------------
        -----------
      ---------
    --
  -

  ------ --- ------------ -
    ------ -
      ----------- -
        ----- --------
        ------ ------
        --------- --------------------
      --
      -------- -
        ----- ------
        ------ --
      --
    --
  -

  ------------------- -
    --------------------------
    ----------------------------------------------------- -------------------
  -

  ---------------------- -
    -----------------------------
    -------------------------------------------------------- -------------------
  -

  --------------------------- -
    -- -------- --- ----- -
      ---------------------
    - ---- -
      ----------------------
    -
  -

  ------------- -
    ---------------------- ------
  -

  ------------- -
    ------ ------------------------- ------ -- -
      -- -------------- -- ------------------------------------- -
        ----- ------- - ---------------------
          -------------- -- ------------------ -- ------------------ --- ----
        ------ -
          ------ ------
          --------- ---------------------------------------- ---------
        --
      - ---- -
        ------ -
          ------ ------
          --------- -----
        --
      -
    ---
  -

  ---------------------------- -------- -
    ----- ----- - ------------ -- ---
    ----- ------- - -------------- -- ---
    ----- ------------ - ------------------- -- ------------------ -- -----
    ----- ------------- - ------------------- -- ------------------- -- -----

    ----- -------- - -
      --------- ------
      ---------------- -----
      ----------------- ----------
      ------------ ------
    ------------
    ----- --------------- - -
      ------------------ -------------------- --------------------
      ------- ----------------------- ----------------------
      ------------- -----
      ----------- ------
    ------------

    ----- -------- - -
      ------------- ------------------
        -----------------
          -------------------------
            -----------------
          --------------------------
          ---- --------------------
            ------------- ----------------------------- - ----------------- - ------------------
            ------------- --------------- -------------------------- -------------- ------------------------- - ------------------ - ------------------
          ------
      ---------------
    --
    ------ ---------
  -
-

使用 _getDialogs() 方法返回在页面上展示的对话框模板组成的数组，数组的每个项包含模板和模板对应的 index，模板会在定义的模板中插入其中。

示例代码

完整的 HTML 文件示例代码：

--------- -----
----- ----------
------
    ----- ----------------
    --------- ------------------------------------ ---------
    ----- ---------------- -----------------------------------------------------------------------------------------------------------
-------
------
    ------ ------------------------------------ ------
    ------- -------------------------------------

    --------- --------------------
        -------
            ------------ -
                ------ ------
                ------- ------
                -------- -----
            -
        --------
        --------------
            ---------------
            -------------------------
                -------------
                --------------
                --------------
                -----------------------
                -------------------
            --------------------------
            ---- ----------------
                ------------- --------------------------------
            ------
        ---------------
    -----------

    ------- ------------------------------------------------------------------------------------------------------------------
    --------
        -------- ------------ -
            --- -------- - ------------------------------------------
            --- ------ - -----------------------------------------------
            --------------
        -
    ---------
-------
-------

完整的 JavaScript 文件示例代码：

------ - --------------- ---- - ---- -------------------

----- --------- ------- -------------- -
  ------ --- ---------- -
    ------ -----
      ------- -------------------------------------
      ------- ------ ---------- ----
        ----------
          -----------------------------------------------
          ------------- ----------- --------------
            --------- --------------- --------- ------------- ----
              --------- ----------- ------ ------------- ----
                --------- ------------- --------------------
                  -- ------------- --
                -----------
                --------
                  ---------
                    --- ------------------ - -- ----- ---
                    ---------- --------------
                    ----------- -
                      ------- -
                        ----- -------
                        ------- -----
                        ------ ---------- -
                          ------ -------------------------------- ---------------
                        -
                      -
                    --
                  ---
                ---------
                ---- ----------------
                  ------------- --------------------------------
                  ------------- --------------- -------------------------------------
                ------
              -----------
            -----------
          ---------------
        -----------
      ---------
    --
  -

  ------ --- ------------ -
    ------ -
      ----------- -
        ----- --------
        ------ ------
        --------- --------------------
      --
      -------- -
        ----- ------
        ------ --
      --
    --
  -

  ------------------- -
    --------------------------
    ----------------------------------------------------- -------------------
  -

  ---------------------- -
    -----------------------------
    -------------------------------------------------------- -------------------
  -

  --------------------------- -
    -- -------- --- ----- -
      ---------------------
    - ---- -
      ----------------------
    -
  -

  ------------- -
    ---------------------- ------
  -

  ------------- -
    ------ ------------------------- ------ -- -
      -- -------------- -- ------------------------------------- -
        ----- ------- - ---------------------
          -------------- -- ------------------ -- ------------------ --- ----
        ------ -
          ------ ------
          --------- ---------------------------------------- ---------
        --
      - ---- -
        ------ -
          ------ ------
          --------- -----
        --
      -
    ---
  -

  ---------------------------- -------- -
    ----- ----- - ------------ -- ---
    ----- ------- - -------------- -- ---
    ----- ------------ - ------------------- -- ------------------ -- -----
    ----- ------------- - ------------------- -- ------------------- -- -----

    ----- -------- - -
      --------- ------
      ---------------- -----
      ----------------- ----------
      ------------ ------
    ------------
    ----- --------------- - -
      ------------------ -------------------- --------------------
      ------- ----------------------- ----------------------
      ------------- -----
      ----------- ------
    ------------

    ----- -------- - -
      ------------- ------------------
        -----------------
          -------------------------
            -----------------
          --------------------------
          ---- --------------------
            ------------- ----------------------------- - ----------------- - ------------------
            ------------- --------------- -------------------------- -------------- ------------------------- - ------------------ - ------------------
          ------
      ---------------
    --
    ------ ---------
  -
-

----------------------------------- -----------

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ff281e8991b448ddb73

阅读全文

猜你喜欢

  • npm 包 esdoc-vue-plugin 使用教程

    什么是 esdoc-vue-plugin esdoc-vue-plugin 是一个专门为 Vue.js 组件文档生成器开发的插件，可以和 esdoc 配合使用，生成具有可读性、易维护性的 Vue.js...

    3 年前
  • npm 包 @d3-node/choropleth-us-counties 使用教程

    @d3-node/choropleth-us-counties 是一个基于 d3 和 node.js 的 npm 包。它提供了一种简单的方式来使用 d3 生成美国县地图的色域图。

    3 年前
  • npm 包 keylisten 使用教程

    在前端开发中，监听键盘事件是很常见的需求。npm 包 keylisten 可以帮助我们更方便地监听键盘事件。本文将介绍 keylisten 的使用方法，并且给出了详细的示例代码。

    3 年前
  • npm 包 garavattexplatzom 使用教程

    前言 在前端开发中，npm 是一个非常重要的工具，可以帮助我们管理项目的依赖关系、构建和发布。使用 npm 包可以让我们在开发过程中更加高效地完成一些工作。 本文介绍的 npm 包 garavatte...

    3 年前
  • npm 包 grunt-dojo2-extras 使用教程

    简介 npm 是当前前端项目中常见的包管理工具，可以帮助开发者管理项目中所需要的各种依赖。而 grunt-dojo2-extras 是一个基于 Grunt 和 Dojo2 的 npm 包，可以帮助我们...

    3 年前
  • npm 包 uncensore 的使用教程

    在前端开发中，我们经常使用第三方库来实现某些功能。其中，npm 是一个非常流行的第三方包管理器。在本篇文章中，我们将介绍一个 npm 包 uncensore 的使用教程。

    3 年前
  • npm 包 @d3-node/choropleth-us-states 使用教程

    如果你正在进行前端开发，你可能会经常需要绘制地图来展示数据。而 @d3-node/choropleth-us-states 则是一个非常优秀的 npm 包，它可以帮助你在 React 中绘制美国各州的...

    3 年前
  • npm 包 auto-timesheet 使用教程

    自动化工具在前端开发中越来越流行，从而提高了工作效率。而其中一个有用的工具就是 auto-timesheet，它可以让您更方便地追踪您的工作时间和项目进度。在本文中，我们将详细讲解如何使用 auto-...

    3 年前
  • npm包generator-buildreact使用教程

    简介 generator-buildreact是一个npm包，它可以帮助前端开发者快速搭建React项目和配置Webpack。在使用这个工具之前，你需要安装nodejs和npm，并且了解React和W...

    3 年前
  • npm 包 winston-daily-logger 使用教程

    winston-daily-logger 是一个基于 winston 的 npm 包，它可以根据日期生成日志文件，支持自定义日志级别、输出格式、文件名等。它是前端开发中日志记录的有效工具，可以帮助我们...

    3 年前
  • npm 包 iplayer 使用教程

    前言 iplayer 是一款基于 React 的播放器组件，具备丰富的 API 和良好的扩展性。本文将介绍 iplayer 的基本使用方法，涉及的知识点有 React、CSS 等。

    3 年前
  • npm 包 express-api-explorer 使用教程

    介绍 在开发前端应用时，我们通常需要与后端进行数据交互，而 API 接口则是数据交换的关键。express-api-explorer 是一个用于自动生成 API 文档的 npm 包，可以轻松地实现 A...

    3 年前
  • npm 包 react-avatar-cropper-customizable 使用教程

    简介 react-avatar-cropper-customizable 是一个基于 React 的图片裁剪组件，支持自定义裁剪框大小和比例，拥有丰富的配置选项，使用简单。

    3 年前
  • npm 包 circus-log 使用教程

    在前端开发中，我们常常需要输出 log 信息来帮助我们调试，而 npm 包 circus-log 就是一个可以帮助我们输出 log 信息的工具库。它支持颜色输出、多种级别的日志信息、自定义输出位置等特...

    3 年前
  • 安利一个好用的 npm 包 mobx-combiner

    介绍 mobx-combiner 是一个可以更方便地将不同 store 合并起来的 npm 包，妈妈再也不用担心我把 store 处理得一塌糊涂了。 安装 使用 npm 安装： --- -------...

    3 年前
  • npm 包 sequelize-sluggify 使用教程

    什么是 sequelize-sluggify sequelize-sluggify 是通过 Node.js 中的 Sequelize 操作数据库，生成独特 URL 的 npm 包。

    3 年前
  • NPM 包 data-config-promise 使用教程

    在前端开发中，操作数据是极其常见的任务。像对于某些数据的请求、获取和缓存等操作，往往会花费开发者大量的时间。而 npm 包 data-config-promise 的出现则为开发者提供了一种解决方案。

    3 年前
  • npm 包 repetitive.ajax 使用教程

    在前端开发中，ajax 是一种很常见的技术，因为它可以帮助我们实现页面的异步请求和更新数据等功能。但是，写 ajax 代码并不是一件简单的事情，因为涉及到很多细节和错误处理。

    3 年前
  • npm 包 simditor-date-button 使用教程

    在前端开发中，我们常常需要使用富文本编辑器来实现一些特定的效果。而 simditor 是一款非常好用的富文本编辑器，支持插件扩展，其中 simditor-date-button 就是一款非常实用的插件...

    3 年前
  • npm 包 linkhighlighter 使用教程

    在前端开发过程中，我们可能需要对某些特定的 URL 进行高亮显示，使其能够更加容易地被用户识别出来。npm 包 linkhighlighter 为我们提供了一种快速、简便的方法来实现这一功能。

    3 年前

相关推荐

    暂无文章