Recipes on AngularCSS

alert-dialog

Mon, 01 Jan 0001 00:00:00 +0000

Use alert dialog parts for destructive or confirmation flows that need a clear action and cancel target.

<section>
 <button commandfor="delete-dialog" command="show-modal">
 Delete project
 </button>
 <dialog id="delete-dialog" role="alertdialog" closedby="closerequest">
 <h2>Delete project?</h2>
 </dialog>
</section>

Example

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Alert Dialog</title>
 <link rel="stylesheet" href="../../css/preflight.css" />
 <link rel="stylesheet" href="../../css/angular.css" />
 <link rel="stylesheet" href="../example.css" />
 <script src="../../js/angular-ts.umd.js"></script>
 <script src="../../js/angular-css.umd.js"></script>
 </head>
 <body
 ng-app="angular.css"
 ng-cloak
 data-example="alert-dialog-basic alert-dialog-demo"
 >
 <section id="confirmation-dialog" class="visual-example">
 <button
 type="button"
 commandfor="confirmation-dialog-content"
 command="show-modal"
 variant="outline"
 >
 Show Dialog
 </button>
 <dialog
 role="alertdialog"
 id="confirmation-dialog-content"
 closedby="closerequest"
 aria-labelledby="confirmation-dialog-title"
 aria-describedby="confirmation-dialog-description"
 size="default"
 >
 <header>
 <h2 id="confirmation-dialog-title">Are you absolutely sure?</h2>
 <p id="confirmation-dialog-description">
 This action cannot be undone. This will permanently delete your
 account from our servers.
 </p>
 </header>
 <footer>
 <button
 type="button"
 commandfor="confirmation-dialog-content"
 command="close"
 variant="outline"
 >
 Cancel
 </button>
 <button
 type="button"
 commandfor="confirmation-dialog-content"
 command="close"
 >
 Continue
 </button>
 </footer>
 </dialog>
 </section>
 </body>
</html>

Sizes And Composition

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Alert Dialog Workflows</title>
 <link rel="stylesheet" href="../../css/preflight.css" />
 <link rel="stylesheet" href="../../css/angular.css" />
 <link rel="stylesheet" href="../example.css" />
 <script src="../../js/angular-ts.umd.js"></script>
 <script src="../../js/angular-css.umd.js"></script>
 </head>
 <body
 ng-app="angular.css"
 ng-cloak
 ng-init="chatDeleted=false"
 data-example="alert-dialog-destructive alert-dialog-media alert-dialog-rtl alert-dialog-small alert-dialog-small-media"
 >
 <main class="alert-dialog-workflows">
 <div class="alert-dialog-trigger-grid" aria-label="Alert dialog examples">
 <section id="share-project-dialog">
 <button
 type="button"
 variant="outline"
 commandfor="share-project-dialog-content"
 command="show-modal"
 >
 Share Project
 </button>
 <dialog
 role="alertdialog"
 size="default"
 id="share-project-dialog-content"
 closedby="closerequest"
 aria-labelledby="share-project-dialog-title"
 aria-describedby="share-project-dialog-description"
 >
 <header>
 <figure aria-hidden="true">
 <svg viewBox="0 0 24 24" fill="none">
 <circle
 cx="12"
 cy="12"
 r="9"
 stroke="currentColor"
 stroke-width="2"
 />
 <path
 d="M12 8v8M8 12h8"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 />
 </svg>
 </figure>
 <h2 id="share-project-dialog-title">Share this project?</h2>
 <p id="share-project-dialog-description">
 Anyone with the link will be able to view and edit this project.
 </p>
 </header>
 <footer>
 <button
 type="button"
 variant="outline"
 commandfor="share-project-dialog-content"
 command="close"
 >
 Cancel
 </button>
 <button
 type="button"
 commandfor="share-project-dialog-content"
 command="close"
 >
 Share
 </button>
 </footer>
 </dialog>
 </section>

 <section id="accessory-dialog">
 <button
 type="button"
 variant="outline"
 commandfor="accessory-dialog-content"
 command="show-modal"
 >
 Show Small Dialog
 </button>
 <dialog
 role="alertdialog"
 size="sm"
 id="accessory-dialog-content"
 closedby="closerequest"
 aria-labelledby="accessory-dialog-title"
 aria-describedby="accessory-dialog-description"
 >
 <header>
 <h2 id="accessory-dialog-title">Allow accessory to connect?</h2>
 <p id="accessory-dialog-description">
 Do you want to allow the USB accessory to connect to this
 device?
 </p>
 </header>
 <footer>
 <button
 type="button"
 variant="outline"
 commandfor="accessory-dialog-content"
 command="close"
 >
 Don't allow
 </button>
 <button
 type="button"
 commandfor="accessory-dialog-content"
 command="close"
 >
 Allow
 </button>
 </footer>
 </dialog>
 </section>

 <section id="accessory-media-dialog">
 <button
 type="button"
 variant="outline"
 commandfor="accessory-media-dialog-content"
 command="show-modal"
 >
 Show Small Dialog With Media
 </button>
 <dialog
 role="alertdialog"
 size="sm"
 id="accessory-media-dialog-content"
 closedby="closerequest"
 aria-labelledby="accessory-media-dialog-title"
 aria-describedby="accessory-media-dialog-description"
 >
 <header>
 <figure aria-hidden="true">
 <svg viewBox="0 0 24 24" fill="none">
 <path
 d="m7 7 10 10-5 5V2l5 5L7 17"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </figure>
 <h2 id="accessory-media-dialog-title">
 Allow accessory to connect?
 </h2>
 <p id="accessory-media-dialog-description">
 Do you want to allow the USB accessory to connect to this
 device?
 </p>
 </header>
 <footer>
 <button
 type="button"
 variant="outline"
 commandfor="accessory-media-dialog-content"
 command="close"
 >
 Don't allow
 </button>
 <button
 type="button"
 commandfor="accessory-media-dialog-content"
 command="close"
 >
 Allow
 </button>
 </footer>
 </dialog>
 </section>

 <section id="delete-chat-dialog">
 <button
 type="button"
 variant="destructive"
 commandfor="delete-chat-dialog-content"
 command="show-modal"
 >
 Delete Chat
 </button>
 <dialog
 role="alertdialog"
 size="sm"
 id="delete-chat-dialog-content"
 closedby="closerequest"
 aria-labelledby="delete-chat-dialog-title"
 aria-describedby="delete-chat-dialog-description"
 >
 <header>
 <figure class="alert-dialog-media-destructive" aria-hidden="true">
 <svg viewBox="0 0 24 24" fill="none">
 <path
 d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v5M14 11v5"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </figure>
 <h2 id="delete-chat-dialog-title">Delete chat?</h2>
 <p id="delete-chat-dialog-description">
 This will permanently delete this chat conversation. View
 <a href="#settings">Settings</a> to delete saved memories.
 </p>
 </header>
 <footer>
 <button
 type="button"
 variant="outline"
 commandfor="delete-chat-dialog-content"
 command="close"
 >
 Cancel
 </button>
 <button
 type="button"
 variant="destructive"
 ng-click="chatDeleted=true"
 commandfor="delete-chat-dialog-content"
 command="close"
 >
 Delete
 </button>
 </footer>
 </dialog>
 </section>

 <div class="alert-dialog-rtl-triggers" dir="rtl" lang="ar">
 <section id="rtl-confirmation-dialog">
 <button
 type="button"
 variant="outline"
 commandfor="rtl-confirmation-dialog-content"
 command="show-modal"
 >
 إظهار الحوار
 </button>
 <dialog
 role="alertdialog"
 size="default"
 id="rtl-confirmation-dialog-content"
 closedby="closerequest"
 aria-labelledby="rtl-confirmation-dialog-title"
 aria-describedby="rtl-confirmation-dialog-description"
 >
 <header>
 <h2 id="rtl-confirmation-dialog-title">هل أنت متأكد تمامًا؟</h2>
 <p id="rtl-confirmation-dialog-description">
 لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك
 نهائيًا من خوادمنا.
 </p>
 </header>
 <footer>
 <button
 type="button"
 variant="outline"
 commandfor="rtl-confirmation-dialog-content"
 command="close"
 >
 إلغاء
 </button>
 <button
 type="button"
 commandfor="rtl-confirmation-dialog-content"
 command="close"
 >
 متابعة
 </button>
 </footer>
 </dialog>
 </section>

 <section id="rtl-accessory-dialog">
 <button
 type="button"
 variant="outline"
 commandfor="rtl-accessory-dialog-content"
 command="show-modal"
 >
 إظهار الحوار (صغير)
 </button>
 <dialog
 role="alertdialog"
 size="sm"
 id="rtl-accessory-dialog-content"
 closedby="closerequest"
 aria-labelledby="rtl-accessory-dialog-title"
 aria-describedby="rtl-accessory-dialog-description"
 >
 <header>
 <figure aria-hidden="true">
 <svg viewBox="0 0 24 24" fill="none">
 <path
 d="m7 7 10 10-5 5V2l5 5L7 17"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </figure>
 <h2 id="rtl-accessory-dialog-title">السماح للملحق بالاتصال؟</h2>
 <p id="rtl-accessory-dialog-description">
 هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟
 </p>
 </header>
 <footer>
 <button
 type="button"
 variant="outline"
 commandfor="rtl-accessory-dialog-content"
 command="close"
 >
 عدم السماح
 </button>
 <button
 type="button"
 commandfor="rtl-accessory-dialog-content"
 command="close"
 >
 السماح
 </button>
 </footer>
 </dialog>
 </section>
 </div>
 </div>
 <output class="output">
 Chat: {{ chatDeleted ? 'deleted' : 'available' }}
 </output>
 </main>
 </body>
</html>

Installation

Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.

application-shell

Mon, 01 Jan 0001 00:00:00 +0000

Compose a persistent application header, the existing Sidebar, and a semantic main workspace. Routing, permissions, and page content remain application-owned. The reference uses the Sidebar’s responsive attribute so navigation starts off-canvas on narrow screens without adding an application-specific class.

Example

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Application Shell</title>
 <link rel="stylesheet" href="../../css/preflight.css" />
 <link rel="stylesheet" href="../../css/angular.css" />
 <link rel="stylesheet" href="../example.css" />
 <script src="../../js/angular-ts.umd.js"></script>
 <script src="../../js/angular-css.umd.js"></script>
 </head>
 <body ng-app="angular.css" ng-cloak data-example="application-shell-demo">
 <section class="application-shell">
 <header>
 <button
 size="icon-sm"
 variant="ghost"
 aria-label="Toggle navigation"
 aria-controls="enterprise-navigation"
 >
 ☰
 </button>
 <a href="#workspace">Northstar Operations</a>
 <menu>
 <button size="sm" variant="outline">Help</button>
 <button size="icon-sm" variant="ghost" aria-label="Account">
 AL
 </button>
 </menu>
 </header>
 <aside
 id="enterprise-navigation"
 ng-sidebar
 collapsible="offcanvas"
 responsive
 aria-label="Primary navigation"
 >
 <div>
 <nav>
 <section>
 <h2>Workspace</h2>
 <ul>
 <li>
 <a href="#overview" aria-current="page"
 ><span>Overview</span></a
 >
 </li>
 <li>
 <a href="#customers"><span>Customers</span></a>
 </li>
 <li>
 <a href="#orders"><span>Orders</span></a>
 </li>
 </ul>
 </section>
 </nav>
 </div>
 </aside>
 <main id="workspace">
 <article class="card">
 <header>
 <h1>Operations overview</h1>
 <p>Review current work and open exceptions.</p>
 </header>
 <section>All systems are operating normally.</section>
 </article>
 </main>
 </section>
 </body>
</html>

Installation

data-table

Mon, 01 Jan 0001 00:00:00 +0000

Compose Table, Filter Bar, Pagination, and native controls around backend-owned rows. AngularCSS supplies the dense workspace presentation while AngularTS owns local bindings and the backend owns data operations.

Example

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Data Table</title>
 <link rel="stylesheet" href="../../css/preflight.css" />
 <link rel="stylesheet" href="../../css/angular.css" />
 <link rel="stylesheet" href="../example.css" />
 <script src="../../js/angular-ts.umd.js"></script>
 <script src="../../js/angular-css.umd.js"></script>
 </head>
 <body
 ng-app="angular.css"
 ng-cloak
 ng-init="query=''; order='customer'; page=1; state={loading:false,error:false,stale:true,selected:false,canArchive:false}; rows=[{id:'ORD-1048',customer:'Ada Lovelace',status:'Open',total:'€1,240',selected:false},{id:'ORD-1047',customer:'Grace Hopper',status:'Review',total:'€860',selected:false},{id:'ORD-1046',customer:'Edsger Dijkstra',status:'Complete',total:'€420',selected:false},{id:'ORD-1045',customer:'Margaret Hamilton',status:'Open',total:'€2,100',selected:false}]"
 data-example="data-table-demo"
 >
 <section
 class="data-table visual-example"
 aria-labelledby="orders-title"
 aria-busy="{{ state.loading }}"
 >
 <header>
 <div>
 <h2 id="orders-title">Orders</h2>
 <p>Recent customer orders</p>
 </div>
 <form role="search" aria-label="Filter orders">
 <fieldset>
 <legend class="visually-hidden">Filters</legend>
 <label>
 <span class="visually-hidden">Search orders</span>
 <input
 type="search"
 ng-model="query"
 placeholder="Search orders"
 />
 </label>
 </fieldset>
 </form>
 </header>
 <aside
 variant="warning"
 aria-live="polite"
 ng-if="state.stale && !state.loading && !state.error"
 role="alert"
 >
 <h3>Showing cached orders</h3>
 <p>The latest refresh did not complete. Values may be out of date.</p>
 <button
 size="xs"
 variant="ghost"
 type="button"
 ng-click="state.stale=false"
 >
 Dismiss
 </button>
 </aside>
 <aside
 variant="destructive"
 aria-live="assertive"
 ng-if="state.error"
 role="alert"
 >
 <h3>Orders could not be loaded</h3>
 <p>The service returned an error. Existing filters are preserved.</p>
 <button
 size="xs"
 variant="outline"
 type="button"
 ng-click="state.error=false; state.loading=true"
 >
 Retry
 </button>
 </aside>
 <menu aria-label="Selected order actions" ng-if="state.selected">
 <output>
 <span ng-repeat="row in rows | filter:{selected:true}" ng-show="$last"
 >{{ $index + 1 }}</span
 >
 selected
 </output>
 <button size="sm" variant="outline" type="button">Export</button>
 <button
 size="sm"
 type="button"
 ng-disabled="!state.canArchive"
 aria-describedby="orders-permission-note"
 >
 Archive
 </button>
 </menu>
 <figure>
 <section class="empty" ng-if="state.loading" aria-live="polite">
 <output class="spinner" aria-label="Loading orders"></output>
 <h3>Loading orders</h3>
 <p>Current filters and selection will be preserved.</p>
 </section>
 <table ng-if="!state.loading && !state.error">
 <caption>
 Orders currently available to your account.
 </caption>
 <thead>
 <tr>
 <th scope="col">
 <input
 type="checkbox"
 aria-label="Select all orders"
 ng-model="state.selectAll"
 ng-change="rows[0].selected=state.selectAll; rows[1].selected=state.selectAll; rows[2].selected=state.selectAll; rows[3].selected=state.selectAll; state.selected=state.selectAll"
 />
 </th>
 <th scope="col">
 <button
 variant="ghost"
 ng-click="order=order==='id' ? '-id' : 'id'"
 >
 Order
 </button>
 </th>
 <th scope="col">
 <button
 variant="ghost"
 ng-click="order=order==='customer' ? '-customer' : 'customer'"
 >
 Customer
 </button>
 </th>
 <th scope="col">Status</th>
 <th scope="col">Total</th>
 </tr>
 </thead>
 <tbody>
 <tr
 ng-repeat="row in rows | filter:query | orderBy:order | limitTo:2:(page - 1) * 2"
 aria-selected="{{ row.selected }}"
 >
 <td>
 <input
 type="checkbox"
 aria-label="Select {{ row.id }}"
 ng-model="row.selected"
 ng-change="state.selected=rows[0].selected || rows[1].selected || rows[2].selected || rows[3].selected"
 />
 </td>
 <th scope="row">{{ row.id }}</th>
 <td>{{ row.customer }}</td>
 <td><span class="badge">{{ row.status }}</span></td>
 <td>{{ row.total }}</td>
 </tr>
 </tbody>
 </table>
 <p ng-if="!state.loading && !state.error">No matching orders.</p>
 </figure>
 <footer>
 <div>
 <output
 ><span>0</span
 ><span ng-repeat="row in rows | filter:query" ng-show="$last"
 >{{ $index + 1 }}</span
 >
 orders</output
 >
 <p id="orders-permission-note" ng-if="!state.canArchive">
 Your role can export orders but cannot archive them.
 </p>
 </div>
 <nav class="pagination" aria-label="Order pages">
 <ul>
 <li>
 <a
 href="#page-1"
 ng-click="page=1"
 aria-current="{{ page === 1 ? 'page' : 'false' }}"
 >1</a
 >
 </li>
 <li>
 <a
 href="#page-2"
 ng-click="page=2"
 aria-current="{{ page === 2 ? 'page' : 'false' }}"
 >2</a
 >
 </li>
 </ul>
 </nav>
 </footer>
 </section>
 </body>
</html>

Backend-driven states

The recipe keeps service state in authored HTML so applications can bind it to their own requests and authorization model:

date-picker

Mon, 01 Jan 0001 00:00:00 +0000

Compose Calendar with the native Popover API and an application-owned date value. This recipe packages the existing date workflow without adding another model, parser, or form directive.

Example

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Date Picker</title>
 <link rel="stylesheet" href="../../css/preflight.css" />
 <link rel="stylesheet" href="../../css/angular.css" />
 <link rel="stylesheet" href="../example.css" />
 <script src="../../js/angular-ts.umd.js"></script>
 <script src="../../js/angular-css.umd.js"></script>
 </head>
 <body
 ng-app="angular.css"
 ng-cloak
 ng-init="selectedDate='2026-09-05'"
 data-example="date-picker-demo"
 >
 <div class="date-picker visual-example">
 <label for="delivery-date">Delivery date</label>
 <span>
 <button
 id="delivery-date"
 type="button"
 variant="outline"
 popovertarget="delivery-date-calendar"
 >
 <span>{{ selectedDate ? selectedDate : 'Choose a date' }}</span
 ><span aria-hidden="true">▾</span>
 </button>
 <aside
 id="delivery-date-calendar"
 popover
 side="bottom"
 align="start"
 aria-label="Choose delivery date"
 >
 <section
 ng-calendar
 data-calendar-generated
 data-month="2026-09"
 data-value="{{ selectedDate }}"
 ng-on-angularcss:calendar-select="selectedDate=$event.detail.value"
 >
 <header>
 <button
 type="button"
 size="icon"
 variant="ghost"
 aria-label="Previous month"
 >
 ‹
 </button>
 <h2></h2>
 <button
 type="button"
 size="icon"
 variant="ghost"
 aria-label="Next month"
 >
 ›
 </button>
 </header>
 <div></div>
 </section>
 </aside>
 </span>
 <p>The application owns parsing, validation, and the submitted value.</p>
 </div>
 </body>
</html>

Installation

drawer

Mon, 01 Jan 0001 00:00:00 +0000

Drawers are native modal dialogs with CSS edge placement and optional handle, header, scroll body, and footer. AngularTS owns values and actions inside them.

<section class="drawer">
 <button commandfor="goal-drawer" command="show-modal">Open Drawer</button>
 <dialog id="goal-drawer" side="bottom">
 <h2>Move Goal</h2>
 <p>Set your daily activity goal.</p>
 <button commandfor="goal-drawer" command="close">Cancel</button>
 </dialog>
</section>

Activity Goal

Example

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Drawer</title>
 <link rel="stylesheet" href="../../css/preflight.css" />
 <link rel="stylesheet" href="../../css/angular.css" />
 <link rel="stylesheet" href="../example.css" />
 <script src="../../js/angular-ts.umd.js"></script>
 <script src="../../js/angular-css.umd.js"></script>
 </head>
 <body
 ng-app="angular.css"
 ng-cloak
 ng-init="goal=350; submittedGoal=350"
 data-example="drawer-demo"
 >
 <main class="visual-example">
 <section id="goal-drawer" class="drawer">
 <button
 commandfor="goal-drawer-content"
 command="show-modal"
 variant="outline"
 >
 Open Drawer
 </button>
 <dialog
 id="goal-drawer-content"
 closedby="any"
 aria-labelledby="goal-drawer-title"
 aria-describedby="goal-drawer-description"
 side="bottom"
 >
 <article>
 <header>
 <h2 id="goal-drawer-title">Move Goal</h2>
 <p id="goal-drawer-description">Set your daily activity goal.</p>
 </header>
 <section>
 <menu>
 <button
 variant="outline"
 size="icon-sm"
 aria-label="Decrease"
 ng-disabled="goal <= 200"
 ng-click="goal=goal-10"
 >
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="M5 12h14"></path>
 </svg>
 </button>
 <output>
 <strong ng-bind="goal"></strong>
 <span>Calories/day</span>
 </output>
 <button
 variant="outline"
 size="icon-sm"
 aria-label="Increase"
 ng-disabled="goal>= 400"
 ng-click="goal=goal+10"
 >
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="M12 5v14"></path>
 <path d="M5 12h14"></path>
 </svg>
 </button>
 </menu>
 <figure aria-hidden="true">
 <span style="--height: 80%"></span
 ><span style="--height: 60%"></span>
 <span style="--height: 40%"></span
 ><span style="--height: 60%"></span>
 <span style="--height: 40%"></span
 ><span style="--height: 56%"></span>
 <span style="--height: 38%"></span
 ><span style="--height: 48%"></span>
 <span style="--height: 60%"></span
 ><span style="--height: 40%"></span>
 <span style="--height: 56%"></span
 ><span style="--height: 38%"></span>
 <span style="--height: 70%"></span>
 </figure>
 </section>
 <footer>
 <button
 commandfor="goal-drawer-content"
 command="close"
 ng-click="submittedGoal=goal"
 >
 Submit
 </button>
 <button
 commandfor="goal-drawer-content"
 command="close"
 variant="outline"
 >
 Cancel
 </button>
 </footer>
 </article>
 </dialog>
 </section>
 <output class="drawer-output" aria-live="polite">
 Submitted goal: <span ng-bind="submittedGoal"></span>
 </output>
 </main>
 </body>
</html>

Responsive Dialog

The application chooses Dialog on desktop and Drawer on compact viewports while sharing the same AngularTS form model.

form-layout

Mon, 01 Jan 0001 00:00:00 +0000

Arrange native fieldsets and existing Field patterns into responsive columns. Native validation and AngularTS forms remain the authoritative form model.

Example

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Form Layout</title>
 <link rel="stylesheet" href="../../css/preflight.css" />
 <link rel="stylesheet" href="../../css/angular.css" />
 <link rel="stylesheet" href="../example.css" />
 <script src="../../js/angular-ts.umd.js"></script>
 <script src="../../js/angular-css.umd.js"></script>
 </head>
 <body ng-app="angular.css" ng-cloak data-example="form-layout-demo">
 <form
 class="form-layout visual-example"
 name="customerForm"
 novalidate
 ng-submit="saved=customerForm.valid"
 >
 <header>
 <h2>Create customer</h2>
 <p>Fields marked as required must be completed.</p>
 </header>
 <aside
 role="alert"
 ng-if="customerForm.submitted && customerForm.invalid"
 >
 <header><h3>Check the customer details</h3></header>
 <ul>
 <li><a href="#form-layout-name">Enter a customer name.</a></li>
 </ul>
 </aside>
 <fieldset>
 <legend>Customer details</legend>
 <div class="field">
 <label for="form-layout-name">Customer name</label>
 <input
 id="form-layout-name"
 name="customerName"
 required
 ng-model="customer.name"
 />
 </div>
 <div class="field">
 <label for="form-layout-email">Email</label>
 <input
 id="form-layout-email"
 type="email"
 name="email"
 ng-model="customer.email"
 />
 </div>
 <div class="field">
 <label for="form-layout-region">Region</label>
 <select
 id="form-layout-region"
 name="region"
 ng-model="customer.region"
 >
 <option value="">Choose a region</option>
 <option>Europe</option>
 <option>Americas</option>
 </select>
 </div>
 <div class="field">
 <label for="form-layout-reference">Reference</label>
 <input
 id="form-layout-reference"
 name="reference"
 ng-model="customer.reference"
 />
 </div>
 </fieldset>
 <footer>
 <button variant="outline" type="reset">Cancel</button>
 <button type="submit">Create customer</button>
 </footer>
 <output aria-live="polite" ng-if="saved"
 >Customer is ready to save.</output
 >
 </form>
 </body>
</html>

Installation

master-detail

Mon, 01 Jan 0001 00:00:00 +0000

Compose Resizable with semantic navigation and an article to browse records without losing context. AngularTS or routing owns the selected record and data.

Example

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Master Detail</title>
 <link rel="stylesheet" href="../../css/preflight.css" />
 <link rel="stylesheet" href="../../css/angular.css" />
 <link rel="stylesheet" href="../example.css" />
 <script src="../../js/angular-ts.umd.js"></script>
 <script src="../../js/angular-css.umd.js"></script>
 </head>
 <body ng-app="angular.css" ng-cloak data-example="master-detail-demo">
 <main
 class="master-detail visual-example"
 ng-resizable-panel-group
 aria-label="Customer workspace"
 >
 <section style="--panel-size: 0.75">
 <nav aria-label="Customers">
 <header><h2>Customers</h2></header>
 <ul>
 <li>
 <a href="#ada" aria-current="page"
 ><strong>Ada Lovelace</strong
 ><small>Enterprise · Active</small></a
 >
 </li>
 <li>
 <a href="#grace"
 ><strong>Grace Hopper</strong
 ><small>Business · Review</small></a
 >
 </li>
 <li>
 <a href="#edsger"
 ><strong>Edsger Dijkstra</strong
 ><small>Enterprise · Active</small></a
 >
 </li>
 </ul>
 </nav>
 </section>
 <hr aria-label="Resize customer list" />
 <section style="--panel-size: 2">
 <article id="ada">
 <header>
 <h1>Ada Lovelace</h1>
 <p>Enterprise customer since 2024</p>
 </header>
 <section>
 <dl>
 <div>
 <dt>Email</dt>
 <dd>ada@example.com</dd>
 </div>
 <div>
 <dt>Region</dt>
 <dd>Europe</dd>
 </div>
 <div>
 <dt>Status</dt>
 <dd>Active</dd>
 </div>
 </dl>
 </section>
 </article>
 </section>
 </main>
 </body>
</html>

Installation

sheet

Mon, 01 Jan 0001 00:00:00 +0000

Use a native dialog and declarative invoker. Author side on the dialog as right, left, top, or bottom; CSS owns only physical placement.

<section class="sheet">
 <button commandfor="profile-sheet" command="show-modal">Open</button>
 <dialog id="profile-sheet" side="right">
 <header>
 <h2>Edit profile</h2>
 <p>Update your account details.</p>
 </header>
 <section>Content</section>
 <footer>
 <button commandfor="profile-sheet" command="close">Close</button>
 </footer>
 </dialog>
</section>

Example

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Sheet</title>
 <link rel="stylesheet" href="../../css/preflight.css" />
 <link rel="stylesheet" href="../../css/angular.css" />
 <link rel="stylesheet" href="../example.css" />
 <script src="../../js/angular-ts.umd.js"></script>
 <script src="../../js/angular-css.umd.js"></script>
 </head>
 <body
 ng-app="angular.css"
 ng-cloak
 ng-init="profile={name:'Pedro Duarte',username:'@peduarte'}; savedName='Pedro Duarte'"
 data-example="sheet-demo"
 >
 <main class="visual-example">
 <section id="profile-sheet" class="sheet">
 <button
 commandfor="profile-sheet-content"
 command="show-modal"
 variant="outline"
 >
 Open
 </button>
 <dialog
 id="profile-sheet-content"
 closedby="any"
 aria-labelledby="profile-sheet-title"
 aria-describedby="profile-sheet-description"
 side="right"
 >
 <header>
 <h2 id="profile-sheet-title">Edit profile</h2>
 <p id="profile-sheet-description">
 Make changes to your profile here. Click save when you're done.
 </p>
 </header>
 <form method="dialog">
 <section>
 <label
 ><span>Name</span>
 <input id="sheet-demo-name" ng-model="profile.name" autofocus />
 </label>
 <label
 ><span>Username</span>
 <input id="sheet-demo-username" ng-model="profile.username" />
 </label>
 </section>
 <footer>
 <button
 type="button"
 commandfor="profile-sheet-content"
 command="close"
 ng-click="savedName=profile.name"
 >
 Save changes
 </button>
 <button
 type="button"
 commandfor="profile-sheet-content"
 command="close"
 variant="outline"
 >
 Close
 </button>
 </footer>
 </form>
 <button
 type="button"
 commandfor="profile-sheet-content"
 command="close"
 variant="ghost"
 size="icon-sm"
 >
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="M18 6 6 18"></path>
 <path d="m6 6 12 12"></path>
 </svg>
 <span class="visually-hidden">Close sheet</span>
 </button>
 </dialog>
 </section>
 <output class="sheet-output" aria-live="polite">
 Saved profile: <span ng-bind="savedName"></span>
 </output>
 </main>
 </body>
</html>

The example keeps profile values and save state in AngularTS. Sheet owns only modal disclosure, semantics, focus, and placement.