Component

Represents the entire hirarchy of HTML elements Each and every html element can be expressed as a single Component or A hirarchy of components.

Remarks

This class hirarchy is then compiled into normal HTML code. This Component can be inherited to create newer more complex components.

Example

Creating A component


var myComponent = new Component("div",{"id":"my-component"});

Author

Sujal Choudhari sjlchoudhari@gmail.com

Hierarchy

=======
  • Defined in basic/string.ts:3
  • >>>>>>> origin/dev =======
  • Defined in basic/string.ts:3
  • >>>>>>> dev =======
  • Defined in components/string.ts:3
  • >>>>>>> dev =======
  • Defined in components/string.ts:3
  • >>>>>>> dev =======
  • Defined in components/string.ts:3
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/string.ts:3
  • >>>>>>> dev

    Properties

    tag: string

    The html tag it is supposed to represent.

    =======
  • Defined in basic/component.ts:28
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:28
  • >>>>>>> dev
    pmAttributes: {
        [key: string]: string;
    }
    =======
  • Defined in components/component.ts:30
  • =======
  • Defined in components/component.ts:30
  • >>>>>>> dev =======
  • Defined in components/component.ts:30
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:30
  • >>>>>>> dev
    attribute: {
        [key: string]: string;
    }
    >>>>>>> dev

    HTMl attributes in the form of key value pairs.

    Type declaration

    • [key: string]: string
    =======
  • Defined in basic/component.ts:33
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:33
  • >>>>>>> dev
    pmChildren: Component[]
    =======
  • Defined in components/component.ts:35
  • =======
  • Defined in components/component.ts:35
  • >>>>>>> dev
    children: Component[]
    >>>>>>> dev =======
  • Defined in components/component.ts:35
  • =======
  • Defined in components/component.ts:35
  • >>>>>>> dev
    children: Component[]
    >>>>>>> dev:docs/classes/index.String.html

    An array of Component which would be rendered as child elements of the current element

    =======
  • Defined in basic/component.ts:39
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:39
  • >>>>>>> dev
    pmCss: string = ""
    =======
  • Defined in basic/component.ts:42
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:42
  • >>>>>>> dev =======
  • Defined in components/component.ts:41
  • =======
  • Defined in components/component.ts:41
  • >>>>>>> dev =======
  • Defined in components/component.ts:41
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:41
  • >>>>>>> dev
    props: any
    >>>>>>> dev =======
  • Defined in components/component.ts:43
  • >>>>>>> dev =======
  • Defined in components/component.ts:43
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:43
  • >>>>>>> dev
    content: string

    The Content to be rendered as a string

    =======
  • Defined in basic/string.ts:7
  • >>>>>>> origin/dev =======
  • Defined in basic/string.ts:7
  • >>>>>>> dev =======
  • Defined in components/string.ts:7
  • >>>>>>> dev =======
  • Defined in components/string.ts:7
  • >>>>>>> dev =======
  • Defined in components/string.ts:7
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/string.ts:7
  • >>>>>>> dev

    Methods

    • Get the tag name

      Returns

      the tag of the component

      Example

      var tag = myComponent.getTag(); // a div component
      console.log(tag); // div

      Returns string

    =======
  • Defined in basic/component.ts:71
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:71
  • >>>>>>> dev =======
  • Defined in components/component.ts:76
  • >>>>>>> dev =======
  • Defined in components/component.ts:76
  • >>>>>>> dev =======
  • Defined in components/component.ts:76
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:76
  • >>>>>>> dev
    • Get the attributes of the component

      Returns

      Object containing all the attributes of the component

      Example

      var myComponent = new Component("div",{"id":"my-component"});

      var attributes = myComponent.getAttributes(); // a div component
      console.log(attributes); // {"id":"my-component"};

      Returns {
          [key: string]: string;
      }

      • [key: string]: string
    =======
  • Defined in basic/component.ts:88
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:88
  • >>>>>>> dev =======
  • Defined in components/component.ts:93
  • >>>>>>> dev =======
  • Defined in components/component.ts:93
  • >>>>>>> dev =======
  • Defined in components/component.ts:93
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:93
  • >>>>>>> dev
    • Get the children of the component

      Returns

      List of all the Childrens of the component

      Returns Component[]

    =======
  • Defined in basic/component.ts:96
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:96
  • >>>>>>> dev
    =======
  • Defined in components/component.ts:101
  • =======
  • Defined in components/component.ts:101
  • >>>>>>> dev =======
  • Defined in components/component.ts:101
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:101
  • >>>>>>> dev
    >>>>>>> dev
    • Get the parent of the component

      Returns

      Parent of the component

      Returns null | Component

    =======
  • Defined in basic/component.ts:112
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:112
  • >>>>>>> dev
    =======
  • Defined in basic/component.ts:120
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:120
  • >>>>>>> dev
    • Remove the child from the parent. Note if the child is not refrenced anywhere but only by the parent, then remove it will delete it.

      Parameters

      • child: Component

        The children component to remove as a child

      Returns void

    =======
  • Defined in basic/component.ts:129
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:129
  • >>>>>>> dev =======
  • Defined in components/component.ts:105
  • >>>>>>> dev =======
  • Defined in components/component.ts:105
  • >>>>>>> dev =======
  • Defined in components/component.ts:105
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:109
  • >>>>>>> dev
    • Sets or Creates a new attribute on the component

      Example


      var myComponent = new Component("p");
      myComponent.setAttribute("class", "my-component para lg:mx-5 sm:mx-1");
      myComponent.setAttribute("id","my-unique-id");

      Parameters

      • name: string

        nmae of the attribute to set

      • value: string

        the value of the attribute to set

      Returns void

    =======
  • Defined in basic/component.ts:150
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:150
  • >>>>>>> dev =======
  • Defined in components/component.ts:122
  • >>>>>>> dev =======
  • Defined in components/component.ts:122
  • >>>>>>> dev =======
  • Defined in components/component.ts:122
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:126
  • >>>>>>> dev
    • Get the value of the attribute at the specified name

      Returns

      the value of the attribute

      Parameters

      • name: string

        the value of the attribute to get

      Returns undefined | string

    =======
  • Defined in basic/component.ts:159
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:159
  • >>>>>>> dev =======
  • Defined in components/component.ts:131
  • >>>>>>> dev =======
  • Defined in components/component.ts:131
  • >>>>>>> dev =======
  • Defined in components/component.ts:131
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:135
  • >>>>>>> dev
    • Remove the attribute at the specified name

      Parameters

      • name: string

        Attribute to remove from the component

      Returns void

    =======
  • Defined in basic/component.ts:167
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:167
  • >>>>>>> dev
    =======
  • Defined in components/component.ts:139
  • =======
  • Defined in components/component.ts:139
  • >>>>>>> dev =======
  • Defined in components/component.ts:139
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:143
  • >>>>>>> dev
    >>>>>>> dev
    • Add a new child to the component

      Example

       var component1 = new Component("div"); // parent component
      var component2 = new Component("p"); // child component
      component1.addChild(component2);

      Deprecated

      Use addChildren instead

      Parameters

      • child: Component

        Add a child to the component. Child can be of any level of inheritance of component.

      Returns void

    • Add multiple children to the component

      Example

       var component1 = new Component("div"); // parent component
      var component2 = new Component("p"); // child component
      component1.addChildren(component2);

      Parameters

      • Rest ...childrenToAdd: Component[]

        A destructured list of components to add as children

      Returns void

    =======
  • Defined in basic/component.ts:183
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:183
  • >>>>>>> dev =======
  • Defined in components/component.ts:179
  • =======
  • Defined in components/component.ts:179
  • >>>>>>> dev =======
  • Defined in components/component.ts:179
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:183
  • >>>>>>> dev
    • Remove the child from the parent. Note if the child is not refrenced anywhere but only by the parent, then remove it will delete it.

      Parameters

      • child: Component

        The children component to remove as a child

      Returns void

    >>>>>>> dev =======
  • Defined in components/component.ts:196
  • >>>>>>> dev =======
  • Defined in components/component.ts:196
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:200
  • >>>>>>> dev
    • Add multiple classes to the list of classes

      Example

       var myComponent = new Component("div");
      myComponent.addClasses("mx-5"); // class = "mx-5"
      myComponent.addClasses("my-1"); // class = "my-1" "mx-5"

      Parameters

      • Rest ...classNames: string[]

        the destructured string array of class names to add to the component

      Returns void

    =======
  • Defined in basic/component.ts:200
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:200
  • >>>>>>> dev
    • Set styles for the Component

      Parameters

      • properties: {
            [key: string]: string;
        }

        style properties to set

        • [key: string]: string

      Returns void

    =======
  • Defined in basic/component.ts:217
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:217
  • >>>>>>> dev
    • Delete the specified css properties

      Parameters

      • Rest ...properties: string[]

        Destructured list of properties to delete

      Returns void

    =======
  • Defined in basic/component.ts:229
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:229
  • >>>>>>> dev
    • Fills the component in the specified direction.

      Parameters

      • direction: "both" | "vertical" | "horizontal"

        The direction to fill. Can be "vertical", "horizontal", or "both".

      Returns void

    =======
  • Defined in basic/component.ts:268
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:268
  • >>>>>>> dev
    • Aligns the component vertically and horizontally.

      Parameters

      • vertical: "top" | "bottom" | "middle"

        The vertical alignment. Can be "top", "bottom", or "middle".

      • horizontal: "center" | "left" | "right"

        The horizontal alignment. Can be "left", "right", or "center".

      Returns void

    =======
  • Defined in basic/component.ts:289
  • >>>>>>> origin/dev =======
  • Defined in basic/component.ts:289
  • >>>>>>> dev =======
  • Defined in components/component.ts:214
  • >>>>>>> dev =======
  • Defined in components/component.ts:214
  • >>>>>>> dev =======
  • Defined in components/component.ts:214
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/component.ts:218
  • >>>>>>> dev
    • Get the string version of the entire component

      Returns

      converted string representation

      Returns string

    =======
  • Defined in basic/string.ts:14
  • >>>>>>> origin/dev =======
  • Defined in basic/string.ts:14
  • >>>>>>> dev =======
  • Defined in components/string.ts:14
  • >>>>>>> dev =======
  • Defined in components/string.ts:14
  • >>>>>>> dev =======
  • Defined in components/string.ts:14
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/string.ts:14
  • >>>>>>> dev

    Constructors

    • Parameters

      • content: string = ""

      Returns String

    =======
  • Defined in basic/string.ts:9
  • >>>>>>> origin/dev =======
  • Defined in basic/string.ts:9
  • >>>>>>> dev =======
  • Defined in components/string.ts:9
  • >>>>>>> dev =======
  • Defined in components/string.ts:9
  • >>>>>>> dev =======
  • Defined in components/string.ts:9
  • >>>>>>> dev:docs/classes/index.String.html =======
  • Defined in components/string.ts:9
  • >>>>>>> dev