blob: 0c4030512c13523eee35c141d9ea034fb7393bab [file] [log] [blame]
Adrià Vilanova Martínezf19ea432024-01-23 20:20:52 +01001// Copyright 2020 The Chromium Authors
Copybara854996b2021-09-07 19:36:02 +00002// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {LitElement, html, css} from 'lit-element';
6import 'shared/typedef.js';
7
8/**
9 * `<mr-tabs>`
10 *
11 * A Material Design tabs strip. https://material.io/components/tabs/
12 *
13 */
14export class MrTabs extends LitElement {
15 /** @override */
16 static get styles() {
17 return css`
18 ul {
19 display: flex;
20 list-style: none;
21 margin: 0;
22 padding: 0;
23 }
24 li {
25 color: var(--chops-choice-color);
26 }
27 li.selected {
28 color: var(--chops-active-choice-color);
29 }
30 li:hover {
31 background: var(--chops-primary-accent-bg);
32 color: var(--chops-active-choice-color);
33 }
34 a {
35 color: inherit;
36 text-decoration: none;
37
38 display: inline-block;
39 line-height: 38px;
40 padding: 0 24px;
41 }
42 li.selected a {
43 border-bottom: solid 2px;
44 }
45 i.material-icons {
46 vertical-align: middle;
47 margin-right: 4px;
48 }
49 `;
50 }
51
52 /** @override */
53 render() {
54 return html`
55 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
56 <ul>
57 ${this.items.map(this._renderTab.bind(this))}
58 </ul>
59 `;
60 }
61
62 /**
63 * Renders one tab.
64 * @param {MenuItem} item
65 * @param {number} index
66 * @return {TemplateResult}
67 */
68 _renderTab(item, index) {
69 return html`
70 <li class=${index === this.selected ? 'selected' : ''}>
71 <a href=${item.url}>
72 <i class="material-icons" ?hidden=${!item.icon}>
73 ${item.icon}
74 </i>
75 ${item.text}
76 </a>
77 </li>
78 `;
79 }
80
81 /** @override */
82 static get properties() {
83 return {
84 items: {type: Array},
85 selected: {type: Number},
86 };
87 }
88
89 /** @override */
90 constructor() {
91 super();
92
93 /** @type {Array<MenuItem>} */
94 this.items = [];
95 this.selected = 0;
96 }
97}
98
99customElements.define('mr-tabs', MrTabs);