UIStat and UIDescriptionList
A figure with its label, or several label and value pairs. Both are a description list (dl).
UIDescriptionList
stays in one column on mobile.
- Views
- 1280
- Last 7 days
- Searches
- 96
- Helpful answers
- 92 %
- Status
- Published
- Today
- Author
- Meeko team
- Languages
- 2
- es, en
<UIStat label="Visits" bind:value="1280" detail="Last 7 days" />
<UIDescriptionList bind:columns="2" bind:items="[
{ label: 'Status', value: 'Published', detail: 'Today' },
{ label: 'Author', value: 'Meeko team' },
]" />
<UIDisclosure summary="Technical details"><p>It opens without JavaScript.</p></UIDisclosure>| Name | Type / default | Description |
|---|---|---|
label
|
string
| Required. What is measured. |
value
|
string | number
| Required. The figure. |
detail
|
string
| A period or a comparison. |
class
|
string
| Additional classes. |
| Name | Type / default | Description |
|---|---|---|
items
|
readonly UIDescriptionItem[]
| Required. label, value and detail. |
columns
|
1 | 2 | 3
1
| Columns above the mobile width. |
class
|
string
| Additional classes. |
UIDisclosure
A native
details: it opens with the keyboard and without JavaScript.
Technical details
The content is already in the HTML, so the find feature of the browser reaches it.
| Name | Type / default | Description |
|---|---|---|
summary
|
string
| Required. The text that opens and closes. |
open
|
boolean
false
| Open from the start. |
class
|
string
| Additional classes. |
UIDiff
It receives a unified diff and marks each line with
data-kind
(add,
remove,
hunk,
file,
context) and a text for screen readers: color is not the only meaning.
--- a/guide.md +++ b/guide.md @@ -1,3 +1,3 @@ # Guide Removed:-Install with npm. Added:+Install with pnpm. Then, register the module.
<UIDiff label="Changes to the guide" bind:diff="patch" />| Name | Type / default | Description |
|---|---|---|
diff
|
string
| Required. The unified diff. |
label
|
string
| Required. Name of the region. |
emptyText
|
string
| What shows without changes. |
lineLabels
|
Partial<Record<UIDiffLineKind, string>>
| The text that announces each kind of line. |
class
|
string
| Additional classes. |
UICodeBlock
Code with its copy button, hidden until hydration because it is the only script. In
html
it receives an already highlighted
pre
(Shiki with
--shiki-light
and
--shiki-dark) and in
code, what is copied.
mode="log"
uses
role="log"
and wraps the lines.
pnpm add @meekojs/uiconst count = signal(0)let count = 0build: 47 modules
build: done in 1.2 s| Name | Type / default | Description |
|---|---|---|
code / html
|
string / TrustedHtml
| What is copied and, if any, its highlighted version. |
label / lang
|
string
| Name of the block and language. |
verdict / verdictLabel
|
good | bad / string
| Marks an example as good or bad, with a text. |
mode
|
code | log
code
| With log, role=log and no copy button unless copy is set. |
copy
|
boolean
true with code
| Shows the copy button. |
copyLabel / copyAriaLabel / copiedLabel / copyFailedLabel
|
string
| Texts of the button. |
uiLang / labelLang
|
string
| Language of the interface texts and of the label. |
class
|
string
| Additional classes. |
UIProse
It dresses rendered Markdown or your own HTML. Text keeps a reading measure, while code and tables may take the whole column. A UI component inside the text keeps its look. All these guides are inside a
UIProse.
A section title
A paragraph with
a link,
emphasis
and
code.
- A list
- with two items
| Name | Type / default | Description |
|---|---|---|
as
|
div | article | section
div
| Tag of the root. |
html
|
TrustedHtml
| Trusted, already rendered HTML; without it, the default snippet. |
class
|
string
| Additional classes. The meeko-ui-prose class also works on any element. |
<UICodeBlock label="Terminal" code="pnpm add @meekojs/ui" />
<UICodeBlock verdict="good" verdictLabel="Good" lang="ts" bind:code="good" />
<UICodeBlock mode="log" label="Log" bind:code="log" />
<UIProse as="article" bind:html="doc.html" />
The types
UIStatProps,
UIDescriptionListProps,
UIDisclosureProps,
UIDiffProps,
UICodeBlockProps
and
UIProseProps
are exported from
@meekojs/ui/runtime.