CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>design/codex-php - Gitiles</title><link rel="stylesheet" type="text/css" href="/r/plugins/gitiles/+static/base.css"><link rel="stylesheet" type="text/css" href="/r/plugins/gitiles/+static/doc.css"></head><body class="Site"><header class="Site-header"><div class="Header"><div class="Header-title">Gitiles</div><div class="Header-menu"> <a class="Header-menuItem" href="https://gerrit.wikimedia.org/r/">Code Review</a> <a class="Header-menuItem" href="https://gerrit.wikimedia.org/r/login/plugins%2Fgitiles%2Fdesign%2Fcodex-php">Sign In</a> </div></div></header><div class="Site-content"><div class="Container "><div class="Breadcrumbs"><a class="Breadcrumbs-crumb" href="/r/plugins/gitiles/?format=HTML">gerrit.wikimedia.org</a> / <a class="Breadcrumbs-crumb" href="/r/plugins/gitiles/design/">design</a> / codex-php</div><h2 class="RepoDescription">test</h2><div class="CloneRepo"><div class="CloneRepo-title">Clone this repo:</div><input id="clone-repo-input" type="text" class="u-monospace CloneRepo-command" readonly="readonly" value="git clone https://gerrit.wikimedia.org/r/design/codex-php"></div><div class="RepoShortlog"><div class="RepoShortlog-refs"><div class="RefList RefList--responsive"><h3 class="RefList-title">Branches</h3><ul class="RefList-items"><li class="RefList-item"><a href="/r/plugins/gitiles/design/codex-php/+/refs/heads/main">main</a></li></ul></div><div class="RefList RefList--responsive"><h3 class="RefList-title">Tags</h3><ul class="RefList-items"><li class="RefList-item"><a href="/r/plugins/gitiles/design/codex-php/+/refs/tags/v0.3.0">v0.3.0</a></li><li class="RefList-item"><a href="/r/plugins/gitiles/design/codex-php/+/refs/tags/v0.2.0">v0.2.0</a></li><li class="RefList-item"><a href="/r/plugins/gitiles/design/codex-php/+/refs/tags/v0.1.0">v0.1.0</a></li></ul></div></div><div class="RepoShortlog-log"><ol class="CommitLog"><li class="CommitLog-item CommitLog-item--oneline"><a class="u-sha1 u-monospace CommitLog-sha1" href="/r/plugins/gitiles/design/codex-php/+/0fae5c51f7c320fa0cb3314a5e69b17c094240fe">0fae5c5</a> <a href="/r/plugins/gitiles/design/codex-php/+/0fae5c51f7c320fa0cb3314a5e69b17c094240fe">Tag: v0.3.0</a> by Eric Gardner 路 31 hours ago <a class="CommitLog-branchLabel" href="/r/plugins/gitiles/design/codex-php/+/refs/heads/main">main</a> <a class="CommitLog-tagLabel" href="/r/plugins/gitiles/design/codex-php/+/refs/tags/v0.3.0">v0.3.0</a></li><li class="CommitLog-item CommitLog-item--oneline"><a class="u-sha1 u-monospace CommitLog-sha1" href="/r/plugins/gitiles/design/codex-php/+/1e94228c9c095e3674e42837b45ef86476c50398">1e94228</a> <a href="/r/plugins/gitiles/design/codex-php/+/1e94228c9c095e3674e42837b45ef86476c50398">tests: Use class-level @covers annotations instead @coversDefaultClass</a> by Do臒u Abaris 路 3 days ago</li><li class="CommitLog-item CommitLog-item--oneline"><a class="u-sha1 u-monospace CommitLog-sha1" href="/r/plugins/gitiles/design/codex-php/+/edab57b89d1a8ce1e9fbea413e23ceeef9480b1a">edab57b</a> <a href="/r/plugins/gitiles/design/codex-php/+/edab57b89d1a8ce1e9fbea413e23ceeef9480b1a">Merge "Add .gitmessage template for standardized commit messages" into main</a> by jenkins-bot 路 32 hours ago</li><li class="CommitLog-item CommitLog-item--oneline"><a class="u-sha1 u-monospace CommitLog-sha1" href="/r/plugins/gitiles/design/codex-php/+/68cd5648d88349df1719b43afc3f1496c3c27419">68cd564</a> <a href="/r/plugins/gitiles/design/codex-php/+/68cd5648d88349df1719b43afc3f1496c3c27419">Merge "ThumbnailRenderer: Fix null handling for backgroundImage and placeholder" into main</a> by jenkins-bot 路 32 hours ago</li><li class="CommitLog-item CommitLog-item--oneline"><a class="u-sha1 u-monospace CommitLog-sha1" href="/r/plugins/gitiles/design/codex-php/+/93a02df7ce88789e74df955689dcb0ab4c0452ed">93a02df</a> <a href="/r/plugins/gitiles/design/codex-php/+/93a02df7ce88789e74df955689dcb0ab4c0452ed">Add .gitmessage template for standardized commit messages</a> by Do臒u Abaris 路 3 days ago</li></ol><nav class="LogNav"><a class="LogNav-next" href="/r/plugins/gitiles/design/codex-php/+log">More »</a></nav><div class="doc RepoIndexDoc"><h1><a class="h" name="Wikimedia-Codex" href="#Wikimedia-Codex"></a><a class="h" name="wikimedia-codex" href="#wikimedia-codex"></a>Wikimedia Codex</h1>A PHP library for building HTML and CSS UI components using <a href="https://doc.wikimedia.org/codex/main/">Codex</a>, the Wikimedia design system.<a href="https://packagist.org/packages/wikimedia/codex"><img src="http://poser.pugx.org/wikimedia/codex/v?style=for-the-badge" alt="Latest Stable Version" /></a> <a href="https://packagist.org/packages/wikimedia/codex"><img src="http://poser.pugx.org/wikimedia/codex/v/unstable?style=for-the-badge" alt="Latest Unstable Version" /></a> <a href="https://packagist.org/packages/wikimedia/codex"><img src="http://poser.pugx.org/wikimedia/codex/license?style=for-the-badge" alt="License" /></a> <a href="https://packagist.org/packages/wikimedia/codex"><img src="http://poser.pugx.org/wikimedia/codex/require/php?style=for-the-badge" alt="PHP Version Require" /></a><h2><a class="h" name="Installation" href="#Installation"></a><a class="h" name="installation" href="#installation"></a>Installation</h2>Use Composer to install the Codex library:<pre class="code">composer require wikimedia/codex </pre><h2><a class="h" name="Components" href="#Components"></a><a class="h" name="components" href="#components"></a>Components</h2>The Codex library provides a variety of components to build UI:<ul><li>Accordion: A collapsible and expandable section for organizing content.</li><li>Button: A clickable button that can be styled to reflect different actions.</li><li>Card: A component for grouping information and actions related to a single topic.</li><li>Checkbox: A form element that allows users to select one or more options.</li><li>Field: A container for grouping form elements with optional legend and help a text.</li><li>InfoChip: A small component used to display brief information or tags.</li><li>Label: A component used to label other form elements.</li><li>Message: A component to display information, warnings, or errors to users.</li><li>Pager: A component for navigating through pages of data.</li><li>ProgressBar: A visual indicator of progress toward a goal or task completion.</li><li>Radio: A form element that allows users to select one option from a set.</li><li>Select: A dropdown component that allows users to select an option from a list.</li><li>Table: A component for arranging data in rows and columns.</li><li>Tabs: A component that organizes content into multiple panels with selectable tabs.</li><li>TextArea: A multi-line text input field for user input.</li><li>TextInput: A single-line text input field for user input.</li><li>Thumbnail: A visual component for displaying small preview images.</li><li>ToggleSwitch: A ToggleSwitch enables the user to instantly toggle between on and off states.</li></ul><h2><a class="h" name="Usage" href="#Usage"></a><a class="h" name="usage" href="#usage"></a>Usage</h2>Here is a basic example of how to use the Codex library:<pre class="code"><?php require 'vendor/autoload.php'; use Wikimedia\Codex\Utility\Codex $codex = new Codex(); $accordion = $codex ->accordion() ->setTitle( "Accordion Example" ) ->setDescription( "This is an example of an accordion." ) ->setContentHtml( $codex ->htmlSnippet() ->setContent( "This is the content." ) ->build() ) ->setOpen( false ) ->setAttributes( [ "class" => "foo", "bar" => "baz", ] ) ->build() ->getHtml(); echo $accordion; ?> </pre><h2><a class="h" name="Scripts" href="#Scripts"></a><a class="h" name="scripts" href="#scripts"></a>Scripts</h2>The following scripts are defined for testing and code fixing purposes:<ul><li><code class="code">test</code>: Run linting and code checks.</li><li><code class="code">fix</code>: Automatically fix code style issues.</li><li><code class="code">phan</code>: Run the Phan static analyzer.</li><li><code class="code">phpcs</code>: Run the PHP Code Sniffer.</li><li><code class="code">start-sandbox</code>: Start the sandbox environment for testing.</li></ul>Example usage:<pre class="code">composer run-script test composer run-script fix composer run-script phan composer run-script phpcs composer run-script start-sandbox </pre><h2><a class="h" name="License" href="#License"></a><a class="h" name="license" href="#license"></a>License</h2>This project is licensed under the GPL-2.0-or-later. See the <a href="codex-php/+/HEAD/LICENSE">LICENSE</a> file for details.<h2><a class="h" name="Contributing" href="#Contributing"></a><a class="h" name="contributing" href="#contributing"></a>Contributing</h2>Please read the <a href="codex-php/+/HEAD/CONTRIBUTING.md">CONTRIBUTING</a> file for details on our code of conduct, and the process for submitting pull requests to us.<h2><a class="h" name="Bugs" href="#Bugs"></a><a class="h" name="bugs" href="#bugs"></a>Bugs</h2>Report bugs at <a href="https://phabricator.wikimedia.org/tag/codex/">Phabricator</a>.<h2><a class="h" name="Homepage" href="#Homepage"></a><a class="h" name="homepage" href="#homepage"></a>Homepage</h2>For more information, visit the <a href="https://doc.wikimedia.org/codex/">homepage</a>.</div></div></div></div> </div> <footer class="Site-footer"><div class="Footer">Powered by <a href="https://gerrit.googlesource.com/gitiles/">Gitiles</a><a class="u-monospace Footer-formatsItem" href="?format=TEXT">txt</a> <a class="u-monospace Footer-formatsItem" href="?format=JSON">json</a></div></footer></body></html><script>{let f = document.getElementById("clone-repo-input"); f.onclick = () => {f.focus(); if (f.selectionStart === f.selectionEnd) {f.select();}};}</script>