Bagian
Utilitas
Lainnya
Komponen
- Accordion
- Action Bar
- Alert
- Alert Dialog
- Angle Slider
- Aspect Ratio
- Attachment
- Avatar
- Avatar Group
- Badge
- Badge Overflow
- Banner
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Checkbox Group
- Circular Progress
- Client Only
- Collapsible
- Color Picker
- Color Swatch
- Combobox
- Combobox Lanjutan
- Command
- Compare Slider
- Composition
- Context Menu
- Cropper
- Data Grid
- Data Table
- Data Table Lanjutan
- Date Picker
- Dialog
- Direction Provider
- Drawer
- Dropdown Menu
- Editable
- Empty
- Field
- File Upload
- Form
- FPS
- Gauge
- Hitbox
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kanban
- Kbd
- Kbd Lanjutan
- Key Value
- Label
- Listbox
- Marker
- Marquee
- Mask Input
- Masonry
- Media Player
- Mention
- Menubar
- Message
- Message Scroller
- Native Select
- Navigation Menu
- Number Field
- Pagination
- Pending
- Phone Input
- Pin Input
- Popover
- Portal
- Presence
- Progress
- QR Code
- Questionnaire
- Radio Group
- Range Calendar
- Rating
- Relative Time Card
- Resizable
- Responsive Dialog
- Scroll Area
- Scroll Spy
- Scroller
- Segmented Input
- Select
- Selection Toolbar
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Sortable
- Speed Dial
- Spinner
- Stack
- Stat
- Status
- Stepper
- Stepper Lanjutan
- Swap
- Switch
- Table
- Tabs
- Tags Input
- Tags Input Lanjutan
- Textarea
- Time Picker
- Timeline
- Toast
- Toggle
- Toggle Group
- Tooltip
- Tour
- Typography
- Visually Hidden
- Visually Hidden Input
Timeline
Garis waktu peristiwa, mendatar maupun menegak, dengan keadaan per simpul.
Pesanan diterima
Pembayaran terkonfirmasi.
Sedang dikemas
Barang disiapkan di gudang Bandung.
Dalam perjalanan
Kurir sedang menuju alamat tujuan.
Sampai tujuan
Menunggu penerimaan.
Instalasi
pnpm dlx shadcn-vue@latest add https://kliping.pro/r/timeline.jsonPenggunaan
vue
<script setup lang="ts">
import { Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineDot, TimelineHeader, TimelineItem, TimelineTime, TimelineTitle } from '@/components/timeline'
</script>Bagian
| Bagian | Berkas |
|---|---|
Timeline | src/components/timeline/Timeline.vue |
TimelineConnector | src/components/timeline/TimelineConnector.vue |
TimelineContent | src/components/timeline/TimelineContent.vue |
TimelineDescription | src/components/timeline/TimelineDescription.vue |
TimelineDot | src/components/timeline/TimelineDot.vue |
TimelineHeader | src/components/timeline/TimelineHeader.vue |
TimelineItem | src/components/timeline/TimelineItem.vue |
TimelineTime | src/components/timeline/TimelineTime.vue |
TimelineTitle | src/components/timeline/TimelineTitle.vue |
Asalnya
Ditulis ulang untuk Vue dari pustaka sumber terbuka berlisensi MIT, Copyright (c) 2024 Sadman Sakib. Rincian kewajiban lisensinya ada di halaman kredit.