LeCodesdocs

Счётчик

Счётчик хранится в одном signal, а computed превращает его в строку статуса. Ничего не перерисовывается: чтение .value в позиции текста или стиля подписывает только эту привязку, поэтому нажатие меняет число, подпись и цвет кнопки — и больше ничего.

Форкнуть в LeCodes
// A signal holds state, a computed derives from it, and a `() =>` in a text or style
// position binds an element to that value. There is no re-render step: writing count.value
// updates exactly the two labels and the one color that read it.
const count = signal(0)
const status = computed(() =>
    count.value === 0 ? "Tap to start"
        : count.value % 10 === 0 ? "Milestone"
        : count.value % 2 === 0 ? "Even" : "Odd")

const screen = UIScreen([
    UIText(() => String(count.value)).style({ fontSize: 92, fontWeight: 700, color: "white" }),
    UIText(() => status.value).style({ fontSize: 15, color: "#8b90a0", letterSpacing: 1 }),
    UIButton([ UIText("+1").style({ fontSize: 20, fontWeight: 700, color: "white" }) ])
        .style({
            width: 168, height: 56, borderRadius: 28, justifyContent: "center",
            bgColor: () => (count.value > 0 && count.value % 10 === 0 ? "#22c55e" : "#FF4032"),
            onPressed: { opacity: 0.7 },
        })
        .onClick(() => count.value++),
]).style({ bgColor: "#0b0d12", alignItems: "center", justifyContent: "center", gap: 14 })

screen.open()

Нажмите «Запустить» — откроется плавающий симулятор. Он остаётся на месте, пока вы читаете: другой пример просто заменит приложение внутри.

Связанные разделы