These macros allow to display buttons in different sizes, colors with behaviors according to the size of the screen
Here are the available colors.
<@button color='default' title='default' /> <@button color='primary' title='primary' /> <@button color='secondary' title='secondary' /> <@button color='link' title='link' /> <@button color='info' title='info' /> <@button color='success' title='success' /> <@button color='warning' title='warning' /> <@button color='danger' title='danger' />
Here are the available sizes.
<@button size='xs' title='Extra Small' /> <@button size='sm' title='Small' /> <@button title='Default' /> <@button size='md' title='Medium' /> <@button size='lg' title='Large' />
Here are some examples of icons.
<@button buttonIcon='github' title='Extra Small' /> <@button buttonIcon='twitter' title='Twitter' /> <@button buttonIcon='times' title='Cancel' /> <@button buttonIcon='check' title='Validate' /> <@button buttonIcon='trash' title='Delete' /> <@button buttonIcon='external-link-alt' title='External link' iconPosition='right' />
Display only the icon with a tooltip when the mouse is over the button. Used for toolbar or actions list.
<@button buttonIcon='github' title='Extra Small' hideTitle=['all'] /> <@button buttonIcon='twitter' title='Twitter' hideTitle=['all'] /> <@button buttonIcon='times' title='Cancel' hideTitle=['all'] /> <@button buttonIcon='check' title='Validate' hideTitle=['all'] /> <@button buttonIcon='trash' title='Delete' hideTitle=['all'] />
Display or hide labels according the size of the screen
<@button buttonIcon='github' title='Extra Small' hideTitle=['xs','sm'] /> <@button buttonIcon='twitter' title='Twitter' hideTitle=['xs','sm'] /> <@button buttonIcon='times' title='Cancel' hideTitle=['xs','sm'] /> <@button buttonIcon='check' title='Validate' hideTitle=['xs','sm'] /> <@button buttonIcon='trash' title='Delete' hideTitle=['xs','sm'] />
Parameter | Value | Default |
---|---|---|
name | ||
id | ||
type | button/submit | button |
size | xs/sm/md/lg | none |
color | primary/info/warning/danger/success | primary |
style | string | none |
title | string | none |
hideTitle | sequence | none |
buttonIcon | string | none |
disabled | boolean | false |
iconPosition | string | left |
dropdownMenu | boolean | false |
cancel | boolean | false |
form | string | none |
This macro displays anchor links as buttons.
Here are the available colors.
<@aButton href='#' title='default' /> <@aButton href='#' color='primary' title='primary' /> <@aButton href='#' color='secondary' title='secondary' /> <@aButton href='#' color='link' title='link' /> <@aButton href='#' color='info' title='info' /> <@aButton href='#' color='success' title='success' /> <@aButton href='#' color='warning' title='warning' /> <@aButton href='#' color='danger' title='danger' />
Here are the available sizes.
<@aButton href='#' size='xs' title='Extra Small' /> <@aButton href='#' size='sm' title='Small' /> <@aButton href='#' title='Default' /> <@aButton href='#' size='md' title='Medium' /> <@aButton href='#' size='lg' title='Large' />
Here are some examples of icons.
<@aButton href='#' buttonIcon='github' title='Extra Small' /> <@aButton href='#' buttonIcon='twitter' title='Twitter' /> <@aButton href='#' buttonIcon='times' title='Cancel' /> <@aButton href='#' buttonIcon='check' title='Validate' /> <@aButton href='#' buttonIcon='trash' title='Delete' /> <@aButton href='#' buttonIcon='external-link-alt' title='External link' iconPosition='right' />
Display only the icon with a tooltip when the mouse is over the button. Used for toolbar or actions list.
<@aButton href='#' buttonIcon='github' title='Extra Small' hideTitle=['all'] /> <@aButton href='#' buttonIcon='twitter' title='Twitter' hideTitle=['all'] /> <@aButton href='#' buttonIcon='times' title='Cancel' hideTitle=['all'] /> <@aButton href='#' buttonIcon='check' title='Validate' hideTitle=['all'] /> <@aButton href='#' buttonIcon='trash' title='Delete' hideTitle=['all'] />
Display or hide labels according the size of the screen
<@aButton href='#' buttonIcon='github' title='Github' hideTitle=['xs','sm'] /> <@aButton href='#' buttonIcon='twitter' title='Twitter' hideTitle=['xs','sm'] /> <@aButton href='#' buttonIcon='times' title='Cancel' hideTitle=['xs','sm'] /> <@aButton href='#' buttonIcon='check' title='Validate' hideTitle=['xs','sm'] /> <@aButton href='#' buttonIcon='trash' title='Delete' hideTitle=['xs','sm'] />
Parameter | Value | Default |
---|---|---|
name | ||
id | ||
href | string | none |
size | xs/sm/md/lg | none |
color | primary/info/warning/danger/success | primary |
class | string | none |
params | string | none |
title | string | none |
hideTitle | sequence | none |
buttonIcon | string | none |
disabled | boolean | false |
iconPosition | string | left |
dropdownMenu | boolean | false |