Текст и стили
Оформите карточку развёртывания с помощью цветов, атрибутов текста и токенов темы.
В этой главе
- Атрибуты текста
- Токены темы
- Карточка развёртывания
- Темы
У каждой ячейки есть символ, цвет текста, фон и набор атрибутов. Text.js компилирует их в CSS span с %c, поэтому консоль показывает настоящие цвета, полужирный шрифт и курсив.
Атрибуты текста
<Text> принимает bold, dim, italic, underline и strikethrough. Вложенные элементы <Text> становятся стилизованными span внутри одной строки.
<Text> Deployed <Text bold>acme-web</Text> to <Text color="accent">iad1</Text></Text>Токены темы
Prop color принимает шестнадцатеричные значения, обычные названия цветов (emerald) и токены темы; оттенки палитры Tailwind задаются через классы (text-emerald-400). Токены следуют активной теме, поэтому используйте их для всего, что несёт смысловую нагрузку. Добавьте компонент статуса:
Добавлено: import { Text } from "@textjs/app";Добавлено: Добавлено: export type DeployStatus = "ready" | "building" | "error" | "queued";Добавлено: Добавлено: export const STATUS = {Добавлено: ready: { label: "Ready", color: "success" },Добавлено: building: { label: "Building", color: "warning" },Добавлено: error: { label: "Error", color: "danger" },Добавлено: queued: { label: "Queued", color: "subtle" },Добавлено: } as const;Добавлено: Добавлено: export function Status({ status }: { status: DeployStatus }) {Добавлено: const s = STATUS[status];Добавлено: return <Text color={s.color} wrap="nowrap">{`● ${s.label}`}</Text>;Добавлено: }Карточка развёртывания
bg-surface выделяет карточку на фоне. Идентификатор развёртывания получает цвет статуса, отображается курсивом во время сборки и зачёркивается при ошибке.
Удалено: import { Box, Spacer, Text, useInput } from "@textjs/app";Добавлено: import { Box, Spacer, Text, useAppTheme, useInput } from "@textjs/app";Добавлено: import { Status, STATUS, type DeployStatus } from "./status";Добавлено: Добавлено: const ORDER: DeployStatus[] = ["ready", "building", "error", "queued"];Добавлено: export default function Page() {Добавлено: const { theme, cycleTheme } = useAppTheme();Добавлено: const [status, setStatus] = useState<DeployStatus>("ready");Добавлено: Добавлено: useInput((e) => {Добавлено: if (e.input === "t") cycleTheme();Добавлено: if (e.input === "s") setStatus((s) => ORDER[(ORDER.indexOf(s) + 1) % ORDER.length]);Добавлено: });Добавлено: return ( <Box className="flex-col grow"> {/* top bar, now with the theme name on the right */}Добавлено: <Box className="flex-col border rounded px-2 py-1 bg-surface">Добавлено: <Box className="flex-row gap-2 h-1">Добавлено: <Text bold>acme-web</Text>Добавлено: <Status status={status} />Добавлено: </Box>Добавлено: <Text color="muted" wrap="truncate-end">feat: stream cells downward</Text>Добавлено: <Text color={STATUS[status].color} italic={status === "building"} strikethrough={status === "error"}>Добавлено: dpl_8fK2Добавлено: </Text>Добавлено: </Box> </Box> );}wrap="truncate-end" завершает длинные сообщения коммитов символом … вместо переноса на вторую строку.
Темы
В Text.js входят пять тем: Geist Dark, OpenCode Dark, Tokyo Night, Amber CRT и Geist Light. Нажимайте t в консоли, чтобы переключать их по кругу. Весь кадр перерисовывается в новой палитре, потому что каждый цвет выше задан токеном.
Попробовать
Это Acme Deploys в конце главы, работающее в DevTools. Нажмите на панель, затем используйте клавиши ниже.
Открыть консоль
Приложение рендерится в DevTools.Сначала включите «Показывать функции для веб-разработчиков» в Safari: «Настройки» → «Дополнения». Затем щёлкните здесь и нажмите t.
Открыть на компьютере
Это приложение рендерится в консоли DevTools, для которой нужен браузер на компьютере.
Тест
2 вопросаОтветьте на все вопросы, чтобы завершить главу.