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 name of the language, written in that language, and opens a menu with the languages to choose from.

The sound button opens a small panel with a button that silences the sounds and a control for their volume. The taskbar plays nothing by itself: the page listens to the volume event, or reads the volume and muted properties, to set the volume of its own sounds. A browser does not let a page change the volume of the whole tab.

Import

Importing the library registers <pix-taskbar>.

import '@ilusiva/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.
`volume`	number	100	Volume of the sounds of the page, from 0 to 100. Defaults to 100.
`muted`	boolean	false	Silences the sounds of the page. The volume control shows zero while muted, and the volume comes back when the sound is turned back on.
`volume-label`	string	'Volume'	Name of the sound button and of the volume control. Defaults to `Volume`.
`mute-label`	string	'Mute'	Name of the button that silences the sounds. Defaults to `Mute`.

Events

Name	Description
`volume`	The volume or the mute changed through the sound button. `event.detail` holds `volume` and `muted`.
`start`	The start menu was opened.
`power`	The power button of the start menu was pressed.
`language`	A language was chosen in the menu. `event.detail.locale` holds its language tag.

Slots

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