diff --git a/index.html b/index.html index b26159d51..951090dea 100644 --- a/index.html +++ b/index.html @@ -52,6 +52,7 @@

Components:

Toggle TreeList VirtualList + Image

Managers:

Drag & Drop diff --git a/ui/image.mod/image.js b/ui/image.mod/image.js index e11258e6b..f2f7b93a8 100644 --- a/ui/image.mod/image.js +++ b/ui/image.mod/image.js @@ -1,48 +1,64 @@ /** - @module "mod/ui/native/image.mod" - @requires mod/ui/component - @requires mod/ui/native-control -*/ -var Component = require("ui/component").Component; + * @module "mod/ui/native/image.mod" + * @requires mod/ui/component + * @requires mod/ui/native-control + */ +const Component = require("ui/component").Component; +const Montage = require("core/core").Montage; /** * Wraps the a <img> element with binding support for its standard attributes. - @class module:"mod/ui/native/image.mod".Image - @extends module:mod/ui/control.Control + * @class module:"mod/ui/native/image.mod".Image + * @extends module:mod/ui/control.Control */ -exports.Image = Component.specialize({ - hasTemplate: {value: true } -}); +const Image = class Image extends Component { + static { + Montage.defineProperties(this.prototype, { + hasTemplate: { value: true }, + }); + } +}; -exports.Image.addAttributes(/** @lends module:"mod/ui/native/image.mod".Image */{ +/** @lends module:"mod/ui/native/image.mod".Image */ +Image.addAttributes({ + /** + * A text description to display in place of the image. + * @type {string} + * @default null + */ + alt: null, -/** - A text description to display in place of the image. - @type {string} - @default null -*/ - alt: null, + /** + * The height of the image in CSS pixels. + * @type {number} + * @default null + */ + height: null, -/** - The height of the image in CSS pixels. - @type {number} - @default null -*/ - height: null, - -/** - The URL where the image is located. - @type {string} - @default null -*/ - src: null, - -/** - The width of the image in CSS pixels. - @type {number} - @default null -*/ - width: null + /** + * The URL where the image is located. + * @type {string} + * @default null + */ + src: null, + /** + * The width of the image in CSS pixels. + * @type {number} + * @default null + */ + width: null, + /** + * The loading strategy for the image. + * @type {string} + * @default "eager" + * @values ["eager", "lazy"] + */ + loading: { + dataType: "string", + value: "eager", + }, }); + +exports.Image = Image; diff --git a/ui/image.mod/teach/assets/banana.svg b/ui/image.mod/teach/assets/banana.svg new file mode 100644 index 000000000..8b4bd2c8f --- /dev/null +++ b/ui/image.mod/teach/assets/banana.svg @@ -0,0 +1 @@ + diff --git a/ui/image.mod/teach/index.html b/ui/image.mod/teach/index.html new file mode 100644 index 000000000..ad0d6c62b --- /dev/null +++ b/ui/image.mod/teach/index.html @@ -0,0 +1,20 @@ + + + + + + Teach SegmentControl Mod + + + + + + + + diff --git a/ui/image.mod/teach/package.json b/ui/image.mod/teach/package.json new file mode 100644 index 000000000..98815d77d --- /dev/null +++ b/ui/image.mod/teach/package.json @@ -0,0 +1,10 @@ +{ + "name": "teach-segmented-bar-mod", + "private": true, + "dependencies": { + "mod": "*" + }, + "mappings": { + "mod": "../../../" + } +} diff --git a/ui/image.mod/teach/ui/main.mod/main.css b/ui/image.mod/teach/ui/main.mod/main.css new file mode 100644 index 000000000..b382bbae7 --- /dev/null +++ b/ui/image.mod/teach/ui/main.mod/main.css @@ -0,0 +1,51 @@ +body { + font-family: -apple-system, Roboto, sans-serif; + background-color: #fafafa; + max-width: 800px; + margin: 0 auto; + padding: 20px; + + .card { + margin: 40px 0; + padding: 16px; + background: white; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + gap: 24px; + + h2 { + margin: 0; + color: #333; + } + + label { + min-width: 128px; + font-weight: 500; + } + } + + .row { + display: flex; + align-items: center; + gap: 24px; + } + + .column { + display: flex; + flex-direction: column; + gap: 24px; + align-items: flex-start; + + &.stretch { + align-items: stretch; + } + } + + .grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + } +} diff --git a/ui/image.mod/teach/ui/main.mod/main.html b/ui/image.mod/teach/ui/main.mod/main.html new file mode 100644 index 000000000..b1bd25d11 --- /dev/null +++ b/ui/image.mod/teach/ui/main.mod/main.html @@ -0,0 +1,38 @@ + + + + + Teach Image Mod + + + + +
+

Image

+ + +
+

Basic Usage

+
+ +
+
+
+
+ + diff --git a/ui/image.mod/teach/ui/main.mod/main.js b/ui/image.mod/teach/ui/main.mod/main.js new file mode 100644 index 000000000..15dfb7465 --- /dev/null +++ b/ui/image.mod/teach/ui/main.mod/main.js @@ -0,0 +1,5 @@ +const { Component } = require("mod/ui/component"); + +exports.Main = class Main extends Component { + +};