2022/08/15 18:05

Lit を Fluent UI と使う

カテゴリ:: JavaScript

コメント数:: Comments: 0

タグ：: JavaScript; Lit; FluentUI

◆ WebComponents で作られていたら Lit で作られてなくても問題なく使える
◆ Fluent UI と使ってみたら結構良さそうだった
◆ Fluent UI は React がメインみたいで WebComponents 版はドキュメントが充実してない

Lit も色々進化したしそろそろライブラリも充実してくるかなと思ったもののやっぱり React とかに比べると全然ありません
最低限 UI ライブラリに良いのがあればもっと気軽に使えるのにと思って探していると WebComponents なので Lit で作られた UI ライブラリを使う必要はなく WebComponents やそれと統合できるものを使えば良いと書かれてました
言われてみるとそのとおりです
1 つのページで表示する以上あれこれ混ぜると重くなってしまうので基本はどれかひとつにすべきでしょうけどそれは Lit を意識してるライブラリである必要はないです

ということで WebComponents で探してみました……がこれといった UI ライブラリは見つからなかったです
WebComponents は使えるようになってもう 5 年くらいは経ってそうですけどつい最近まで生きていた IE では動かなかったということもあってあまり普及してる感がないですしね
Google 系のページ以外で使ってるところはほとんど見た覚えがないです

そんなでしたがふと Fluent UI って React 以外に WebComponents 版もあったっけと思い出しました
Microsoft 製ですしよくわからない無名どころよりは良さそうです

ということで Fluent UI を使ってみることにしました

Fluent UI

React の方はドキュメントが充実してるのですが WebComponents はメインじゃないのか充実してないです
React にはあるコントロールのページがなかったりしますしページ内の説明は最低限の使用例くらいしかありません
React だと使用方法の説明文章や props などの説明もあるのに WebComponents ではそれがないので基本的な例以外に何ができるのかわからないです

https://docs.microsoft.com/en-us/fluent-ui/web-components/components/overview

Github のソースコードではドキュメントに載っていないコントロールもありますしドキュメントページより多くの例や JSON 形式で属性や slot の情報も書かれています
Github のソースコードを見たほうが良いですね

fluent-button の場合

button.html
button.vscode.definition.json

vscode.definition.json という名前なのでもしかすると適切にセットアップすれば vscode で補完できたりするのかもしれません
今回は CDN を使って npm からインストールしてない上に Lit のテンプレート中にしかタグを書いてないので補完は一切なかったですけど

使ってみる

とりあえず Lit で Fluent UI のコンポーネントを使ってみました
fluent-data-grid でテーブルを表示してます
右上の Add ボタンを押すとダイアログが出て色々入力できます
OK を押すとテーブルに追加されます

<!doctype html>
<meta charset="utf-8" />

<script type="module">
	import { html, css, LitElement, createRef, ref } from "https://cdn.jsdelivr.net/gh/lit/dist@2.2.8/all/lit-all.min.js"
	import "https://unpkg.com/@fluentui/web-components"

	const common_styles = css`
		.btns {
			display: flex;
			justify-content: flex-end;
			gap: 12px;
		}
	`

	customElements.define(
		"page-element",
		class extends LitElement {
			static get properties() {
				return {
					data: {}
				}
			}

			static styles = [
				common_styles,
				css`
				`
			]

			constructor() {
				super()
				this.data = [
					{ text: "foo", num: 10, check: true, switch: false, slider: 10, select: "2", radio: "C" },
					{ text: "bar", num: 20, check: true, switch: true, slider: 30, select: "2", radio: "A" },
					{ text: "baz", num: 4, check: false, switch: false, slider: 70, select: "1", radio: "C" },
				]
				this.input_ref = createRef()
			}

			onAdd(event) {
				this.data = [...this.data, event.detail]
			}

			openDialog() {
				this.input_ref.value.open()
			}

			render() {
				return html`
					<div class="btns">
						<fluent-button @click=${this.openDialog}>Add</fluent-button>
					</div>
					<fluent-data-grid .rowsData=${this.data}></fluent-data-grid>
					<dialog-form ${ref(this.input_ref)} @add=${this.onAdd}></dialog-form>
				`
			}
		}
	)

	customElements.define(
		"dialog-form",
		class extends LitElement {
			static get properties() {
				return {
					dialog_open: {},
					text: {},
					num: {},
					check: {},
					switch: {},
					slider: {},
					select: {},
					radio: {},
				}
			}

			static styles = [
				common_styles,
				css`
					.form {
						display: flex;
						flex-flow: column;
						gap: 24px;
						margin: 24px;
					}
					fluent-dialog {
						--dialog-height: auto;
					}
					fluent-slider {
						margin-bottom: 12px;
					}
					fluent-radio {
						margin: 4px 0;
					}
				`
			]

			constructor() {
				super()
				this.dialog_open = false
			}

			init() {
				this.text = ""
				this.num = "0"
				this.check = false
				this.switch = false
				this.slider = "50"
				this.select = "1"
				this.radio = "A"
			}

			open() {
				this.init()
				this.dialog_open = true
			}

			close() {
				this.dialog_open = false
			}

			onOK() {
				const detail = {
					text: this.text,
					num: +this.num,
					check: this.check,
					switch: this.switch,
					slider: +this.slider,
					select: this.select,
					radio: this.radio,
				}
				this.dispatchEvent(new CustomEvent("add", { detail }))
				this.close()
			}

			onCancel() {
				this.close()
			}

			createChangeListener(name) {
				return event => {
					if (["check", "switch"].includes(name)) {
						this[name] = event.target.checked
					} else {
						this[name] = event.target.value
					}
				}
			}

			render() {
				return html`
					<fluent-dialog ?hidden=${!this.dialog_open}>
						<div class="form">
							<fluent-text-field .value=${this.text} @change=${this.createChangeListener("text")}>Text:</fluent-text-field>
							<fluent-number-field .value=${this.num} @change=${this.createChangeListener("num")}>Number:</fluent-number-field>
							<fluent-checkbox .checked=${this.check} @change=${this.createChangeListener("check")}>Check</fluent-checkbox>
							<fluent-switch .checked=${this.switch} @change=${this.createChangeListener("switch")}>
								<span slot="checked-message">On</span>
								<span slot="unchecked-message">Off</span>
								<label for="cap-switch">Switch:</label>
							</fluent-switch>
							<fluent-slider min="0" max="100" step="5" title="Slider:" .value=${this.slider} @change=${this.createChangeListener("slider")}>
								<fluent-slider-label position="0">0</fluent-slider-label>
								<fluent-slider-label position="100">100</fluent-slider-label>
							</fluent-slider>
							<fluent-select title="Select:" .value=${this.select} @change=${this.createChangeListener("select")}>
								<fluent-option value="1">one</fluent-option>
								<fluent-option value="2">two</fluent-option>
								<fluent-option value="3">three</fluent-option>
							</fluent-select>
							<fluent-radio-group orientation="vertical" .value=${this.radio} @change=${this.createChangeListener("radio")}>
								<fluent-radio value="A">A</fluent-radio>
								<fluent-radio value="B">B</fluent-radio>
								<fluent-radio value="C">C</fluent-radio>
							</fluent-radio-group>
							<div class="btns">
								<fluent-button appearance="accent" @click=${this.onOK}>OK</fluent-button>
								<fluent-button @click=${this.onCancel}>Cancel</fluent-button>
							</div>
						</div>
					</fluent-dialog>
				`
			}
		}
	)
</script>

<page-element></page-element>

結構良さそうでした

Fluent UI

使ってみる

「JavaScript」カテゴリの最新記事

COMMENT