OptSelect 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.OptSelect.OptionsSelect(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
- property all
Specify if the all item should be added to the items.
Related Pages:
- property disabled
Related Pages:
https://developer.snapappointments.com/bootstrap-select/examples/
- property drop_up
dropupAuto is set to true by default, which automatically determines whether or not the menu should display above or below the select box. If dropupAuto is set to false, manually make the select a dropup menu by adding the .dropup class to the select.
Related Pages:
- property empty
Specify if the Empty item should be added to the items.
Related Pages:
- property header
‘Select a condiment’ or data-header=”Select a condiment”
Related Pages:
- Type:
Add a header to the dropdown menu, e.g. header
- property live_search
You can add a search input by passing data-live-search=”true” attribute.
Related Pages:
- property max_options
Limit the number of options that can be selected via the data-max-options attribute. It also works for option groups. Customize the message displayed when the limit is reached with maxOptionsText.
Related Pages:
- property placeholder
Using the title attribute will set the default placeholder text when nothing is selected. This works for both multiple and standard select boxes:
Related Pages:
- property select_all
Adds two buttons to the top of the menu - Select All & Deselect All with data-actions-box=”true”.
Related Pages:
- property selected
The selected items
- property selected_text_format
Specify how the selection is displayed with the data-selected-text-format attribute on a multiple select.
Related Pages:
- property show_tick
You can also show the checkmark icon on standard select boxes with the show-tick class:
Related Pages:
- property size
Specify a number for data-size to choose the maximum number of items to show in the menu.
Related Pages:
- property style
Related Pages:
https://developer.snapappointments.com/bootstrap-select/examples/
- property title
Using the title attribute will set the default placeholder text when nothing is selected. This works for both multiple and standard select boxes:
Related Pages:
- property width
Related Pages:
https://developer.snapappointments.com/bootstrap-select/examples/
- class epyk.core.html.options.OptSelect.OptionsSelectJs(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
- property actionsBox
When set to true, adds two buttons to the top of the dropdown menu (Select All & Deselect All).
Related Pages:
- property auto_select
Auto select the item at the defined index in the list. Default will select the first item in the list.
- property config_default
The default value for the configuration in case of template. Default value is an empty list.
Usage:
component.options.config_default = ["Test 1", "Test 2"]
- property container
‘body’ | ‘.main-body’
Related Pages:
- Type:
When set to a string, appends the select to a specific element or selector, e.g., container
- property deselectAllText
The text on the button that deselects all options when actionsBox is enabled.
Related Pages:
- property dropdownAlignRight
Align the menu to the right instead of the left. If set to ‘auto’, the menu will automatically align right if there isn’t room for the menu’s full width when aligned to the left.
Related Pages:
- property dropupAuto
checks to see which has more room, above or below. If the dropup has enough room to fully open normally, but there is more room above, the dropup still opens normally. Otherwise, it becomes a dropup. If dropupAuto is set to false, dropups must be called manually.
Related Pages:
- property header
adds a header to the top of the menu; includes a close button by default
Related Pages:
- property hideDisabled
true
Related Pages:
- Type:
removes disabled options and optgroups from the menu data-hide-disabled
- property iconBase
Set the base to use a different icon font instead of Glyphicons. If changing iconBase, you might also want to change tickIcon, in case the new icon font uses a different naming scheme.
Related Pages:
- property liveSearch
When set to true, adds a search box to the top of the selectpicker dropdown.
Related Pages:
- property liveSearchPlaceholder
When set to a string, a placeholder attribute equal to the string will be added to the liveSearch input.
Related Pages:
- property liveSearchStyle
When set to ‘contains’, searching will reveal options that contain the searched text. For example, searching for pl with return both Apple, Plum, and Plantain. When set to ‘startsWith’, searching for pl will return only Plum and Plantain.
Related Pages:
- property maxOptions
When set to an integer and in a multi-select, the number of selected options cannot exceed the given value.
Related Pages:
- property maxOptionsText
The text that is displayed when maxOptions is enabled and the maximum number of options for the given scenario have been selected.
Related Pages:
- property mobile
When set to true, enables the device’s native menu for select menus.
Related Pages:
- property noneResultsText
The text displayed when a search doesn’t return any results.
Related Pages:
- property noneSelectedText
The text that is displayed when a multiple select has no selected options.
Related Pages:
- property placeholder
The default value (placeholder) when empty.
- property sanitize
Enable or disable the sanitization. If activated, ‘data-content’ on individual options will be sanitized.
Related Pages:
- property selectAllText
The text on the button that selects all options when actionsBox is enabled.
Related Pages:
- property selectOnTab
When set to true, treats the tab character like the enter or space characters within the selectpicker dropdown.
Related Pages:
- property selected
The selected items
- property showContent
When set to true, display custom HTML associated with selected option(s) in the button. When set to false, the option value will be displayed instead.
Related Pages:
- property showIcon
When set to true, display icon(s) associated with selected option(s) in the button.
Related Pages:
- property showSubtext
When set to true, display subtext associated with a selected option in the button.
Related Pages:
- property showTick
Show checkmark on selected option (for items without multiple attribute).
Related Pages:
- property size
When set to ‘auto’, the menu always opens up to show as many items as the window will allow without being cut off.
Related Pages:
- property style
When set to a string, add the value to the button’s style.
Related Pages:
- property styleBase
The default class applied to the button. When using the setStyle method, this class will always remain.
Related Pages:
- property tickIcon
Set which icon to use to display as the “tick” next to selected options.
Related Pages:
- property title
The default title for the selectpicker.
Related Pages:
- property virtualScroll
If enabled, the items in the dropdown will be rendered using virtualization (i.e. only the items that are within the viewport will be rendered).
This drastically improves performance for selects with a large number of options. Set to an integer to only use virtualization if the select has at least that number of options.
Related Pages:
- property width
When set to auto, the width of the selectpicker is automatically adjusted to accommodate the widest option.
Related Pages:
- property windowPadding
This is useful in cases where the window has areas that the dropdown menu should not cover - for instance a fixed header. When set to an integer, the same padding will be added to all sides. Alternatively, an array of integers can be used in the format [top, right, bottom, left].
Related Pages: