Button
The silk:Button component generates an HTML button element styled with Bootstrap classes.
The button primarily operates standalone
Tag Definition
Used standalone:
<silk:Button
id=""
label=""
targetPage=""
icon=""
dock=""
width=""
cssClass="btn-primary"
cssStyle=""
renderIf=""
extraProperties=""
group="false"
disabled="false"
hidden="false"
confirmTitle=""
confirmMessage=""
confirmLabel=""
confirmIcon=""
toggleList=""
logicGrid=""
criteria=""
/>
JavaScript Object
SilkBuilder also creates a companion JavaScript object using the Button class to provide JavaScript programmatic interaction. This object will have the same name as the component's ID.
<silk:Button id="bt1" label="Click Me" />
<silk:JQcode>
bt1.on("click", function(){
silk.alert("I have been clicked!");
});
</silk:JQcode>
Dropdown Button
The component can host silk:ButtonItem components to be used as a dropdown button. The host button and the button items are treated like separate button entities.
<silk:Button id="parentBt" label="Options">
<silk:ButtonItem id="bt1" label="Save" />
<silk:ButtonItem id="bt2" label="Delete" />
</silk:Button>
Properties
id
The button's unique identifier. If the button's events are not going to be used, the id is not required. Default Value: Empty.
label
The value is used as the button's label. It is not required if the button only shows an icon. Default Value: Empty.
targetPage
The ID of the page to be shown when the button is clicked. This also works with silk:Modal. If opening a page/modal is the only button's functionality, then an ID is not necessary. Default Value: Empty.
icon
The icon value is a class from a Font Awesome icon or the HTML containing the icon. Also these values can be used to add icons: - The value "insert" adds a plus icon. - The value "update" adds a pencil icon. - The value "delete" adds a trash can icon. - The value "cancel" adds an x-mark icon. - The value "submit" adds a check icon. Default Value: Empty.
dock
Defines the button's location if it is contained in a silk:header component. The values are: left, center, right. Default Value: Empty.
width
Sets the button's fixed width. By default, the button's width will be changed based on its content. Default Value: Empty.
cssClass
The classes to stylize the button. It expects Bootstrap classes. The button already has the "btn" class and is initialized with "btn-primary". Default Value: btn-primary.
cssStyle
To add extra styling using CSS styling elements. Default Value: Empty.
renderIf
It contains the logic sentence defining whether the component should be rendered. The logic statement's explanation is in the Server Code Logic documentation. Default Value: Empty.
extraProperties
To add extra HTML properties not defined by the silk:Button component. Default Value: Empty.
group
Adds Bootstrap classes to group the button. Default Value: false.
disabled
Adds Bootstrap classes to group the button. Default Value: false.
hidden
Initializes the button as hidden. Uses the CSS style display: none;
.
Default Value: false.
confirmTitle
Sets the title of the confirmation dialog. Default Value: Empty.
confirmMessage
Sets the message to show in the confirmation dialog. Default Value: Empty.
confirmLabel
Sets the label for the accept button in the confirmation dialog. Default Value: Empty.
confirmIcon
Sets the confirmation dialog icon. Default Value: Empty.
toggleList
The list of comma-separated elements that will be toggled together with the component. The value "parent" toggles the immediate parent element. The value "grandpa" toggles the grandparent element. Default Value: Empty.
logicGrid
Default Value: Empty.
criteria
Default Value: Empty.
Last updated