Skip to content

Latest commit

ย 

History

History
70 lines (63 loc) ยท 2.43 KB

File metadata and controls

70 lines (63 loc) ยท 2.43 KB

Umbraco UI components

  • ๐Ÿ› ๏ธ - WIP in ./src/components
  • ๐Ÿ“ฆ - released
  • without emoji - untouched idea

Basics

  • ๐Ÿ› ๏ธ Action bar (maybe just button-group, used in Cards, Lists etc. ust a round cornered box holding some buttons)
  • ๐Ÿ“ฆ Avatar
  • ๐Ÿ“ฆ Avatar Group
  • ๐Ÿ“ฆ Badge
  • ๐Ÿ“ฆ Button
  • ๐Ÿ“ฆ Button Group
  • Button Grid (use for Icon selector, Colors)
  • ๐Ÿ› ๏ธ Cards (One base and maybe more specific card types, concepts: Node, Media, Image, File, Folder, DocumentType, User, Member, Form, DataType, CloudProject...)
  • ๐Ÿ› ๏ธ Card Grid (Show any type of card)
  • Card Grid Create Button
  • ๐Ÿ› ๏ธ Caret symbol
  • ๐Ÿ“ฆ Checkbox
  • Color picker
  • ๐Ÿ› ๏ธ Date & Time picker
  • ๐Ÿ› ๏ธ Base Dropdown (Open towards, picked entry-display and unfold-display.)
  • ๐Ÿ› ๏ธ FileInput Dropzone
  • ๐Ÿ› ๏ธ FileInput Input
  • ๐Ÿ› ๏ธ FileInput Preview (Form data, displays one of three symbols:...)
  • ๐Ÿ› ๏ธ File Symbol
  • ๐Ÿ› ๏ธ Folder Symbol
  • ๐Ÿ› ๏ธ Image-File Symbol (A frame on a thumbnail)
  • ๐Ÿ› ๏ธ Icon
  • ๐Ÿ› ๏ธ Inline create button (Vertical, Horizontal. the one from BL and MediaPicker v3)
  • ๐Ÿ“ฆ Input
  • ๐Ÿ“ฆ Loader
  • ๐Ÿ› ๏ธ Locked part (often used for locking the Alias)
  • ๐Ÿ› ๏ธ Menu item
  • ๐Ÿ› ๏ธ Menu item list
  • ๐Ÿ› ๏ธ More symbol ( three dots )
  • Node Display (Today called: Node-Preview, this is a base component that will be used for creating specific types for Content, Media, Image, File, Folder, DocumentType, User, Member, Form, DataType, etc.)
  • Node Display List
  • ๐Ÿ› ๏ธ Overflow container
  • ๐Ÿ› ๏ธ Password input
  • ๐Ÿ“ฆ Progress bar
  • ๐Ÿ“ฆ Progress circle
  • ๐Ÿ“ฆ Radio
  • Rich text Editor
  • ๐Ÿ“ฆ Single Slider
  • Range Slider
  • ๐Ÿ“ฆ Tag
  • ๐Ÿ“ฆ Table
  • ๐Ÿ“ฆ Toggle
  • TextAreaField
  • Search input

Fragments

  • ๐Ÿ› ๏ธ Dialog
  • Notification
  • Notification List
  • Tooltip
  • Tooltip button (Little i, which can be clicked to get more info)

Navigation

  • ๐Ÿ“ฆ Breadcrumbs
  • Overlay
  • Overlay Manager (ability to stack overlays, left, right, animate in and out)
  • Tree
  • ๐Ÿ“ฆ Tabs
  • Typeahead
  • ๐Ÿ› ๏ธ Pagination