UNPKG

@tidy-ui/frame

Version:

The Frame component is a dynamic placeholder that adds a stylish touch while your content loads. It features various styles like circular for profile pics, linear for paragraphs, and defaults to rectangular. Easily adjust sizes and transition from loading

219 lines (218 loc) 8.35 kB
[ { "comment": "/**\n * The IFrameProps interface offers a versatile framework for creating visually appealing frames that encapsulate your content. Whether you're aiming for sharp edges, circular elegance, or streamlined wrapping, this interface provides the tools you need to achieve your design objectives.\n *\n * @interface IFrameProps\n * @type {IFrameProps}\n * @augments {HTMLAttributes<HTMLDivElement>}\n * @public\n * @since 0.47.0\n * @interface IFrameProps\n */", "meta": { "filename": "types.ts", "lineno": 6, "columnno": 0, "path": "/home/runner/work/tidy-ui/tidy-ui/packages/frame/src", "code": {} }, "description": "<p>The IFrameProps interface offers a versatile framework for creating visually appealing frames that encapsulate your content. Whether you're aiming for sharp edges, circular elegance, or streamlined wrapping, this interface provides the tools you need to achieve your design objectives.</p>", "kind": "interface", "name": "IFrameProps", "type": { "names": [ "IFrameProps" ] }, "augments": [ "HTMLAttributes<HTMLDivElement>" ], "access": "public", "since": "0.47.0", "longname": "IFrameProps", "scope": "global" }, { "comment": "/**\n * Indicate that the content is loaded and ready to be rendered, allowing the frame to gracefully transition or disappear.\n *\n * @type {boolean}\n * @default false\n * @public\n * @since 0.47.0\n * @name IFrameProps#isLoaded\n * @optional\n * @type {boolean}\n */", "meta": { "filename": "types.ts", "lineno": 16, "columnno": 0, "path": "/home/runner/work/tidy-ui/tidy-ui/packages/frame/src", "code": {} }, "description": "<p>Indicate that the content is loaded and ready to be rendered, allowing the frame to gracefully transition or disappear.</p>", "type": { "names": [ "boolean" ] }, "defaultvalue": "false", "access": "public", "since": "0.47.0", "name": "isLoaded", "tags": [ { "originalTitle": "optional", "title": "optional", "text": "" } ], "memberof": "IFrameProps", "longname": "IFrameProps#isLoaded", "scope": "instance", "kind": "member", "optional": true }, { "comment": "/**\n * Craft frames with sharp edges, adding a touch of modern aesthetics to your design.\n *\n * @type {boolean}\n * @default false\n * @public\n * @since 0.47.0\n * @name IFrameProps#isSharp\n * @optional\n * @type {boolean}\n */", "meta": { "filename": "types.ts", "lineno": 27, "columnno": 0, "path": "/home/runner/work/tidy-ui/tidy-ui/packages/frame/src", "code": {} }, "description": "<p>Craft frames with sharp edges, adding a touch of modern aesthetics to your design.</p>", "type": { "names": [ "boolean" ] }, "defaultvalue": "false", "access": "public", "since": "0.47.0", "name": "isSharp", "tags": [ { "originalTitle": "optional", "title": "optional", "text": "" } ], "memberof": "IFrameProps", "longname": "IFrameProps#isSharp", "scope": "instance", "kind": "member", "optional": true }, { "comment": "/**\n * Opt to wrap child items neatly within the dimensions of the frame, ensuring a visually polished presentation.\n *\n * @type {boolean}\n * @default false\n * @public\n * @since 0.47.0\n * @name IFrameProps#isWrapped\n * @optional\n * @type {boolean}\n */", "meta": { "filename": "types.ts", "lineno": 38, "columnno": 0, "path": "/home/runner/work/tidy-ui/tidy-ui/packages/frame/src", "code": {} }, "description": "<p>Opt to wrap child items neatly within the dimensions of the frame, ensuring a visually polished presentation.</p>", "type": { "names": [ "boolean" ] }, "defaultvalue": "false", "access": "public", "since": "0.47.0", "name": "isWrapped", "tags": [ { "originalTitle": "optional", "title": "optional", "text": "" } ], "memberof": "IFrameProps", "longname": "IFrameProps#isWrapped", "scope": "instance", "kind": "member", "optional": true }, { "comment": "/**\n * Define the size (radius) of circular variants, enabling you to tailor the frame's appearance to your desired specifications.\n *\n * @type {string}\n * @public\n * @since 0.47.0\n * @name IFrameProps#size\n * @optional\n * @type {string}\n */", "meta": { "filename": "types.ts", "lineno": 49, "columnno": 0, "path": "/home/runner/work/tidy-ui/tidy-ui/packages/frame/src", "code": {} }, "description": "<p>Define the size (radius) of circular variants, enabling you to tailor the frame's appearance to your desired specifications.</p>", "type": { "names": [ "string" ] }, "access": "public", "since": "0.47.0", "name": "size", "tags": [ { "originalTitle": "optional", "title": "optional", "text": "" } ], "memberof": "IFrameProps", "longname": "IFrameProps#size", "scope": "instance", "kind": "member", "optional": true }, { "comment": "/**\n * Select the frame variant that suits your design vision. Choose between a circular variant ('circle') or a sleek line variant ('line').\n * If not supplied anything, it creates a rectangle box frame with given dimensions.\n *\n * @type {'circle' | 'line'}\n * @public\n * @since 0.47.0\n * @name IFrameProps#variant\n * @optional\n * @type {'circle' | 'line'}\n */", "meta": { "filename": "types.ts", "lineno": 59, "columnno": 0, "path": "/home/runner/work/tidy-ui/tidy-ui/packages/frame/src", "code": {} }, "description": "<p>Select the frame variant that suits your design vision. Choose between a circular variant ('circle') or a sleek line variant ('line').\nIf not supplied anything, it creates a rectangle box frame with given dimensions.</p>", "type": { "names": [ "'circle'", "'line'" ] }, "access": "public", "since": "0.47.0", "name": "variant", "tags": [ { "originalTitle": "optional", "title": "optional", "text": "" } ], "memberof": "IFrameProps", "longname": "IFrameProps#variant", "scope": "instance", "kind": "member", "optional": true }, { "comment": "", "meta": { "range": [ 6, 16 ], "filename": "types.ts", "lineno": 1, "columnno": 6, "path": "/home/runner/work/tidy-ui/tidy-ui/packages/frame/src", "code": { "id": "astnode100000003", "name": "_____a", "type": "Literal", "value": 1 } }, "undocumented": true, "name": "_____a", "longname": "_____a", "kind": "constant", "scope": "global", "params": [] }, { "kind": "package", "longname": "package:undefined", "files": [ "/home/runner/work/tidy-ui/tidy-ui/packages/frame/src/types.ts" ] } ]