Utente:Valerio Bozzolan/Sandbox

https://doc.wikimedia.org/codex/latest/

This is an example page that tries to use some CSS-only components.

Vedi phab:T363067. Tutto tranne i pulsanti e la progress bar (in apparenza) funziona una volta sì e dieci no.

Codex: button

Software libero Videosorveglianza Discussioni progetto religione Software proprietario

[[Software libero|<span class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled">Software libero</span>]]
[[Videosorveglianza|<span class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--action-progressive">Videosorveglianza</span>]]
[[DP:Religione|<span class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--action-progressive cdx-button--weight-primary">Discussioni progetto religione</span>]]
[[Software proprietario|<span class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--action-destructive cdx-button--weight-primary">Software proprietario</span>]]

Codex: card

Card title Description Supporting text

<span class="cdx-card">
<!-- Card text. -->
<span class="cdx-card__text">
<!-- Title. -->
<span class="cdx-card__text__title">Card title</span>
<!-- Optional description. -->
<span class="cdx-card__text__description">Description</span>
<!-- Optional supporting text. -->
<span class="cdx-card__text__supporting-text">Supporting text</span>
</span>
</span>

Codex: message

Message content (can include markup)

Codex: icons

(No any "standard" CSS class available)

Codex: info chip

Info Chip

<div class="cdx-info-chip">
<span class="cdx-info-chip--text">Info Chip</span>
</div>

Codex: progress bar

Nota: per il momento non esiste la versione "fissa".

<div class="cdx-progress-bar" role="progressbar">
<div class="cdx-progress-bar__bar"></div>
</div>

Codex: Accordion

CSS-only Accordion Title CSS-only Accordion Description

Lorem ipsum dolor sic amet...

<div class="cdx-accordion">
<!-- The <summary> element must be the first child, and is required -->
<div>
<!-- <summary> should contain a header; can be any heading level -->
<span class="cdx-accordion__header">
<!-- If using only a title, no <span> tags are required here;
however, if you want a title and a description to appear on
separate lines, you should wrap them in spans as below and
use the appropriate class names -->
<span class="cdx-accordion__header__title">
CSS-only Accordion Title
</span>
<span class="cdx-accordion__header__description">
CSS-only Accordion Description
</span>
</span>
</div>
<!-- The <details> element will treat all other children besides
<summary> as collapsible content; it is recommended to wrap
this content in a div with the .cdx-accordion__content class
to get content which is aligned with the heading above. -->
<div class="cdx-accordion__content">
<p>Lorem ipsum dolor sic amet...</p>
</div>
</div>