vscode-elements / elements

Web component library for developing Visual Studio Code extensions
https://vscode-elements.github.io
MIT License
156 stars 27 forks source link

Arrow isn't visible #131

Closed qarlosalberto closed 9 months ago

qarlosalberto commented 9 months ago

I'm having problems to see the icons:

import "@vscode-elements/elements/dist/vscode-tree";

const tree = <any>document.getElementById("scope-tree");

const icons = {
    branch: 'folder',
    leaf: 'file',
    open: 'folder-opened',
  };
  const data = [
    {
      icons,
      label: 'node_modules',
      value: 'black hole',
      subItems: [
        {
          icons,
          label: '.bin',
          subItems: [
            { icons, label: '_mocha_' },
            { icons, label: '_mocha.cmd_' },
            { icons, label: '_mocha.ps1_' },
            { icons, label: 'acorn' },
            { icons, label: 'acorn.cmd' },
            { icons, label: 'acorn.ps1' },
          ],
        },
        {
          icons,
          label: '@11ty',
          open: true,
          subItems: [
            { icons, label: 'lorem.js' },
            { icons, label: 'ipsum.js' },
            { icons, label: 'dolor.js' },
          ],
        },
        { icons, label: '.DS_Store' },
      ],
    },
    {
      icons,
      label: 'scripts',
      subItems: [
        { icons, label: 'build.js' },
        { icons, label: 'start.js' },
      ],
    },
    { icons, label: '.editorconfig', selected: true },
    { icons, label: '2021-01-18T22_10_20_535Z-debug.log' },
  ];

tree.data = data;

tree.addEventListener('vsc-select', (event) => {
    console.log(event.detail);
});

In the HTML

            <vscode-tree id="scope-tree" arrows></vscode-tree>

imagen

bendera commented 9 months ago

The codicon css isn't included on the page. https://vscode-elements.github.io/components/icon/#basic-example My mistake, I'll update the docs.

qarlosalberto commented 9 months ago

Thanks! it woks fine :)