Last active
August 14, 2022 10:05
-
-
Save nexpr/7571208ca00f40f7d6dde6fc07741bf5 to your computer and use it in GitHub Desktop.
Lit+FluentUI example / https://gistcdn.githack.com/nexpr/7571208ca00f40f7d6dde6fc07741bf5/raw/1897b47675a35ca40614a5180aa8aa729290b5a1/lit+fluent_ui-example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment