| Sonraki sürüm | Önceki sürüm |
| syntax:start [2026/04/12 11:00] – oluşturuldu ulascemh | syntax:start [2026/04/12 13:10] (mevcut) – ulascemh |
|---|
| | <jumbotron> |
| ====== UCH Wiki Syntax ====== | ====== UCH Wiki Syntax ====== |
| | </jumbotron> |
| |
| ===== Text ===== | ===== Macros ===== |
| |
| <callout type="tip" icon="true"> | ^ Macro ^ Description ^ |
| This syntax have two version (lowercase and uppercase). | | ''<nowiki>~~CLEARFIX~~</nowiki>'' | Clear the float | |
| | | ''<nowiki>~~PAGEBREAK~~</nowiki>'' | Add a page break | |
| | | ''<nowiki>~~NOTOC~~</nowiki>'' | If this macro is found on the page, no table of contents will be created | |
| | | ''<nowiki>~~NOCACHE~~</nowiki>'' | Wiki caches all output by default. Sometimes this might not be wanted (eg. when the <php> syntax above is used), adding this macro will force Wiki to rerender a page on every call | |
| |
| * The //lowercase// version ''<nowiki><text></nowiki>'' create a __inline__ element (eg. ''<nowiki><span></nowiki>''). | ====== Page header ====== |
| * The //uppercase// version ''<nowiki><TEXT></nowiki>'' create a __block__ element (eg. ''<nowiki><div></nowiki>''). | |
| |
| See the samples. | <code html><page-header> |
| </callout> | ===== Example page header ===== |
| | </page-header> |
| |
| ==== Options ==== | Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</code> |
| |
| <datatable info="false" paging="false" searching="true"> | <page-header> |
| ^ Attribute ^ Allowed Values ^ Description ^ | ===== Example page header ===== |
| | ''type'' | ''muted'' ''primary'' ''success'' ''info'' ''warning'' ''danger'' | Contextual color of text | | </page-header> |
| | ''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 | | |
| </datatables> | |
| |
| ==== Text Formatting ==== | Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| |
| ^ 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>%%'' | <sup>superscript</sup> ve <sub>subscript</sub> | | |
| ^ ''%%<del>Strikethrough</del>%%'' | <del>Strikethrough</del> | | |
| ^ ''%%<nowiki>**bo** //it// __un__%%</nowiki>'' | %%**bo** //it// __un__%% | | |
| |
| ==== Examples ==== | |
| |
| === Alignment === | |
| |
| Easily realign text to components with text alignment attribute. | |
| |
| <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> | |
| |
| <code html5> | |
| <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> | |
| </code> | |
| |
| === Transformation === | |
| |
| Transform text in components with text capitalization attribute. | |
| |
| <TEXT transform="lowercase">Lowercased text.</TEXT> | |
| |
| <TEXT transform="uppercase">Uppercased text.</TEXT> | |
| |
| <TEXT transform="capitalize">Capitalized text.</TEXT> | |
| |
| <code html5> | |
| <text transform="lowercase">Lowercased text.</text> | |
| <text transform="uppercase">Uppercased text.</text> | |
| <text transform="capitalize">Capitalized text.</text> | |
| </code> | |
| |
| === 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. | |
| |
| <TEXT type="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</TEXT> | |
| |
| <TEXT type="primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</TEXT> | |
| |
| <TEXT type="success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</TEXT> | |
| |
| <TEXT type="info">Maecenas sed diam eget risus varius blandit sit amet non magna.</TEXT> | |
| |
| <TEXT type="warning">Etiam porta sem malesuada magna mollis euismod.</TEXT> | |
| |
| <TEXT type="danger">Donec ullamcorper nulla non metus auctor fringilla.</TEXT> | |
| |
| <code html5> | |
| <text type="muted"> [...] </text> | |
| <text type="primary"> [...] </text> | |
| <text type="success"> [...] </text> | |
| <text type="info"> [...] </text> | |
| <text type="warning"> [...] </text> | |
| <text type="danger"> [...] </text> | |
| </code> | |
| |
| === 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. | |
| |
| <TEXT background="primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</TEXT> | |
| |
| <TEXT background="success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</TEXT> | |
| |
| <TEXT background="info">Maecenas sed diam eget risus varius blandit sit amet non magna.</TEXT> | |
| |
| <TEXT background="warning">Etiam porta sem malesuada magna mollis euismod.</TEXT> | |
| |
| <TEXT background="danger">Donec ullamcorper nulla non metus auctor fringilla.</TEXT> | |
| |
| <code html5> | |
| <text background="primary"> [...] </text> | |
| <text background="success"> [...] </text> | |
| <text background="info"> [...] </text> | |
| <text background="warning"> [...] </text> | |
| <text background="danger"> [...] </text> | |
| </code> | |
| |
| ===== Progress Bar ===== | |
| |
| ==== Options ==== | |
| |
| <datatable info="false" paging="false" searching="true"> | |
| ^ 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 | | |
| </datatable> | |
| |
| ==== Examples ==== | |
| |
| === Basic === | |
| |
| <progress> | |
| <bar value="60"></bar> | |
| </progress> | |
| |
| <code html5> | |
| <progress> | |
| <bar value="60"></bar> | |
| </progress> | |
| </code> | |
| |
| === With label === | |
| |
| <progress> | |
| <bar value="60" showvalue="true"></bar> | |
| </progress> | |
| |
| <code html5><progress> | |
| <bar value="60" showvalue="true"></bar> | |
| </progress></code> | |
| |
| === 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> | |
| |
| <code html5> | |
| <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> | |
| </code> | |
| |
| === 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> | |
| |
| <code html5> | |
| <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> | |
| </code> | |
| |
| === 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> | |
| |
| <code html5><progress> | |
| <bar value="45" type="info" striped="true" animate="true"></bar> | |
| </progress></code> | |
| |
| === Stacked === | |
| |
| Place multiple bars into the same ''<nowiki><progress/></nowiki>'' 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> | |
| |
| <code html5><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></code> | |
| |
| |
| <wrap onlyprint>Taken from [[syntax|UCH Wiki]].</wrap> | <wrap onlyprint>Taken from [[syntax|UCH Wiki]].</wrap> |
| <wrap hide>https://wiki.ulascemh.com/doku.php?id=syntax:start</wrap> | <wrap hide>https://wiki.ulascemh.com/doku.php?id=syntax:start</wrap> |