Gets the checked state of the HTMLElement that this CTag represents,
if it is a checkbox or radio button.
Gets the classlist of the HTMLElement that this CTag represents.
Gets the classname of the HTMLElement that this CTag represents.
Gets the value of the element and clears the value
Get's the id of the HTMLElement that this CTag represents.
Gets the style of the HTMLElement that this CTag represents.
Gets the value of the HTMLElement that this CTag represents, if it has a value.
Adds a single attribute to the element
Add classes to the elements class list.
The classes to add to the element's class list.
Add a single style
Appends the given children to the element.
The children to append to the element.
Add attribute to the element when the consumer is truthy. Updates whenever the observable 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 observable 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 observable is truthy, and removes them when it is falsy.
Updates whenever the observable 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
The observable to listen to.
The classes to add to the element. Can be an array of strings or a function that returns an array of strings.
Optionalinvert: boolean = falseIf true, the condition will be inversed.
Adds classes to the element when the observable is falsy, and removes them when it is truthy.
Updates whenever the observable changes.
You can pass in an array of classes, or a function that returns a list of classes.
The observable to listen to.
The classes to add to the element. Can be an array of strings or a function that returns an array of strings.
Clears the value of the element. If you are getting the value and then clearing, consider using consumeValue
Configure the element in a single call by passing
instead of having to call a method for each property you want to change
const tag = new CTag('div');
tag.config({
attr: { id: 'my-div', 'data-custom': 'value' },
classList: ['class1', 'class2'],
className: 'my-class',
style: { color: 'red', backgroundColor: 'blue' },
text: 'Hello World',
value: 'Initial Value',
children: [new CTag('span', ['Child Text'])],
on: {
click: (self, evt) => console.log('Clicked!', self),
},
});
Whenever the observable changes, it will call the callback.
This is helpful to react to changes in observables and update the tag accordingly.
You can also do it directly, although you need to keep a reference to the tag yourself.
The observable to listen to.
The callback to call when the observable changes.
Destroy the element, should not be used afterwards
USE WITH CAUTION! Not intended to be used in most cases.
Disable the element
Disable this element when the consumer is truthy. Updates whenever the observable 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 observable changes.
When the observable changes, it will call ifTrue when the observable is true. Or ifFalse when the observable is false.
If invert is set to true, the condition will be inversed, but you can also use doIfNot
The observable to listen to.
The function to call when the observable is truey.
The function to call when the observable is falsey.
Optionalinvert: boolean = falseIf true, the condition will be inversed.
The oposite of doIf
When the observable changes, it will call ifTrue if the observable is false. Or ifFalse if the observable is true.
The observable to listen to.
The function to call when the observable is falsy.
The function to call when the observable is truthy.
Enable the element
Check if classes are present in this element
Hide this element when the consumer is truthy. Updates whenever the observable changes.
If invert is set to true, the condition will be inversed, but you can also use hideIfNot
The observable to listen to.
Optionalinvert: boolean = falseIf true, the condition will be inversed.
Hide this element when the observable is falsy. Updates whenever the observable changes.
The observable to listen to.
Listen to an event on the element. Like addEventListener.
Add an event listener for a particular HTMLElement event
The name of the event to listen for. For a list of valid event names, see "available event names".
The callback function to execute when the event is triggered.
Add an event listener for a particular event that will only fire once
The name of the event to listen for. For a list of valid event names, see "available event names".
The callback function to execute when the event is triggered.
Prepends the given children to the element.
The children to append to the element.
Query a child in this element (in the DOM)
The CSS selector to query the child element.
Adds a set of attributes to the element
Sets the checked state of the element, if it is a checkbox or radio button.
Set whether the element should be disabled or not. It sets the disabled attribute.
Sets the value of the HTMLElement that this CTag represents.
OptionalnewValue: stringAdds a stylesheet to main style manager, and adds the className to the element.
This is useful for adding styles to the element that are not inline styles.
By doing this we can have just one style definition for tags that will have the same styles.
The stylesheet to add to the style manager.
OptionalclassName: stringThe class name to add to the element. If not provided, a random UUID will be generated.
Add style to the element when the consumer is truthy. Updates whenever the observable 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 observable 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 observable 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 observable changes.
styles can be a StyleMap or a function that returns a StyleMap.
For the oposite use stylesIf
If {textTemplate} is provided, it sets the textContent of the element.
If {textTemplate} is provided, and a state is provided. It will use the {textTemplate} 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.
OptionaltextTemplate: stringOptionalobj: K | IObservable<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 observable changes.
If invert is set to true, the condition will be inversed, but you can also use textIfNot
The observable to listen to.
The text to set when the observable is truthy. Can be a string or a function that returns a string.
OptionalelseText: string | ((self: CTag) => string) = ''The text to set when the observable is falsy. Can be a string or a function that returns a string. Defaults to an empty string.
Optionalinvert: boolean = falseIf true, the condition will be inversed.
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 observable changes.
Toggle a class. If it's present it's removed, if it's not present its added.
Returns a IObservable that fires when the Event evtName is fired in this element
The return value of fn will be passed to the listeners of the IObservable
The name of the event to listen for. For a list of valid event names, see "available event names".
The callback function to execute when the event is triggered.
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.