Class Style

Style

A representation of Style tag.

Author

Ansh Sharma

TODO:

Instead of using classes from public/style/index.css every component will have its own exportCss function.
These generated classes will be dumped into the build/[name]/style/ folder.
Style folder will be created for each page or for each style component.
And included into head of page that contains that style component.

Hierarchy

Component
- Style

=======

Defined in basic/styles.ts:10

>>>>>>> origin/dev =======

Defined in basic/styles.ts:10

>>>>>>> dev =======

Defined in components/styles.ts:17

>>>>>>> dev =======

Defined in components/styles.ts:17

>>>>>>> dev =======

Defined in components/styles.ts:18

>>>>>>> dev:docs/classes/index.Style.html =======

Defined in components/styles.ts:18

>>>>>>> dev

Properties

tag

tag: string

The html tag it is supposed to represent.

=======

Defined in basic/styles.ts:14

>>>>>>> origin/dev =======

Defined in basic/styles.ts:14

>>>>>>> dev =======

Defined in components/component.ts:30

=======

Defined in components/component.ts:30

>>>>>>> dev =======

Defined in components/component.ts:30

>>>>>>> dev:docs/classes/index.Style.html =======

Defined in components/component.ts:30

>>>>>>> dev

attribute

attribute: {
[key: string]: string;
}

HTMl attributes in the form of key value pairs.

Type declaration

[key: string]: string

children

children: Component[]

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

props

props: any

cssClasses

cssClasses: {
    [key: string]: {
        [key: string]: string;
    };
}

The CSS classes and their properties.

Type declaration

[key: string]: {
[key: string]: string;
}
- [key: string]: string

>>>>>>> dev =======

Defined in components/styles.ts:21

>>>>>>> dev =======

Defined in components/styles.ts:22

>>>>>>> dev:docs/classes/index.Style.html =======

Defined in components/styles.ts:22

>>>>>>> dev

url

url: string = ""

URL to an external source file.

=======

Defined in basic/styles.ts:19

>>>>>>> origin/dev =======

Defined in basic/styles.ts:19

>>>>>>> dev =======

Defined in components/styles.ts:26

>>>>>>> dev =======

Defined in components/styles.ts:26

>>>>>>> dev =======

Defined in components/styles.ts:27

>>>>>>> dev:docs/classes/index.Style.html =======

Defined in components/styles.ts:27

>>>>>>> dev

type

type: string = ""

Type of the CSS attachment. Either inline or external. Note: inline attachments are supported under Attributes, and Style functions under Component.

=======

Defined in basic/styles.ts:25

>>>>>>> origin/dev =======

Defined in basic/styles.ts:25

>>>>>>> dev =======

Defined in components/styles.ts:32

=======

Defined in components/styles.ts:32

>>>>>>> dev =======

Defined in components/styles.ts:33

>>>>>>> dev:docs/classes/index.Style.html =======

Defined in components/styles.ts:33

>>>>>>> dev

Methods

getTag

getTag(): string
Get the tag name

Returns
the tag of the component

Example
```
var tag = myComponent.getTag(); // a div component
console.log(tag); // div
```
Returns string
Inherited from Component.getTag
- Defined in components/component.ts:76

getAttributes

getAttributes(): {
[key: string]: string;
}
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
Inherited from Component.getAttributes
- Defined in components/component.ts:93

getChildren

getChildren(): Component[]
Get the children of the component

Returns
List of all the Childrens of the component

Returns Component[]
Inherited from Component.getChildren
- Defined in components/component.ts:101

getParent

getParent(): null | Component
Get the parent of the component

Returns
Parent of the component

Returns null | Component
Inherited from Component.getParent
- Defined in components/component.ts:109

setAttribute

setAttribute(name: string, value: string): void
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
Inherited from Component.setAttribute
- Defined in components/component.ts:126

getAttribute

getAttribute(name: string): undefined | string
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
Inherited from Component.getAttribute
- Defined in components/component.ts:135

removeAttribute

removeAttribute(name: string): void
Remove the attribute at the specified name
Parameters
- name: string
  
  Attribute to remove from the component
Returns void
Inherited from Component.removeAttribute
- Defined in components/component.ts:143

addChild

addChild(child: Component): void
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
Inherited from Component.addChild
- Defined in components/component.ts:160

addChildren

addChildren(...childrenToAdd: Component[]): 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
Inherited from Component.addChildren
- Defined in components/component.ts:183

removeChild

removeChild(child: Component): void
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
Inherited from Component.removeChild
- Defined in components/component.ts:200

addClasses

addClasses(...classNames: string[]): void
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
Inherited from Component.addClasses
- Defined in components/component.ts:218

addClass

addClass(className: string, properties: {
[key: string]: string;
}): void
Adds a new CSS class with the specified properties.
Parameters
- className: string
  
  The name of the CSS class to add.
- properties: {
  [key: string]: string;
  }
  
  The properties to associate with the new CSS class.
  - [key: string]: string
Returns void
- Defined in components/styles.ts:58

updateClass

updateClass(className: string, properties: {
[key: string]: string;
}): void
Updates the properties of an existing CSS class.
Parameters
- className: string
  
  The name of the CSS class to update.
- properties: {
  [key: string]: string;
  }
  
  The updated properties to associate with the CSS class.
  - [key: string]: string
Returns void
- Defined in components/styles.ts:70

removeClass

removeClass(className: string): void
Removes an existing CSS class.
Parameters
- className: string
  
  The name of the CSS class to remove.
Returns void
- Defined in components/styles.ts:85

addClassProperty

addClassProperty(className: string, properties: {
[key: string]: string;
}): void
Adds the given properties to the specified class. If the class does not exist, it will be created.
Parameters
- className: string
  
  The name of the class to add properties to.
- properties: {
  [key: string]: string;
  }
  
  An object containing the properties to add, where the key is the property name and the value is the property value.
  - [key: string]: string
Returns void
- Defined in components/styles.ts:98

removeClassProperty

removeClassProperty(className: string, properties: {
[key: string]: string;
}): void
Removes the given properties from the specified class. If the class no longer has any properties, it will be removed.
Parameters
- className: string
  
  The name of the class to remove properties from.
- properties: {
  [key: string]: string;
  }
  
  An object containing the properties to remove, where the key is the property name and the value is the property value.
  - [key: string]: string
Returns void
- Defined in components/styles.ts:115

updateClassProperty

updateClassProperty(className: string, properties: {
[key: string]: string;
}): void
Updates the given properties of the specified class. If the class does not exist, it will be created.
Parameters
- className: string
  
  The name of the class to update properties of.
- properties: {
  [key: string]: string;
  }
  
  An object containing the properties to update, where the key is the property name and the value is the property value.
  - [key: string]: string
Returns void
- Defined in components/styles.ts:136

getClassProperties

getClassProperties(className: string): undefined | {
[key: string]: string;
}
Gets the properties of an existing CSS class.

Returns
The properties of the specified CSS class, or undefined if the CSS class does not exist.
Parameters
- className: string
  
  The name of the CSS class to get the properties of.
Returns undefined | {
[key: string]: string;
}
- Defined in components/styles.ts:153

toString

toString(): string
Exports the CSS classes and their properties as a string. Returns a

Class Style

Style

Author

Hierarchy

Index

Properties

Methods

Constructors

Properties

tag

attribute

Type declaration

[key: string]: string

children

props

cssClasses

Type declaration

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

[key: string]: string

url

type

Methods

getTag

Returns

Example

Returns string

getAttributes

Returns

Example

Returns { [key: string]: string; }

[key: string]: string

getChildren

Returns

Returns Component[]

getParent

Returns

Returns null | Component

setAttribute

Example

Parameters

name: string

value: string

Returns void

getAttribute

Returns

Parameters

name: string

Returns undefined | string

removeAttribute

Parameters

name: string

Returns void

addChild

Example

Deprecated

Parameters

child: Component

Returns void

addChildren

Example

Parameters

Rest ...childrenToAdd: Component[]

Returns void

removeChild

Parameters

child: Component

Returns void

addClasses

Example

Parameters

Rest ...classNames: string[]

Returns void

addClass

Parameters

className: string

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

[key: string]: string

Returns void

updateClass

Parameters

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

Returns {
[key: string]: string;
}

`Rest` ...childrenToAdd: Component[]

`Rest` ...classNames: string[]

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

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

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

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

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

Returns undefined | {
[key: string]: string;
}