I'm looking at the options for customise fluent UI dropdown, based on the doc there are 4 options:
https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
<Dropdown
placeholder="Select an option"
label="Custom example"
ariaLabel="Custom dropdown example"
onRenderPlaceholder={onRenderPlaceholder}
onRenderTitle={onRenderTitle}
onRenderOption={onRenderOption}
onRenderCaretDown={onRenderCaretDown}
styles={dropdownStyles}
options={exampleOptions}
/>
onRenderPlaceholder
onRenderTitle
onRenderOption
onRenderCaretDown
But these options are not really close to my requirements, I want to customise the group header and dropdown panel with extra buttons.
Based on the defnition in the code (IDropdownProps) there are also some exposed custom rendering are not in the docs, just curiouse is there any sample use case for following custom renderings.
onRenderItem
onRenderList
onRenderContainer
Related
I'm using the VueJS Vuetify framework and I need a pagination option with more features then the basic one available.
what am i looking for:
an option to add custom names (not just numbers)
a tooltip over the buttons
to disable/enable just some of the buttons
pagination - meaning: use next, previous and "..." if there are too many pages
if the pagination had a template option (slot) that would of been perfect.
now i am wondering how is the best why to get my goal. is there a way to add templates to vuetify? is there a different component that has this options on the pagination?
Read the api here In answer to your questions:
1+2+3 This is not supported in vuetify out of the box and therefore you may want to consider writing your own pagination tool or looking for a different package.
4. This can be set in the props as described in the docs above, see total-visible prop and length.
On our current Angular 5 project, we use bootstrap 3.3.7 and ngx-bootstrap 2.0.3
I have been asked to implement a dropdown multi-select option as shown below. It will allow user to select multiple options from dropdown list.
How can I implement this feature?
You can create a dropdown using ngx-bootstrap and then add <input type="checkbox" with labels for a description within in menu item li.
It turns out neither of these frameworks support such component.
I have Domino 9.0.1 and dojo 1.9.4
Can i use HorizontalRangeSlider?
When i trying require this control, load empty javasript file.
Example:
<xp:this.resources>
<xp:dojoModule name="dojox/form/HorizontalRangeSlider"></xp:dojoModule>
</xp:this.resources>
<div id="hrSlider" dojoType="dojox.form.HorizontalRangeSlider"></div>
Yes, but just declaring a div with the dojoType isn't sufficient.
See the Dojo documentation if you want to do it manually. You'll either need declarative code to set the properties according to what you want, or programmatic code.
Alternatively, use the Dojo Horizontal Slider control, as documented in XPages Extension Library book. The book also highlights why the control was added - to allow a single component on the page which comprised all the properties required by the slider's various HTML elements.
I am using the popup menu in Extension Library like this
<xe:popupMenu id="pop">
<xe:this.treeNodes>
<xe:basicContainerNode image="/vwicn148.gif" label="Container">
<xe:this.children>
<xe:basicLeafNode label="Child" image="/vwicn148.gif"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
</xe:this.treeNodes></xe:popupMenu>
And it look like this with an image added before the label
As my site is using only "font icons" from FontAwesome I want to display these instead of normal images. how can I do that?
You have 4 options (and they are not pretty):
use a custom renderer as Tim suggested
subclass the control so label is rendered passthrou
lobby the ExtLib team to add new properties
use an XSP.OnLoad script to add the font awesom tags
Is there a way using dojo/dijit to disable the submit button till all the fields in a form are valid. Kind of like having a dojo > method > onChange inside the form? So the submit button only becomes enabled when all the form elements have meet their criteria?
Are you using a dijit.form.Form widget as your form? If you are, I would suggest connecting to the Form's onValidStateChange event. The docs for this event specifically state your use case:
onValidStateChange
Defined by dijit.form._FormMixin
Stub function to connect to if you want to do something (like disable/enable a submit button) when the valid state changes on the form as a whole. Deprecated. Will be removed in 2.0. Use watch("state", ...) instead.
The best way to see what events are available for a given widget is to look at the API Documentation for the widget you are interested in under the "Event Summary" heading. The dojocampus reference documentation often leaves out examples for references to some of the more obscure features of the widgets.
I would suggest to have a hidden button which will submit the form. When you click visbile button run a javascript function that validates all the input and then clicks on the hidden button to submit the form. Please find the pseudo code below
<form action="register">
<input dojoType="dijit.validation.TextBox"/>
<button onClick="validateall()">submit</button>
<button id="submitForm" type="submit" hidden="true"/>
</form>
function validateAll(){
if(AllOk){
clearErrorMessage();
dojo.byId('submitForm').click();
}else{
showErrorMessage();
}