UCH Wiki

Bu, dökümanın eski bir sürümüdür!

Text

This syntax have two version (lowercase and uppercase).

* The lowercase version <text> create a inline element (eg. <span>). * The uppercase version <TEXT> create a block element (eg. <div>).

See the samples.

Attribute	Allowed Values	Description
`type`	`muted` `primary` `success` `info` `warning` `danger`	Contextual color of text
`background`	`primary` `success` `info` `warning` `danger`	Contextual background of text
`align`	`left` `right` `center`, `justify` `nowrap`	Text align
`transform`	`lowercase` `uppercase` `capitalize`	Text transformation
`size`	`medium` `xx-small` `x-small` `small` `large` `x-large` `xx-large` `smaller` `larger` `length` (%, em, px, etc.)	Text sizes

Text Formatting

Syntax	Result
`Bold //İtalik// __Altı Çizili__`	bold İtalik Altı Çizili
`''Inline Code''`	`Inline Code`
`//__''All together''__//`	*`All together`*
`<sup>superscript</sup>` ve `<sub>subscript</sub>`	^superscript ve _subscript
`<del>Strikethrough</del>`	~~Strikethrough~~
`<nowiki>bo //it// __un__</nowiki>`	bo //it// __un__

Alignment

Easily realign text to components with text alignment attribute.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<TEXT align="left">Left aligned text.</TEXT>
<TEXT align="center">Center aligned text.</TEXT>
<TEXT align="right">Right aligned text.</TEXT>
<TEXT align="justify">Justified text.</TEXT>
<TEXT align="nowrap">No wrap text.</TEXT>

Transformation

Transform text in components with text capitalization attribute.

Lowercased text.

Uppercased text.

Capitalized text.

<text transform="lowercase">Lowercased text.</text>
<text transform="uppercase">Uppercased text.</text>
<text transform="capitalize">Capitalized text.</text>

Contextual colors

Convey meaning through color with a handful of emphasis utility attributes. These may also be applied to links and will darken on hover just like our default link styles.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<text type="muted"> [...] </text>
<text type="primary"> [...] </text>
<text type="success"> [...] </text>
<text type="info"> [...] </text>
<text type="warning"> [...] </text>
<text type="danger"> [...] </text>

Contextual backgrounds

Similar to the contextual text color attributes, easily set the background of an element to any contextual attribute. Anchor components will darken on hover, just like the text attributes.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<text background="primary"> [...] </text>
<text background="success"> [...] </text>
<text background="info"> [...] </text>
<text background="warning"> [...] </text>
<text background="danger"> [...] </text>

Attribute	Default Value	Allowed Values	Description
`type`	`info`	`success` `info` `warning` `danger`	Type of progress bar
`animate`	optional	`true`	Animate the progress bar
`striped`	optional	`true`	Add a striped effect to progress bar
`showvalue`	optional	`true`	Display current value of progress bar

Basic

<progress>
<bar value="60"></bar>
</progress>

With label

60%

<progress>
<bar value="60" showvalue="true"></bar>
</progress>

Contextual alternatives

<progress>
<bar value="40" type="success"></bar>
</progress>
 
<progress>
<bar value="20" type="info"></bar>
</progress>
 
<progress>
<bar value="60" type="warning"></bar>
</progress>
 
<progress>
<bar value="80" type="danger"></bar>
</progress>

Striped

<progress>
<bar value="40" type="success" striped="true"></bar>
</progress>
 
<progress>
<bar value="20" type="info" striped="true"></bar>
</progress>
 
<progress>
<bar value="60" type="warning" striped="true"></bar>
</progress>
 
<progress>
<bar value="80" type="danger" striped="true"></bar>
</progress>

Animated

Add animate=“true” to a striped progress bar to animate the stripes right to left. Not available in IE9 and below.

<progress>
<bar value="45" type="info" striped="true" animate="true"></bar>
</progress>

Stacked

Place multiple bars into the same <progress/> tag to stack them.

<progress>
<bar value="35" type="success" striped="true"></bar>
<bar value="20" type="warning" striped="true"></bar>
<bar value="10" type="danger" striped="true"></bar>
</progress>

Taken from UCH Wiki. https://wiki.ulascemh.com/doku.php?id=syntax:start

UCH Wiki Syntax