Примитивы
41
TimeGrid
Недельная сетка календаря с живой линией «сейчас».
отрендерил aura-react
отрендерил aura-react
отрендерил aura-vue
отрендерил aura-svelte
собрано из классов самого aura-angular
Mon
Tue
Wed
Thu
Fri
Sat
Sun
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
Standup
Design review
Focus block
Retro
Mon
Tue
Wed
Thu
Fri
Sat
Sun
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
Standup
Design review
Focus block
Retro
Mon
Tue
Wed
Thu
Fri
Sat
Sun
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
Standup
Design review
Focus block
Retro
Mon
Tue
Wed
Thu
Fri
Sat
Sun
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
Standup
Design review
Focus block
Retro
Код
Рецепт — это композиция примитивов, а не один элемент, поэтому единого сниппета нет. Соберите его из классов ниже или откройте примитивы, из которых он состоит.
Demo.tsx
import { TimeGrid, type TimeGridEvent } from '@ilomee/aura-react';
const EVENTS: TimeGridEvent[] = [
{ id: '1', day: 0, start: 9, duration: 1.5, label: 'Standup' },
{ id: '2', day: 1, start: 13, duration: 2, label: 'Design review' },
{ id: '3', day: 3, start: 10, duration: 3, label: 'Focus block' },
{ id: '4', day: 4, start: 16, duration: 1, label: 'Retro' },
];
export default function Demo() {
return <TimeGrid events={EVENTS} dayStart={8} dayEnd={18} showNow />;
}Demo.vue
<TimeGrid :events="events" :day-start="8" :day-end="18" show-now />Линия «сейчас» рисуется только на клиенте — у сервера нет часов, с которыми браузер согласится.
Demo.svelte
<TimeGrid {events} dayStart={8} dayEnd={18} showNow />Линия «сейчас» рисуется только на клиенте — у сервера нет часов, с которыми браузер согласится.
Используется как aura-time-grid.
demo.component.ts
<aura-time-grid [events]="events" [dayStart]="8" [dayEnd]="18" [showNow]="true" />Линия «сейчас» рисуется только на клиенте — у сервера нет часов, с которыми браузер согласится.
Пропсы
У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.
| Имя | Тип | По умолчанию | Примечания |
|---|---|---|---|
| events | TimeGridEvent[] | null | — | { id, day: 0–6, start, duration, label, color? }. |
| dayStart | number | 7 | |
| dayEnd | number | 21 | |
| dayLabels | string[] | ['Mon' … 'Sun'] | |
| showNow | boolean | false | Рисовать линию текущего времени. |
| Имя | Тип | По умолчанию | Примечания |
|---|---|---|---|
| events | TimeGridEvent[] | null | — | { id, day: 0–6, start, duration, label, color? }. |
| dayStart | number | 7 | |
| dayEnd | number | 21 | |
| dayLabels | string[] | ['Mon' … 'Sun'] | |
| showNow | boolean | false | Рисовать линию текущего времени. |
| Имя | Тип | По умолчанию | Примечания |
|---|---|---|---|
| events | TimeGridEvent[] | null | — | { id, day: 0–6, start, duration, label, color? }. |
| dayStart | number | 7 | |
| dayEnd | number | 21 | |
| dayLabels | string[] | ['Mon' … 'Sun'] | |
| showNow | boolean | false | Рисовать линию текущего времени. |
| Имя | Тип | По умолчанию | Примечания |
|---|---|---|---|
| events | TimeGridEvent[] | null | — | { id, day: 0–6, start, duration, label, color? }. |
| dayStart | number | 7 | |
| dayEnd | number | 21 | |
| dayLabels | string[] | ['Mon' … 'Sun'] | |
| showNow | boolean | false | Рисовать линию текущего времени. |
Какие классы отдаёт
Все фреймворки отдают одни и те же классы — именно поэтому четыре библиотеки выглядят одинаково. Их можно использовать напрямую, вообще без библиотеки компонентов.
| Класс | Роль | Примечания |
|---|---|---|
| .aura-timegrid | база | Обязательный. Без него модификатор не работает. |
| .aura-timegrid__head | элемент | |
| .aura-timegrid__hours | элемент | |
| .aura-timegrid__hour | элемент | |
| .aura-timegrid__col | элемент | |
| .aura-timegrid__slot | элемент | |
| .aura-timegrid__event | элемент | |
| .aura-timegrid__now | элемент |