Celerik UI

Appearance

Celerik\Ui\Components ​

Chart ​

final class Celerik\Ui\Components\Chart extends Component implements Stringable

Chart backed by Chart.js.

Data is either embedded (labels() + dataset(), or fromRows()) or loaded from an endpoint with url(); the endpoint returns {"data": $chart->toData()}. A visually hidden data table is rendered as the text alternative (WCAG 1.1.1).

Constants ​

ConstantValue
TYPES['line', 'bar', 'pie', 'doughnut', 'radar', 'polarArea', 'scatter', 'bubble']

Methods ​

name ​

php
static name(): string

type ​

php
type(string $type): self

labels ​

php
labels(array $labels): self

dataset ​

php
dataset(string $label, array $data, array $options = []): self

fromRows ​

php
fromRows(iterable $rows, string $labelField, array $series): self

Builds labels and datasets from rows, e.g. an Eloquent or Doctrine result as arrays.

url ​

php
url(string $url): self

title ​

php
title(string $title, bool $visible = true): self

Accessible name of the chart. Also shown above the chart when $visible is true.

height ​

php
height(int $height): self

Fixed height in pixels. Without it the chart keeps Chart.js' default aspect ratio.

patterns ​

php
patterns(bool $enabled = true): self

Gives each series its own point shape and line dash, shown in the legend too, so series can be told apart without color (WCAG 1.4.1). On by default for line, radar and scatter charts; options set per dataset are kept.

toData ​

php
toData(): array

toArray ​

php
toArray(): array

render ​

php
render(): string

Inherited from Component: make(), getId(), options(), attribute(), addClass().

FileManager ​

final class Celerik\Ui\Components\FileManager extends Component implements Stringable

File manager (elFinder). The connector endpoint runs FileManagerConnector::run().

elFinder's own JS and CSS are loaded from assetsUrl() (copy them from vendor/studio-42/elfinder: css, img, js, sounds); jQuery UI comes with the Celerik chunk, which is loaded only on pages with a file manager.

Methods ​

name ​

php
static name(): string

url ​

php
url(string $url): self

The connector endpoint (it must accept GET and POST).

assetsUrl ​

php
assetsUrl(string $url): self

Base URL of elFinder's assets (css/, img/, js/, sounds/), default "/elfinder".

height ​

php
height(int $height): self

lang ​

php
lang(string $lang): self

Interface language, e.g. "fr" (loaded from assetsUrl()/js/i18n/).

title ​

php
title(string $title): self

Accessible name of the file manager region.

csrf ​

php
csrf(string $token, string $header = 'X-CSRF-TOKEN'): self

The framework's CSRF token, sent as a header with every request (Laravel reads X-CSRF-TOKEN natively). elFinder adds its own token on top.

toArray ​

php
toArray(): array

render ​

php
render(): string

Inherited from Component: make(), getId(), options(), attribute(), addClass().

Form ​

final class Celerik\Ui\Components\Form extends Component implements Stringable

Bootstrap form with client-side validation (Parsley.js) and input masks (Inputmask).

Client-side validation is a convenience only: always validate again on the server and pass the messages back with errors().

Methods ​

name ​

php
static name(): string

action ​

php
action(string $action): self

method ​

php
method(string $method): self

PUT, PATCH and DELETE are sent as POST with a _method field (Laravel and Symfony convention).

csrf ​

php
csrf(string $token, string $field = '_token'): self

add ​

php
add(Field ...$fields): self

getFields ​

php
getFields(): array

floatingLabels ​

php
floatingLabels(bool $floating = true): self

Bootstrap floating labels for text inputs, selects and textareas (the Material look).

submit ​

php
submit(?string $label): self

Label of the submit button; null renders no button.

errorSummary ​

php
errorSummary(bool $enabled = true, string $title = 'There is a problem'): self

Lists every error at the top of the form, with a link to each field, and moves focus to the list after a failed submit (server-side or in the browser). Screen readers then announce the problems once, instead of one live region per field (WCAG 3.3.1). The messages next to the fields stay.

errors ​

php
errors(array $errors): self

Server-side validation errors, field name => message or list of messages.

values ​

php
values(array $values): self

Previously submitted values (old input), field name => value.

toArray ​

php
toArray(): array

render ​

php
render(): string

Inherited from Component: make(), getId(), options(), attribute(), addClass().

Grid ​

final class Celerik\Ui\Components\Grid extends Component implements Stringable

Data grid backed by DataTables.

Client-side mode: pass rows with rows(); they are rendered as HTML (readable without JS). Server-side mode: pass an endpoint with url(); the endpoint answers with respond().

Constants ​

ConstantValue
EXPORT_FORMATS['copy', 'csv', 'print']

Methods ​

name ​

php
static name(): string

column ​

php
column(string $field, ?string $title = null, ?callable $configure = null): self

addColumn ​

php
addColumn(Column ...$columns): self

getColumns ​

php
getColumns(): array

url ​

php
url(string $url): self

Switches to server-side mode: paging, sorting and search are done by this endpoint.

rows ​

php
rows(iterable $rows): self

pageSize ​

php
pageSize(int $pageSize): self

pageSizes ​

php
pageSizes(array $pageSizes): self

searchable ​

php
searchable(bool $searchable = true): self

export ​

php
export(string ...$formats): self

caption ​

php
caption(string $caption, bool $visuallyHidden = false): self

Table caption, used by screen readers to identify the table (WCAG 1.3.1).

respond ​

php
respond(DataSourceInterface $source, array $query): DataResult

Answers a server-side request for this grid.

Only declared columns may be sorted or searched, and the returned rows contain only declared column fields, so nothing else from the data source leaks out.

toArray ​

php
toArray(): array

render ​

php
render(): string

Inherited from Component: make(), getId(), options(), attribute(), addClass().

final class Celerik\Ui\Components\Modal extends Component implements Stringable

Bootstrap modal dialog. Bootstrap's JS (the page's bootstrap.bundle) handles opening, focus trapping, Escape and returning focus to the trigger.

Content: a string is escaped text; a Stringable (e.g. a Form, or Html::raw()) is HTML.

Methods ​

name ​

php
static name(): string

title ​

php
title(string $title): self

body ​

php
body(Stringable|string $body): self

button ​

php
button(string $label, string $variant = 'primary', bool $dismiss = false, array $attributes = []): self

Adds a footer button. Extra attributes, e.g. ['form' => 'contact', 'type' => 'submit'], let a footer button submit a form placed in the body.

cancelButton ​

php
cancelButton(string $label = 'Cancel'): self

A secondary footer button that closes the modal.

size ​

php
size(string $size): self

staticBackdrop ​

php
staticBackdrop(bool $static = true): self

Clicking outside does not close the modal (use for forms, to avoid losing input). Escape and the close button still do.

scrollable ​

php
scrollable(bool $scrollable = true): self

centered ​

php
centered(bool $centered = true): self

open ​

php
open(bool $open = true): self

Opens the modal when the page loads, e.g. to show a form again with server errors.

closeLabel ​

php
closeLabel(string $label): self

Accessible label of the × close button.

trigger ​

php
trigger(string $label, string $variant = 'primary', array $attributes = []): string

A button that opens this modal.

toArray ​

php
toArray(): array

render ​

php
render(): string

Inherited from Component: make(), getId(), options(), attribute(), addClass().

Notification ​

final class Celerik\Ui\Components\Notification extends Component implements Stringable

Toast notifications (Notyf), typically from flash messages after a redirect.

Messages are always treated as text, never HTML. Errors stay until dismissed by default, so they cannot disappear before being read. Without JavaScript the messages are shown as Bootstrap alerts.

Constants ​

ConstantValue
TYPES['success', 'error', 'info', 'warning']

Methods ​

name ​

php
static name(): string

add ​

php
add(string $type, string $message): self

success ​

php
success(string $message): self

error ​

php
error(string $message): self

info ​

php
info(string $message): self

warning ​

php
warning(string $message): self

fromFlash ​

php
fromFlash(array $flash): self

Adds flash messages: key => message or list of messages. Common keys are mapped (status → success, danger → error, notice → info...); unknown keys are ignored.

Laravel: ->fromFlash(session()->only(['success', 'status', 'error', 'warning', 'info'])) Symfony: ->fromFlash($request->getSession()->getFlashBag()->all())

position ​

php
position(string $x, string $y): self

Screen position: x "left", "center" or "right"; y "top" or "bottom".

duration ​

php
duration(int $milliseconds): self

Display time in milliseconds for success, info and warning messages.

errorDuration ​

php
errorDuration(int $milliseconds): self

Display time for errors; 0 (default) keeps them until dismissed.

dismissible ​

php
dismissible(bool $dismissible = true): self

dismissLabel ​

php
dismissLabel(string $label): self

Accessible name of the dismiss buttons (default "Dismiss notification").

getMessages ​

php
getMessages(): array

toArray ​

php
toArray(): array

render ​

php
render(): string

Inherited from Component: make(), getId(), options(), attribute(), addClass().

Scheduler ​

final class Celerik\Ui\Components\Scheduler extends Component implements Stringable

Scheduler / calendar backed by FullCalendar (MIT plugins only).

Events are embedded with events() or loaded per visible range from url(); the endpoint answers with respond(). With createUrl(), updateUrl() and deleteUrl() users can add, move, resize and remove events; each change is POSTed as JSON with the CSRF header, and rolled back in the calendar if the server rejects it.

Constants ​

ConstantValue
VIEWS['month' => 'dayGridMonth', 'week' => 'timeGridWeek', 'day' => 'timeGridDay', 'list' => 'listWeek']
LABELS['newEvent', 'confirmDelete', 'createEvent', 'editEvent', 'title', 'allDay', 'start', 'end', 'save', 'cancel', 'delete', 'titleRequired', 'startRequired', 'e…

Methods ​

name ​

php
static name(): string

view ​

php
view(string $view): self

Initial view: month, week, day or list.

views ​

php
views(string ...$views): self

Views offered in the toolbar, in order.

date ​

php
date(DateTimeInterface|string $date): self

Initially displayed date (defaults to today).

url ​

php
url(string $url): self

Loads events for each visible range from this endpoint (answered by respond()).

events ​

php
events(iterable $events): self

Embedded events, also rendered as a list for browsers without JavaScript.

businessHours ​

php
businessHours(string $start = '09:00', string $end = '17:00', array $days = [1, 2, 3, 4, 5]): self

Highlights working hours, e.g. businessHours('08:00', '18:00', [1, 2, 3, 4, 5]).

  • $days: 0 = Sunday ... 6 = Saturday

slotTimes ​

php
slotTimes(string $min, string $max): self

Visible hours in the week and day views, e.g. slotTimes('07:00', '20:00').

firstDay ​

php
firstDay(int $day): self

First day of the week: 0 = Sunday, 1 = Monday...

locale ​

php
locale(string $locale): self

BCP 47 locale for dates and toolbar texts, e.g. "fr" or "en-GB".

timeZone ​

php
timeZone(string $timeZone): self

"local" (browser time zone, default), "UTC" or an IANA name such as "Europe/Paris".

title ​

php
title(string $title): self

Accessible name of the calendar region.

createUrl ​

php
createUrl(string $url): self

Endpoint receiving new events (selecting a time range creates one).

updateUrl ​

php
updateUrl(string $url): self

Endpoint receiving moved and resized events, from dragging or from the event dialog (Enter, Space or a click on an event), so dates can be changed without a mouse.

deleteUrl ​

php
deleteUrl(string $url): self

Endpoint receiving deleted events. With updateUrl() the event dialog has a Delete button; otherwise clicking (or Enter on) an event without a URL asks to delete it.

csrf ​

php
csrf(string $token, string $header = 'X-CSRF-TOKEN'): self

CSRF token sent in a header with every change (Laravel reads X-CSRF-TOKEN natively).

labels ​

php
labels(array $labels): self

Translates the prompts and the event dialog, e.g. ['save' => 'Enregistrer']. "{title}" in confirmDelete and editEvent is replaced by the event title.

respond ​

php
respond(EventSourceInterface $source, array $query): EventResult

Answers FullCalendar's request for the visible range (?start=...&end=...).

  • Throws InvalidArgumentException When the range is missing, invalid or too long: answer with HTTP 400.

toArray ​

php
toArray(): array

render ​

php
render(): string

Inherited from Component: make(), getId(), options(), attribute(), addClass().

Tabs ​

final class Celerik\Ui\Components\Tabs extends Component implements Stringable

Bootstrap tabs following the WAI-ARIA tabs pattern (tablist, tab, tabpanel). Bootstrap's JS switches panels and handles arrow-key navigation.

Content: a string is escaped text; a Stringable (e.g. a Grid, or Html::raw()) is HTML.

Methods ​

name ​

php
static name(): string

tab ​

php
tab(string $id, string $label, Stringable|string $content): self

active ​

php
active(string $id): self

Initially selected tab (defaults to the first one).

style ​

php
style(string $style): self

"tabs" (default), "pills" or "underline".

fill ​

php
fill(bool $fill = true): self

Tabs share the full width.

rememberInHash ​

php
rememberInHash(bool $remember = true): self

Keeps the selected tab in the URL hash (#profile), so links and reloads open it.

label ​

php
label(string $label): self

Accessible name of the tab list (aria-label), e.g. "Account settings".

toArray ​

php
toArray(): array

render ​

php
render(): string

Inherited from Component: make(), getId(), options(), attribute(), addClass().

ThemeBuilder ​

final class Celerik\Ui\Components\ThemeBuilder extends Component implements Stringable

Edit a theme's tokens with a live preview of real components and a WCAG contrast report, then export the stylesheet (Theme::toCss()) or the theme JSON.

php
ThemeBuilder::make('builder')
    ->theme(Theme::preset('material'))
    ->preview($grid, $form, $chart);

It is a development tool: put it behind authentication or a local-only route. Without JavaScript it is a form (with a contrast report computed in PHP) that posts the theme to saveUrl(); with JavaScript the preview, the report and the export are live.

Constants ​

ConstantValue
LABELS['title' => 'Theme builder', 'name' => 'Theme name', 'base' => 'Base look', 'preset' => 'Start from a preset', 'loadPreset' => 'Load preset', 'light' => 'Lig…
TOKENS['primary' => ['Primary', 'Buttons, links, active tabs, the current page, calendar events.'], 'primaryHover' => ['Primary, hovered', 'Hovered and pressed but…
BASE_NAMES['bootstrap' => 'Bootstrap', 'material' => 'Material', 'tailwind' => 'Tailwind']
SHADOW_NAMES['none' => 'None', 'subtle' => 'Subtle', 'elevated' => 'Elevated', 'outlined' => 'Outlined']
FONTS['system-ui, -apple-system, "Segoe UI", Roboto, sans-serif', 'ui-sans-serif, system-ui, sans-serif, \'Apple Color Emoji\', \'Segoe UI Emoji\'', 'Inter, syste…

Methods ​

name ​

php
static name(): string

theme ​

php
theme(Theme $theme): self

The theme to start from (default: the bootstrap preset).

preview ​

php
preview(Stringable|string ...$items): self

Components (or trusted HTML) shown in the preview, e.g. a Grid, a Form and a Chart.

saveUrl ​

php
saveUrl(string $url): self

Endpoint receiving the theme: a JSON body from the Save button, or the form fields without JavaScript. Read it with ThemeBuilder::fromRequest().

csrf ​

php
csrf(string $token, string $field = '_token'): self

assetsUrl ​

php
assetsUrl(string $url): self

Base URL of the bundle (public/), to switch the base look in the preview. By default it is the directory of the page's celerik.css.

labels ​

php
labels(array $labels): self

@param array<string, string> $labels Keys from self::LABELS, or token names for their label.

fromRequest ​

php
static fromRequest(array $form, string $body = ''): Theme

The theme posted to saveUrl(): a JSON body (the Save button, {"theme": {...}}) or the form fields (without JavaScript, theme[light][primary]…). Check the CSRF token first.

php
$theme = ThemeBuilder::fromRequest($_POST, file_get_contents('php://input'));
file_put_contents('theme.json', $theme->toJson());
  • $form: The parsed form fields ($_POST, $request->request->all()).
  • $body: The raw request body, for JSON requests.
  • Throws InvalidArgumentException When the theme is missing or invalid: answer with HTTP 422.

getTheme ​

php
getTheme(): Theme

toArray ​

php
toArray(): array

render ​

php
render(): string

Inherited from Component: make(), getId(), options(), attribute(), addClass().

Released under the MIT License.

Celerik UI contributors