widget-02

New tab Full preview

Installation

pnpm dlx kliping@latest add widget-02

Belum ada project? Jalankan npx kliping@latest init dulu — lihat Installation.

Usage

Block ini satu section selebar halaman, tanpa props: teks dan datanya diubah langsung di widget-02.vue setelah dipasang.

• Impor: import Widget02 from '@/components/blocks/widget-02/widget-02.vue'
• Render: <Widget02 />

Atau langsung sebagai halaman bersama block lain, sesuai urutan — sama dengan Builder: npx kliping@latest add navbar-01 widget-02 footer-01 --page src/LandingPage.vue

• Responsive: tata letaknya sama di semua lebar layar (tanpa breakpoint).
• Dark mode: ikut kelas .dark sepenuhnya lewat token tema.

Sample content

Data contoh ada di konstanta berikut — ganti isinya dengan data Anda dengan bentuk butir yang sama:

Data	Berkas	Butir	Bentuk butir
steps	components/routine.test.ts	2	name, instruction, seconds
DEFAULT_STEPS	components/routine.ts	5	name, instruction, seconds

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0
Kliping items	button
Files	components/blocks/widget-02/widget-02.vue components/blocks/widget-02/move-routine.vue components/blocks/widget-02/routine.ts

In this family

Block lain di kategori Widget — bentuk section-nya sama, jadi bisa saling ditukar di halaman Anda (atau di Builder):

widget-01 · widget-03 · widget-04

Changelog

• 23 Okt 2026 · Added — Kategori baru Widgets (desain orisinal Kliping): widget-01 timer fokus (waktu disimpan sebagai jam selesai, tetap benar setelah halaman dibuka lagi) dan widget-02 gerak ringan tanpa alat.

Full preview

Buka widget-02 selebar layar — tab Preview dengan ukuran Desktop, Tablet, dan Mobile, seluruh berkasnya di tab Code, dan Previous/Next ke block lain di Blocks.