Pregunta a l'IA
Hola! Pregunta'm qualsevol cosa
Macros

EWiki macros are resolved at compile time, when wiki is transformed to HTML. An expanded macro will not change, despite there are changes in the macro, until you save/compile the wiki content.

EWiki macros are self-contained in a single file, and the compiler finds and expands them.

An EWiki macro can have nested content, including more macros, or single line.

Macro parameters

Macro parameters are enclosed in parentheses, must be named as name=value and comma separated. Values with special characters, like a comma, can be enclosed in double or single quotes.

Learn by example
See the macro examples in the next section.

EWiki provided macros

AI

@w{aiContainer}

Creates a visible div if the AI is active.

aiContainer parameters Description Values
category AI
class Set classes for div
style Adds CSS styles See CSS documentation.

@w{aiInject}

Creates an anchor with a question for the AI.

aiInject parameters Description Values
category AI
class Set classes for anchor
style Adds CSS styles See CSS documentation.
question Question to be injected

@w{aiInvisible}

Creates a visible div if the AI is inactive.

aiInvisible parameters Description Values
category AI
class Set classes for div
style Adds CSS styles See CSS documentation.

Actions

@w{action}

Creates an action button. Text can be enclosed or in text parameter.

action parameters Description Values
category Actions
class Adds extra classes to ui button See Fomantic-UI definition for button.
style Adds CSS styles See CSS documentation.
link protocol:value

Protocols accepted: nav, url, mailto, tel, action, tag, whats, tgram.

Actions accepted: signin, signup, tellsomeone.

@w{button}

Creates a button. Text can be enclosed or in text parameter.

button parameters Description Values
category Actions
class Adds extra classes to ui button See Fomantic-UI definition for button.
style Adds CSS styles See CSS documentation.
icon Adds an icon See FontAwesome icons.
link Link action
onclick On click action
new True if the link opens a new page
text Text inside the button

@w{buttons}

Creates a container for buttons.

buttons parameters Description Values
category Actions
class Adds extra classes to ui buttons See Fomantic-UI definition for buttons.
style Adds CSS styles See CSS documentation.

Cards

@w{card}

Creates a card.

card parameters Description Values
category Cards
class Adds extra classes to ui card See Fomantic-UI definition for card.
style Adds CSS styles See CSS documentation.
image Adds an image

@w{cards}

Creates a container for cards.

cards parameters Description Values
category Cards
class Adds extra classes to ui cards See Fomantic-UI definition for cards.
style Adds CSS styles See CSS documentation.

@w{content}

Creates content for cards, items and lists.

content parameters Description Values
category Cards,Items,Lists
class Adds extra classes to content
style Adds CSS styles See CSS documentation.
header Adds a content header
meta Adds a content metadata Only for cards and items.

@w{extra}

Creates extra content for cards, items. For items, should be nested into a content.

extra parameters Description Values
category Cards,Items
class Adds extra classes to extra content
style Adds CSS styles See CSS documentation.

Containers

@w{accordion}

Creates an accordion.

accordion parameters Description Values
category Containers
class Adds extra classes to ui accordion See Fomantic-UI definition for accordion.
style Adds CSS styles See CSS documentation.

@w{acontent}

Creates an accordion content.

acontent parameters Description Values
category Containers
class Adds extra classes to content See Fomantic-UI definition for accordion.
style Adds CSS styles See CSS documentation.

@w{atitle}

Creates an accordion title.

atitle parameters Description Values
category Containers
class Adds extra classes to title See Fomantic-UI definition for accordion.
style Adds CSS styles See CSS documentation.

@w{segment}

Creates a segment.

segment parameters Description Values
category Containers
class Adds extra classes to ui segment See Fomantic-UI definition for segment.
style Adds CSS styles See CSS documentation.

@w{segments}

Creates a container for segments.

segments parameters Description Values
category Containers
class Adds extra classes to ui segments See Fomantic-UI definition for segments.
style Adds CSS styles See CSS documentation.

@w{solid}

Creates a segment with the provided background color. Font color is automatically selected to make the content visible.

solid parameters Description Values
category Containers
class Adds extra classes to ui segment See Fomantic-UI definition for segment.
style Adds CSS styles See CSS documentation.
color Background color See CSS standard for accepted colors.
image Background image To ensure readability, the color should be image predominant.

@w{transparent}

Creates a segment with a transparent background.

transparent parameters Description Values
category Containers
class Adds extra classes to ui segment See Fomantic-UI definition for segment.
style Adds CSS styles See CSS documentation.

Effects

@w{appear}

Creates an effect for the contained elements.

appear parameters Description Values
category Effects
class Effect name scale, zoom, fade [up|dowm|left|right], [horizontal|vertical] flip, drop, fly [up|dowm|left|right], swing [up|dowm|left|right], browse [up|dowm|left|right], slide [up|dowm|left|right]
style Adds CSS styles See CSS documentation.

@w{disappear}

Creates an effect for the contained elements.

disappear parameters Description Values
category Effects
class Effect name scale, zoom, fade [up|dowm|left|right], [horizontal|vertical] flip, drop, fly [up|dowm|left|right], swing [up|dowm|left|right], browse [up|dowm|left|right], slide [up|dowm|left|right]
style Adds CSS styles See CSS documentation.

@w{effect}

Creates an effect for the contained elements.

effect parameters Description Values
category Effects
class Effect name pulsating, jiggle, flash, shake, pulse, tada, bounce, glow. To create a loop effect add looping.
loop Creates a looping effect Default is false.
style Adds CSS styles See CSS documentation.
Easily add effects using the class attribute

effect macro is a block. It will wrap elements to produce the effect.

This may not work as expected when using effect on non-block elements.

To get the expected result, you can use the effect name in any macro, in the class attribute.

@w{eleff}

Creates an effect for the contained elements.

eleff parameters Description Values
category Effects
class Effect name scaleHover, (text, dark)Shadow, (box, bottom, top, left, right)Shadow, (top, bottom)InnerShadow, underlined, (two, three, four)-columns, box-gradient
style Adds CSS styles See CSS documentation.
Easily add effects using the class attribute

eleff macro is a block. It will wrap elements to produce the effect.

This may not work as expected when using eleff on non-block elements.

To get the expected result, you can use the effect name in any macro, in the class attribute.

@w{reveal}

Creates an effect for rvisible and rhidden embeded elements.

reveal parameters Description Values
category Effects
class Effect name fade, move, rotate, left|right|up|down, circular, small|medium|big|huge|massive
style Adds CSS styles See CSS documentation.

@w{rhidden}

Hidden element for reveal macro.

rhidden parameters Description Values
category Effects

@w{rotated}

Creates a rotated content with the given degrees.

rotated parameters Description Values
category Effects
class Adds class attribute
style Adds CSS styles See CSS documentation.
degrees Rotation By default -2. Positive number rotates clockwise, negative number rotates counter clockwise.

@w{rvisible}

Visible element for reveal macro.

rvisible parameters Description Values
category Effects

@w{visible}

Creates an effect for the contained elements.

visible parameters Description Values
category Effects
role Role for visible See Elephant security for role syntax. Use with caution, content is hidden, but in page source.

Email

@w{button}

Creates a button compatible with emails. Button's content is enclosed.

button parameters Description Values
category Email
color Button background color Any HTML/CSS color, or configured colors: primary, secondary, c1, ...
link Link action

Grids

@w{column}

Creates a grid column. Defaults to use one column.

column parameters Description Values
category Grids
class Adds extra classes to column See Fomantic-UI definition for grid.
style Adds CSS styles See CSS documentation.

@w{grid}

Creates a grid. Can nest row and column. Default to have sixteen columns.

grid parameters Description Values
category Grids
class Adds extra classes to ui grid See Fomantic-UI definition for grid.
style Adds CSS styles See CSS documentation.

@w{row}

Creates a grid row. Can nest column.

row parameters Description Values
category Grids
class Adds extra classes to row See Fomantic-UI definition for grid.
style Adds CSS styles See CSS documentation.
color Background color See CSS standard for accepted colors.
image Background image To ensure readability, the color should be image predominant. Also accepts 'radial' and 'linear'.

Images

@w{centeredImage}

Creates a container for centered images.

centeredImage parameters Description Values
category Images
class Adds classes
style Adds CSS styles See CSS documentation.

@w{image}

Creates an image.

image parameters Description Values
category Images
src Image
class Adds classes to ui image centered,rounded,circular,avatar,fluid,bordered,[mini,tiny,small,medium,large,big,huge,massive][left/right floated][left/right spaced][top/middle/bottom aligned]
style Adds CSS styles See CSS documentation.

@w{linkImage}

Creates an image linked to a URL.

linkImage parameters Description Values
category Images
src Image
href URL
class Adds classes to ui image centered,rounded,circular,avatar,fluid,bordered,[mini,tiny,small,medium,large,big,huge,massive][left/right floated][left/right spaced][top/middle/bottom aligned]
style Adds CSS styles See CSS documentation.

Items

@w{content}

Creates content for cards, items and lists.

content parameters Description Values
category Cards,Items,Lists
class Adds extra classes to content
style Adds CSS styles See CSS documentation.
header Adds a content header
meta Adds a content metadata Only for cards and items.

@w{extra}

Creates extra content for cards, items. For items, should be nested into a content.

extra parameters Description Values
category Cards,Items
class Adds extra classes to extra content
style Adds CSS styles See CSS documentation.

@w{item}

Creates a item.

item parameters Description Values
category Items
class Adds extra classes to ui item See Fomantic-UI definition for item.
style Adds CSS styles See CSS documentation.
imgclass Adds extra classes to ui image See Fomantic-UI definition for image.
image Adds an image

@w{items}

Creates a container for items.

items parameters Description Values
category Items
class Adds extra classes to ui items See Fomantic-UI definition for items.
style Adds CSS styles See CSS documentation.

Labels

@w{label}

Creates a label.

label parameters Description Values
category Labels
class Adds extra classes to ui label See Fomantic-UI definition for label.
style Adds CSS styles See CSS documentation.
image Adds an image
icon Adds an icon
right true if the icon is right aligned Defaults to false.
text Text inside the label
detail Detail inside the label

@w{labels}

Creates a container for labels.

labels parameters Description Values
category Labels
class Adds extra classes to ui labels See Fomantic-UI definition for labels.
style Adds CSS styles See CSS documentation.

Lists

@w{content}

Creates content for cards, items and lists.

content parameters Description Values
category Cards,Items,Lists
class Adds extra classes to content
style Adds CSS styles See CSS documentation.
header Adds a content header
meta Adds a content metadata Only for cards and items.

@w{li}

Creates a list item. Text can be enclosed or in text parameter.

li parameters Description Values
category Lists
class Adds extra classes to item See Fomantic-UI definition for list.
style Adds CSS styles See CSS documentation.
icon Adds an icon See FontAwesome icons.
text Text inside the list item

@w{lih}

Creates a list item with header. Text can be enclosed or in text parameter.

lih parameters Description Values
category Lists
class Adds extra classes to item See Fomantic-UI definition for list.
style Adds CSS styles See CSS documentation.
icon Adds an icon See FontAwesome icons.
header Header inside the list item
text Text inside the list item

@w{ol}

Creates an ordered list.

ol parameters Description Values
category Lists
class Adds extra classes to ui list See Fomantic-UI definition for list.
style Adds CSS styles See CSS documentation.

@w{ul}

Creates an unordered list.

ul parameters Description Values
category Lists
class Adds extra classes to ui list See Fomantic-UI definition for list.
style Adds CSS styles See CSS documentation.

Messages

@w{message}

Creates a friendly formatted message. The message content goes between open and closing macro.

message parameters Description Values
category Messages
class Adds extra classes to ui message warning, error, positive, negative... See Fomantic-UI definition for message.
style Adds CSS styles See CSS documentation.
icon Adds an icon See FontAwesome icons.
header Adds a message header

@w{note}

Creates a friendly formatted message. The message content goes between open and closing macro.

note parameters Description Values
category Messages
class Adds extra classes to ui segment warning, error, positive, negative.
style Adds CSS styles See CSS documentation.
icon Adds an icon See FontAwesome icons.
header Adds a message header

Multimedia

@w{video}

Creates a container for a video, adjusting sizes.

video parameters Description Values
category Multimedia
url Video url For self-hosted videos.
source Video source youtube, vimeo, ... Defaults to youtube.
id Video ID Only when a source is specified.
placeholder Image placeholder Image to be shown while video is not playing. If none, the source provides it.

Statistics

@w{statistics}

Creates a statistic.

statistics parameters Description Values
category Statistics
class Adds extra classes to ui statistic See Fomantic-UI definition for statistic.
style Adds CSS styles See CSS documentation.

@w{statistics}

Creates a statistic label.

statistics parameters Description Values
category Statistics
class Adds extra classes to label See Fomantic-UI definition for statistic.
style Adds CSS styles See CSS documentation.

@w{statistics}

Creates a statistic value.

statistics parameters Description Values
category Statistics
class Adds extra classes to value See Fomantic-UI definition for statistic.
style Adds CSS styles See CSS documentation.

@w{statistics}

Creates a container for statistics.

statistics parameters Description Values
category Statistics
class Adds extra classes to ui statistics See Fomantic-UI definition for statistics.
style Adds CSS styles See CSS documentation.

Stripes

@w{stripe}

Creates a horizontal stripe with the provided background color. Font color is automatically selected to make the content visible.

stripe parameters Description Values
category Stripes
class Adds extra classes to ui fluid padded container segment See Fomantic-UI definition for segment and container.
innerClass Adds extra classes to the inner ui basic container segment See Fomantic-UI definition for segment and container.
style Adds CSS styles See CSS documentation.
color Background color See CSS standard for accepted colors.
innerColor Content color See CSS standard for accepted colors.
image Background image To ensure readability, the color should be image predominant. Also accepts 'radial' and 'linear'.
Stripes vs text
Stripes are preferred when creating landing pages, since they won't use the whole page width when allocating content.

@w{text}

Creates a text friendly segment.

text parameters Description Values
category Stripes
class Adds extra classes to ui basic text container segment See Fomantic-UI definition for segment and container.
innerColor Content color See CSS standard for accepted colors.
style Adds CSS styles See CSS documentation.
Stripes vs text

Stripes are preferred when creating landing pages, since they won't use the whole page width when allocating content.

This macro is provided as a commodity for text segments with normal color palette.

@w{textstripe}

Creates a text friendly horizontal stripe with the provided background color. Font color is automatically selected to make the content visible.

textstripe parameters Description Values
category Stripes
class Adds extra classes to ui fluid padded text container segment See Fomantic-UI definition for segment and container.
innerClass Adds extra classes to the inner ui basic container segment See Fomantic-UI definition for segment and container.
style Adds CSS styles See CSS documentation.
color Background color See CSS standard for accepted colors.
innerColor Content color See CSS standard for accepted colors.
image Background image To ensure readability, the color should be image predominant. Also accepts 'radial' and 'linear'.
Stripes vs text
Stripes are preferred when creating landing pages, since they won't use the whole page width when allocating content.

@w{widestripe}

Creates a horizontal wide stripe with the provided background color. Font color is automatically selected to make the content visible.

widestripe parameters Description Values
category Stripes
class Adds extra classes to ui fluid padded container segment See Fomantic-UI definition for segment and container.
style Adds CSS styles See CSS documentation.
color Background color See CSS standard for accepted colors.
image Background image To ensure readability, the color should be image predominant. Also accepts 'radial' and 'linear'.
Stripes vs text
Stripes are preferred when creating landing pages, since they won't use the whole page width when allocating content.

Support

@w{iframe}

Creates an iframe.

iframe parameters Description Values
category Support
src Iframe URL
width Iframe width
height Iframe height
allow Iframe allow

@w{popup}

Creates a popup with the macro embedded content.

popup parameters Description Values
category Support
class Adds extra classes to ui button See Fomantic-UI definition for button.
popupClass Adds extra classes to ui modal See Fomantic-UI definition for modal.
action Call action
icon Adds an action icon See FontAwesome icons.
header Popup header

@w{script}

Creates a script. If src has a value, the script is correctly closed.

script parameters Description Values
category Support
src Script URL

@w{spaced}

Creates a container for vertical spaced elements.

spaced parameters Description Values
category Support
class Adds extra classes to spaced
style Adds CSS styles See CSS documentation.

@w{stylesheet}

If href has a value, loads a stylesheet. If not, creates a style block.

stylesheet parameters Description Values
category Support
href Stylesheet URL

Tables

@w{table}

Creates a table. Can nest theader, trow, tcol and tfooter.

table parameters Description Values
category Tables
class Adds extra classes to ui table See Fomantic-UI definition for table.
style Adds CSS styles See CSS documentation.

@w{tcol}

Adds a table column. If not value is set, content must be nested.

tcol parameters Description Values
category Tables
class Adds classes to td See Fomantic-UI definition for table, and CSS documentation.
style Adds CSS styles See CSS documentation.
value Value of the column
colspan Columns will use this column
rowspan Rows will use this column

@w{tfooter}

Adds a table footer.

tfooter parameters Description Values
category Tables
class Adds classes to tfoot See Fomantic-UI definition for table, and CSS documentation.
style Adds CSS styles See CSS documentation.
values Values of footers, separated by | If the footer starts with >, will be right aligned.

@w{thead}

Adds a table header column. If not value is set, content must be nested.

thead parameters Description Values
category Tables
class Adds classes to th See Fomantic-UI definition for table, and CSS documentation.
style Adds CSS styles See CSS documentation.
value Value of the column
colspan Columns will use this column
rowspan Rows will use this column

@w{theader}

Adds a table header.

theader parameters Description Values
category Tables
class Adds classes to thead See Fomantic-UI definition for table, and CSS documentation.
style Adds CSS styles See CSS documentation.
values Values of headers, separated by | If the header starts with >, will be right aligned.

@w{trow}

Adds a table row. If no values are set, the columns must be nested.

trow parameters Description Values
category Tables
class Adds classes to tr See Fomantic-UI definition for table, and CSS documentation.
style Adds CSS styles See CSS documentation.
values Values of columns, separated by | If the value starts with >, will be right aligned.

Text

@w{divider}

Creates a divider.

divider parameters Description Values
category Text
class Adds extra classes to ui divider See Fomantic-UI definition of divider.
text Adds text for horizontal and vertical dividers

@w{header}

Creates a header.

header parameters Description Values
category Text
class Adds extra classes to ui header See Fomantic-UI definition of header.
style Adds CSS styles See CSS documentation.
icon Adds an icon See FontAwesome icons.

@w{inline}

Creates an inline text.

inline parameters Description Values
category Text
class Adds extra classes to ui text See Fomantic-UI definition for text.
style Adds CSS styles See CSS documentation.
text The text

@w{space}

Creates a hidden divider.

space parameters Description Values
category Text

@w{striped}

Creates a striped text with the provided stripe color. Font color is automatically selected to make the content visible.

striped parameters Description Values
category Text
class Adds class attribute
style Adds CSS styles See CSS documentation.
color Background color See CSS standard for accepted colors.
image Background image To ensure readability, the color should be image predominant. Also accepts 'radial' and 'linear'.
separation Separation between lines By default is 1.

@w{subheader}

Creates a subheader inside a header.

subheader parameters Description Values
category Text
class Adds extra classes to sub header See Fomantic-UI definition of header.
standalone true/false Tells whether the sub header is standalone.
style Adds CSS styles See CSS documentation.

Uncategorized

@w{strip}

Creates a horizontal strip with the provided background color. Font color is automatically selected to make the content visible.

strip parameters Description Values
class Adds extra classes to ui fluid padded container segment See Fomantic-UI definition for segment and container.
style Adds CSS styles See CSS documentation.
color Background color See CSS standard for accepted colors.
image Background image To ensure readability, the color should be image predominant.

@w{textstrip}

Creates a text friendly horizontal strip with the provided background color. Font color is automatically selected to make the content visible.

textstrip parameters Description Values
class Adds extra classes to ui fluid padded text container segment See Fomantic-UI definition for segment and container.
style Adds CSS styles See CSS documentation.
color Background color See CSS standard for accepted colors.
image Background image To ensure readability, the color should be image predominant.

Users

@w{signature}

Creates current user's signature.

signature parameters Description Values
category Users