Hierarchical-checkboxes: 显示不正确

huangapple
go评论67阅读模式
英文:

hierarchical-checkboxes: not showing correctly

问题

我正在使用以下链接创建一个分层树状视图。

https://www.htmlelements.com/demos/tree/hierarchical-checkboxes/

它应该显示如下：
Hierarchical-checkboxes: 显示不正确

但是，当我使用它时，它显示如下（缺少复选标记、箭头等）：

Hierarchical-checkboxes: 显示不正确

我的代码如下（ui.html）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="static/smart.default.css" type="text/css" />
    <script type="text/javascript" src="static/smart.tree.js"></script>
</head>
<body class="viewport">

    <smart-tree id="tree" has-three-states selection-mode="checkBox">
        <smart-tree-item>IPV4</smart-tree-item>
        <smart-tree-items-group>
            IPSEC
            <smart-tree-item>IMIX</smart-tree-item>
            <smart-tree-item>1400</smart-tree-item>
        </smart-tree-items-group>

        <!-- 其他代码省略 -->
        
    </smart-tree>

</body>
</html>

我的代码结构如下：

Hierarchical-checkboxes: 显示不正确

我已经将两个文件复制到static目录下：

  1. smart.default.css
  2. smart.tree.js

我是新手，任何帮助以获得相同的UI都将受到鼓励。

英文:

I am using the below link to create a hierarchical treeview.

https://www.htmlelements.com/demos/tree/hierarchical-checkboxes/

It should be displayed like the below:
Hierarchical-checkboxes: 显示不正确

However, when I am using it, it displays like this (checkmarks, arrow etc missing):

Hierarchical-checkboxes: 显示不正确

My code is below(ui.html):

&lt;!DOCTYPE html&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;static/smart.default.css&quot; type=&quot;text/css&quot; /&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;static/smart.tree.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body class=&quot;viewport&quot;&gt;

    &lt;smart-tree id=&quot;tree&quot;  has-three-states selection-mode=&quot;checkBox&quot;&gt;
        &lt;smart-tree-item&gt;IPV4&lt;/smart-tree-item&gt;
        &lt;smart-tree-items-group&gt;
            IPSEC
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-items-group&gt;
            IPSEC_QOS
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-items-group&gt;
            IPSEC_QOS_DPI_FNF
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-items-group&gt;
            IPSEC_QOS_DPI_FNF_TNAT
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-items-group&gt;
            IPSEC_QOS_DPI_FNF_SNAT_ZBFW
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;


        &lt;smart-tree-item&gt;MCAST&lt;/smart-tree-item&gt;
        &lt;smart-tree-items-group&gt;
            IPSEC_MCAST
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-items-group&gt;
            IPSEC_QOS_DPI_FNF_MCAST
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-item&gt;IPV6&lt;/smart-tree-item&gt;
        &lt;smart-tree-items-group&gt;
            IPSECV6
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;

        &lt;smart-tree-items-group&gt;
            IPSECV6_QOSV6_DPI_FNF
            &lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
            &lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
        &lt;/smart-tree-items-group&gt;
    &lt;/smart-tree&gt;

&lt;/body&gt;
&lt;/html&gt;

My code structure is:

Hierarchical-checkboxes: 显示不正确

I have copied the 2 files under static:

  1. smart.default.css
  2. smart.tree.js

I am new to this and any help to get the same UI would be encouraging.

答案1

得分: 0

你可能忘记添加所需的样式。以下是已翻译的部分：

    <link href="https://www.htmlelements.com/demos/styles/demos.css" rel="stylesheet"/>
    <link href="https://www.htmlelements.com/demos/styles/codepen.css" rel="stylesheet"/>
    <link href="https://www.htmlelements.com/demos/source/styles/smart.default.css" rel="stylesheet"/>
    <script src="https://www.htmlelements.com/demos/source/smart.elements.js"></script>
    <script src="https://www.htmlelements.com/demos/scripts/data.js"></script>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="static/smart.default.css" type="text/css" />
        <script type="text/javascript" src="static/smart.tree.js"></script>
    </head>
    <body class="viewport">

        <smart-tree id="tree" has-three-states selection-mode="checkBox">
            <smart-tree-item>IPV4</smart-tree-item>
            <smart-tree-items-group>
                IPSEC
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-items-group>
                IPSEC_QOS
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-items-group>
                IPSEC_QOS_DPI_FNF
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-items-group>
                IPSEC_QOS_DPI_FNF_TNAT
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-items-group>
                IPSEC_QOS_DPI_FNF_SNAT_ZBFW
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>


            <smart-tree-item>MCAST</smart-tree-item>
            <smart-tree-items-group>
                IPSEC_MCAST
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-items-group>
                IPSEC_QOS_DPI_FNF_MCAST
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-item>IPV6</smart-tree-item>
            <smart-tree-items-group>
                IPSECV6
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>

            <smart-tree-items-group>
                IPSECV6_QOSV6_DPI_FNF
                <smart-tree-item>IMIX</smart-tree-item>
                <smart-tree-item>1400</smart-tree-item>
            </smart-tree-items-group>
        </smart-tree>

    </body>
    </html>

如果还需要其他翻译，请提供具体内容。

英文:

You might have missed adding the required styles.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;link href=&quot;https://www.htmlelements.com/demos/styles/demos.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;link href=&quot;https://www.htmlelements.com/demos/styles/codepen.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;link href=&quot;https://www.htmlelements.com/demos/source/styles/smart.default.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;script src=&quot;https://www.htmlelements.com/demos/source/smart.elements.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://www.htmlelements.com/demos/scripts/data.js&quot;&gt;&lt;/script&gt;
&lt;!DOCTYPE html&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/smart.default.css&quot; type=&quot;text/css&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;static/smart.tree.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body class=&quot;viewport&quot;&gt;
&lt;smart-tree id=&quot;tree&quot;  has-three-states selection-mode=&quot;checkBox&quot;&gt;
&lt;smart-tree-item&gt;IPV4&lt;/smart-tree-item&gt;
&lt;smart-tree-items-group&gt;
IPSEC
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-items-group&gt;
IPSEC_QOS
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-items-group&gt;
IPSEC_QOS_DPI_FNF
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-items-group&gt;
IPSEC_QOS_DPI_FNF_TNAT
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-items-group&gt;
IPSEC_QOS_DPI_FNF_SNAT_ZBFW
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-item&gt;MCAST&lt;/smart-tree-item&gt;
&lt;smart-tree-items-group&gt;
IPSEC_MCAST
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-items-group&gt;
IPSEC_QOS_DPI_FNF_MCAST
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-item&gt;IPV6&lt;/smart-tree-item&gt;
&lt;smart-tree-items-group&gt;
IPSECV6
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;smart-tree-items-group&gt;
IPSECV6_QOSV6_DPI_FNF
&lt;smart-tree-item&gt;IMIX&lt;/smart-tree-item&gt;
&lt;smart-tree-item&gt;1400&lt;/smart-tree-item&gt;
&lt;/smart-tree-items-group&gt;
&lt;/smart-tree&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月17日 17:26:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76270543.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定