omponent, you can embedded snippet of Javascript, Html and Css script and render their output.",
"pa... le": "Render web code in a your page (javascript, html, ...)"
}
---
====== ComboStrap UI - WebCode ====... that permits to render the output of code such as HTML, Javascript or CSS.
By enclosing [[docs:block:co... e last ''webcode'' tag).
===== Example=====
==== HTML ====
* This example will output: One emoji [[u
o define a ''ratio''
* extended with the [[docs:styling:styling|styling attributes]]
<code dw>
{{[ ]path?WxH&ratio=w:h&nolink&att=value[ ]}}
</code>
where:
* ''path'' ... ement of the image (left, center, or right [[docs:styling:float|float]])
* ''nolink'' will not add a [[#i
: "1meei51mjm83femowsehx"
}
---
====== ComboStrap Styling - Marki Language ======
===== About =====
''Comb... ki'' language. It's a simplified version of the ''HTML'' language and follows the same rules.
Below, we... /component>
</code>
where:
* ''type'' is the [[.styling:type|type of component]]. Not every component has... * specific to this component
* the [[#styling|styling attributes]]
* or the [[#html|html
is shown in ''red''. You can even use the [[docs:styling:styling|styling attributes]]
* Example:
<webcode name="Default" frameborder=0>
<code dw>
Links to [[#|existing ... y a ''wikiName'' (ie website name)
Syntax:
<code html>
wikiName>path?query#fragment
</code>
For instan
card
A ''card'':
* is a [[docs:marki|superset HTML component]] and permits then all kind of [[docs:styling:styling|styling]]
* can be laid out in tile with the [[docs:lay
===== Example =====
==== Line numbers ====
''HTML'' code in a [[docs:block:code|code component]] wi... bcode name="Default" frameborder="0">
```dw
<code html line-numbers="true">
<p class="hey">Type some... ==== Line Highlight ====
This example shows an ''HTML'' code in a [[docs:block:code|code component]] wh... '
are highlighted
Example:
<webcode>
```dw
<code html line-numbers="true" line-highlight="1-3, 5">
de>
</webcode>
==== Spacing ====
* With [[docs:styling:spacing|spacing]]
<webcode name="Button">
<code d... ode>
</webcode>
==== Colors ====
* With [[docs:styling:color|colors]]
<webcode name="Button">
<code dw>
... >
where:
* ''type'' defines the [[#type|default styling]]
* ''size'' defines its [[#size]]
* ''skin''... ton'' component is a fully [[docs:marki|super set HTML component]]
</note>
A ''button'' can be used:
ation when the mouse is over a component
=== Advanced ===
Every component is a [[docs:marki|html superset]] and you can therefore use the [[class|class]] for advanced styling.
r HTML ====
As ''hr'' is a [[docs:marki|superset HTML component]], you can use all [[docs:styling:styling|styling attributes]] such as [[docs:styling:spacing|spacing]]
<webcode name="Default" >
<code dw>
Lorem ipsum dolo
]] |
| width | 250-550px | 550px | same as [[docs:styling:dimension|width]] (maximum width of the rendered ... tweet with the value true/false]]</note>
===== HTML =====
If you accepts HTML in your page via a HTMLOk Plugin, you can embedded them directly.
<note>
This is not the recommended w
"0qtqv8lgs1ygj9rax9vck"
}
---
====== ComboStrap Styling - Spacing (Margin, Padding) ======
===== About ... nt space outside the box (not filled with [[docs:styling:background#color|the background color]])
* ''pa... is the space inside the box (filled with [[docs:styling:background#color|the background color]])
<note>... ] with:
* ''p-3'': a ''padding'' with a [[docs:styling:scale|scale value of 3]] (blue color)
* ''m-5''
"vz4upjyihwsqne30iv31e",
"title": "Background styling - Add any background to your ComboStrap component"
}
---
====== ComboStrap Styling - Background ======
===== About =====
The ''bac... ' is defined as being the content plus the [[docs:styling:spacing|padding]]
===== Syntax =====
<code dw... 'background'' area is the content plus the [[docs:styling:spacing|padding]] but not the margin.
</note>
=====
===== About =====
''align'' is an [[docs:styling:styling|styling attribute]] of the [[docs:marki|HTML superset component]]
It permits to align:
* th... RTL language
* ''breakpoint'' defines a [[:docs:styling:conditional|conditional value]].
<note>
''justif... ou want this behavior, you need to use the [[docs:styling:float|float attribute]]
</note>
==== Children ==... 'y-bottom''
* ''breakpoint'' defines a [[:docs:styling:conditional|conditional value]].
<note warning>
ling:type|type]] is:
* ''h1'' to ''h6'' for HTML heading styling
* ''d1'' to ''d4'' for bigger heading displ... default to the number in the type)
Example:
* HTML Heading
<webcode name="Type" iframe>
<code dw>
<h