Taskbar

A taskbar in the style of Windows 11. The start button and one button for each open window of the `pix-application` elements on the page sit in the centre, and the language, the time and the date sit on the right. A short line under a button shows that the window is open, and it grows under the window in use. Each application with open windows has one button. With a single window, pressing the button brings the window back in front when it is minimized or behind another one, and minimizes it when it is the window in use. With several windows, as in Windows, the button looks like a stack, and hovering or pressing it shows a small preview of each window above the bar, to choose which one to show or to close. The button disappears when the last window is closed. The start button opens a start menu like the one of Windows 11: a search box, a grid with every application of the page, and a footer with the user and a power button that shows its name. Choosing an application opens a new window of it. The search box next to the start button finds the applications of the page by name. Choosing one, with a click or with Enter, opens a new window of it. The language button shows the first three letters of the name of the language, as Windows does, and opens a menu with the languages to choose from.

Import

Importing the library registers <pix-taskbar>.

import '@halleyfante/pix';

Basic

<pix-application label="Terminal">
  <pix-icon slot="icon" select="terminal"></pix-icon>
  <template>
    <pix-terminal></pix-terminal>
  </template>
</pix-application>

<pix-application label="Notes">
  <template>
    <p>Open several windows and switch between them on the taskbar.</p>
  </template>
</pix-application>

<pix-taskbar locale="en-GB" languages="en-GB pt-BR es">
  <span slot="user">Guest</span>
</pix-taskbar>

<p>Last event: <output>none</output></p>

pix-application {
    display: block;
  }

pix-taskbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000000;
  }
</style>

for (const name of ['start', 'power']) {
    taskbar.addEventListener(name, () => {
      output.textContent = name;
    });
  }

taskbar.addEventListener('language', (event) => {
    output.textContent = 'language ' + event.detail.locale;
    taskbar.locale = event.detail.locale;
  });
</script>

Attributes

Name	Type	Default	Description
`locale`	string	''	Language tag used for the language label, the time and the date, such as `en` or `pt-BR`. Defaults to the language of the page.
`search-label`	string	'Search'	Text shown inside the empty search boxes. Defaults to `Search`.
`power-label`	string	'Power'	Text of the power button, shown next to its icon. Defaults to `Power`.
`languages`	string	''	Language tags offered in the language menu, separated by spaces, such as `en pt-BR es`. Defaults to the current language only.

Events

Name	Description
`language`	A language was chosen in the menu. `event.detail.locale` holds its language tag.
`name`
`start`	The start menu was opened.
`power`	The power button of the start menu was pressed.

Slots

Name	Description
`user`	The person using the desktop, shown at the bottom of the start menu, such as an avatar and a name.