OptImg Module
- class epyk.core.html.options.Options(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
- property builder
Add a JavaScript Builder function to the options.
This will be used to automatically map the Python component to its corresponding JavaScript builder function used by the build method.
Usage:
but = page.ui.button() but.options.builder = "Button"
- Prop value:
The JavaScript builder function name.
- property config_default
The default value for the configuration in case of template.
Default value is an empty string.
Usage:
component.options.config_default = {"value": "test"}
- config_html()
Return the HTML options used by the python and passed to the HTML.
Those options will not be available in the JavaScript layer and they are only defined either to build the HTML from Python or to set some HTML properties.
The returned dictionary is a copy so it can be changed or used in other processes. To change the internal component property, the options property should be used.
- config_js(attrs: Optional[dict] = None)
Return the JavaScript options used by the builders functions.
Builder functions can be defined in the framework or external from the various packages.
The returned dictionary is a copy so it can be changed or used in other processes. To change the internal component property, the options property should be used.
- Parameters:
attrs – Optional. The extra or overridden options
- custom_config(name: str, value: Any, js_type: bool = False)
Add a custom JavaScript configuration.
Usage:
chart = page.ui.charts.apex.scatter() chart.options.chart.zoom.custom_config("test", False)
- Parameters:
name – The key to be added to the attributes
value – String or JString. The value of the defined attributes
js_type – Optional. Specify if the parameter is a JavaScript fragment
- details()
Retrieve the defined properties details.
This function will return a dictionary with all the component attributes (required and optional) ones. It will provide the full available description of those components.
Usage:
but = page.ui.button() pprint.pprint(but.options.details(), indent=4)
- from_json(vals: dict, schema: Optional[dict] = None)
Load the option schema for a component from a json string.
TODO: add more feature to handle functions and enumeration
- Parameters:
vals – The input schema
schema – The full object schema
- has_attribute(cls_obj, name: Optional[str] = None)
Add an extra sub layer to the data structure.
The key in the object representation will be the function name.
- Parameters:
cls_obj – Class. The sub data class used in the structure definition
name – The sub attribute name
- isJsContent(property_name: str)
Check if the content of a property is defined to always be a JavaScript fragment.
Thus the framework will not convert it to a Json content.
Usage:
div = page.ui.div() print(div.options.isJsContent("inline"))
- Parameters:
property_name – The property name
- property managed
Boolean flag to set if the component needs to be added to the page.
If set to False the component has to be managed manually in the page.
Usage:
but = page.ui.button() but.options.managed = False
- Prop bool:
Flag to specify if this component is automatically managed by the page
- optional()
Return all options not added to the HTML component by default.
Those are options which will impact either the Python or the JavaScript builders.
To get the full definition of options the details method should be used.
Usage:
but = page.ui.button() pprint.pprint(but.options.optional(), indent=4)
- property profile
Boolean flag to set if extra logs need to be displayed.
This could help in debugging, default is the page verbose flag (default is false).
Usage:
but = page.ui.button() but.options.verbose = True
- Prop flag:
Flag to display / hide warning logs generated by the framework.
- required()
Return all the mandatory / required options with the default values.
Those options are added by the framework to provide a default for the HTML components but they can be changed.
System options are also added to this category as they are always available in any HTML components.
To get the full definition of options the details method should be used.
Usage:
but = page.ui.button() pprint.pprint(but.options.required(), indent=4)
- set_attrs(vals: dict)
Set the object internal attributes.
- Parameters:
vals – All the attributes to be added to the component
- property style
Change some CSS attributes to the internal HTML component.
Related Pages:
- Prop values:
The CSS attributes.
- update_config(attrs: dict)
Update the option configuration.
- Parameters:
attrs – The attributes to set
- property verbose
Boolean flag to set if extra logs need to be displayed.
This could help in debugging, default is the page verbose flag (default is false).
Usage:
but = page.ui.button() but.options.verbose = True
- Prop flag:
Boolean. Flag to display / hide warning logs generated by the framework.
- class epyk.core.html.options.OptImg.OptionsImage(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
- property background
- property color
- class epyk.core.html.options.OptImg.OptionsTinySlider(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
- property animateDelay
Time between each gallery animation (in “ms”).
Related Pages:
- property animateIn
Name of intro animation class
Related Pages:
- property animateNormal
Name of default animation class.
Related Pages:
- property animateOut
Name of outro animation class
Related Pages:
- property arrowKeys
Allows using arrow keys to switch slides.
Related Pages:
- property autoHeight
Height of slider container changes according to each slide’s height.
Related Pages:
- property autoWidth
If true, the width of each slide will be its natural width as a inline-block box.
Related Pages:
- property autoplay
Toggles the automatic change of slides.
Related Pages:
- property autoplayButton
The customized autoplay start/stop button or selector.
Related Pages:
- property autoplayButtonOutput
Output autoplayButton markup when autoplay is true but a customized autoplayButton is not provided.
Related Pages:
- property autoplayDirection
Direction of slide movement (ascending/descending the slide index).
Related Pages:
- property autoplayHoverPause
Stops sliding on mouseover.
Related Pages:
- property autoplayPosition
Controls autoplay position.
Related Pages:
- property autoplayResetOnVisibility
Pauses the sliding when the page is invisible and resumes it when the page become visiable again. (Page Visibility API)
Related Pages:
- property autoplayText
Text or markup in the autoplay start/stop button.
Related Pages:
- property autoplayTimeout
Time between 2 autoplay slides change (in “ms”).
Related Pages:
- property axis
The axis of the slider.
Related Pages:
- property center
Center the active slide in the viewport.
Related Pages:
- property container
The slider container element or selector.
Related Pages:
- property controls
Controls the display and functionalities of controls components (prev/next buttons). If true, display the controls and add all functionalities. For better accessibility, when a prev/next button is focused, user will be able to control the slider using left/right arrow keys.
Related Pages:
- property controlsContainer
The container element/selector around the prev/next buttons. controlsContainer must have at least 2 child elements.
Related Pages:
- property controlsPosition
Controls controls position.
Related Pages:
- property controlsText
Text or markup in the prev/next buttons.
Related Pages:
- property disable
Disable slider.
Related Pages:
- property edgePadding
Space on the outside (in “px”).
Related Pages:
- property fixedWidth
Controls width attribute of the slides.
Related Pages:
- property freezable
Indicate whether the slider will be frozen (controls, nav, autoplay and other functions will stop work) when all slides can be displayed in one page.
Related Pages:
- property gutter
Space between slides (in “px”).
Related Pages:
- property items
Number of slides being displayed in the viewport. If slides less or equal than items, the slider won’t be initialized.
Related Pages:
- property lazyload
Defines options for different viewport widths (see Responsive Options).
Related Pages:
- property loop
Moves throughout all the slides seamlessly.
Related Pages:
- property mode
Controls animation behaviour.
With carousel everything slides to the side, while gallery uses fade animations and changes all slides at once.
Related Pages:
- property mouseDrag
Changing slides by dragging them.
Related Pages:
Controls the display and functionalities of nav components (dots). If true, display the nav and add all functionalities.
Related Pages:
Indicate if the dots are thumbnails. If true, they will always be visible even when more than 1 slides displayed in the viewport.
Related Pages:
The container element/selector around the dots. navContainer must have at least same number of children as the slides.
Related Pages:
Controls nav position.
Related Pages:
- property nested
Define the relationship between nested sliders. (see demo) Make sure you run the inner slider first, otherwise the height of the inner slider container will be wrong
Related Pages:
- property nextButton
Customized next buttons. This option will be ignored if controlsContainer is a Node element or a CSS selector.
Related Pages:
- property nonce
Optional Nonce attribute for inline style tag to allow slider usage without `unsafe-inline Content Security Policy source.
Related Pages:
- property onInit
Callback to be run on initialization.
Related Pages:
- property prevButton
Customized previous buttons. This option will be ignored if controlsContainer is a Node element or a CSS selector.
Related Pages:
- property preventScrollOnTouch
Defines options for different viewport widths (see Responsive Options).
Related Pages:
- property responsive
Defines options for different viewport widths (see Responsive Options).
Related Pages:
- property rewind
Moves to the opposite edge when reaching the first or last slide.
Related Pages:
- property slideBy
Number of slides going on one “click”.
Related Pages:
- property speed
Speed of the slide animation (in “ms”).
Related Pages:
- property startIndex
The initial index of the slider.
Related Pages:
- property useLocalStorage
Save browser capability variables to localStorage and without detecting them everytime the slider runs if set to true.
Related Pages:
- property viewportMax
Maximum viewport width for fixedWidth/autoWidth
Related Pages: