Private
Readonly
_attachableIf set to true, it be appended to the attached tag
Private
_cachedPrivate
_childrenHolds the list of all children, the ones that are currently in the DOM and those that are not
Private
Readonly
_destroyersAny function inside this array, will be called whenever the CTag is destroyed Used to remove HTML Event Listeners and Consumable listeners
Private
Readonly
_metaPrivate
_observerPrivate
Optional
_parentReference to the parent
Reference to the HTMLElement that this
Gets the value of the element and clears the value
Private
_cachePrivate
_childrenPrivate
_getPrivate
_getPrivate
_mapRest
...children: TagChildrenAdd attribute to the element when the consumer is truthy. Updates whenever the consumable changes. {value} can be a string or a function that returns a string. If {invert} is set to true, the condition will be inversed, but you can also use attrIfNot
Add attribute to the element when the consumer is falsy. Updates whenever the consumable changes. {value} can be a string or a function that returns a string. If {invert} is set to true, the condition will be inversed
Adds classes to the element when the consumer is truthy. Updates whenever the consumable changes. You can pass in an array of classes, or a function that returns a list of classes. If {invert} is set to true, the condition will be inversed, but you can also use classIfNot
Adds classes to the element when the consumer is falsy. Updates whenever the consumable changes. You can pass in an array of classes, or a function that returns a list of classes. For the oposite you can also use classIf
Clears the value
of the element. If you are getting the value and then clearing, consider using consumeValue
Whenever the consumable changes, it will call the consumer
Optional
newValue: TDisable this element when the consumer is truthy. Updates whenever the consumable changes. If {invert} is set to true, the condition will be inversed, but you can also use disableIfNot
Disable this element when the consumer is falsy. Updates whenever the consumable changes.
When the consumable changes, it will call {ifTrue} when the consumable is true. Or {ifFalse} when the consumable is false. If {invert} is set to true, the condition will be inversed, but you can also use doIfNot
Optional
value: TOptional
value: TThe oposite of {this.doIf} When the consumable changes, it will call {ifTrue} if the consumable is false. Or {ifFalse} if the consumable is true.
Find a child in this element (in the DOM or NOT)
Hide this element when the consumer is truthy. Updates whenever the consumable changes. If {invert} is set to true, the condition will be inversed, but you can also use hideIfNot
Hide this element when the consumer is falsy. Updates whenever the consumable changes.
Rest
...children: TagChildrenSets the children, removes previous children
Add style to the element when the consumer is truthy. Updates whenever the consumable changes. If {invert} is set to true, the condition will be inversed, but you can also use styleIfNot {value} can be a string or a function that returns a string.
Add style to the element when the consumer is falsy. Updates whenever the consumable changes. {value} can be a string or a function that returns a string.
Add multiple styles to the element when the consumer is truthy. Updates whenever the consumable changes. {styles} can be a StyleMap or a function that returns a StyleMap. If {invert} is set to true, the condition will be inversed, but you can also use stylesIfNot
Add multiple styles to the element when the consumer is falsy. Updates whenever the consumable changes. {styles} can be a StyleMap or a function that returns a StyleMap. For the oposite use stylesIf
If {newText} is provided, it sets the textContent
of the element.
If {newText} is provided, and a state is provided. It will use the {newText} as a template,
that will be interpolated with the values in the state, each time the state changes. It acts like text
If no argument is provided, it returns the textContent
of the element.
Optional
textTemplate: stringOptional
obj: K | IConsumable<T>Sets {text} when the consumer is true, and sets {elseText (default='')} when the consumer is false. Both {text} and {elseText} can be a string or a function that returns a string. Updates whenever the consumable changes. If {invert} is set to true, the condition will be inversed, but you can also use textIfNot
Sets {text} when the consumer is falsy, and sets {elseText (default='')} when the consumer is truthy. Both {text} and {elseText} can be a string or a function that returns a string. Updates whenever the consumable changes.
Returns a IConsumable that fires when the Event evtName is fired in this element
The return value of fn will be passed to the listeners of the IConsumable
Generated using TypeDoc
This is the main class in Cardboard. Even though Cardboard is designed to not need to use this class directly, you can if you want.
CTag contains a reference to an HTMLElement, its parent, and provides a set of methods to interact with it.