| 兩邊的前次修訂版前次修改
下次修改 | 前次修改
|
| computer:web:component [2018/08/13 14:34] – [Layout] wm | computer:web:component [2025/05/14 14:04] (目前版本) – [Carousel] wm |
|---|
| ======Component====== | ======Component====== |
| | * [[https://open-ui.org/|Open UI]] |
| | * [[https://webawesome.com/|Web Awesome]] |
| | * [[https://storybook.js.org/showcase|Component Encyclopedia]] |
| | * [[https://component.gallery/|The Component Gallery]] |
| | * [[https://inclusive-components.design/|Inclusive Components]] |
| * [[http://tympanus.net/codrops/category/blueprints/|Blueprints]] | * [[http://tympanus.net/codrops/category/blueprints/|Blueprints]] |
| | * [[https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/|A Complete Guide To Accessible Front-End Components]] |
| * [[http://tympanus.net/codrops/2012/12/21/slider-pagination-concept/|Slider Pagination Concept]] | * [[http://tympanus.net/codrops/2012/12/21/slider-pagination-concept/|Slider Pagination Concept]] |
| * [[http://tympanus.net/codrops/2014/05/28/arrow-navigation-styles/|Arrow Navigation Styles]] | * [[http://tympanus.net/codrops/2014/05/28/arrow-navigation-styles/|Arrow Navigation Styles]] |
| * [[http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/|Smooth Vertical or Horizontal Page Scrolling with jQuery]] | * [[http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/|Smooth Vertical or Horizontal Page Scrolling with jQuery]] |
| * [[http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/|Lateral On-Scroll Sliding with jQuery]] | * [[http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/|Lateral On-Scroll Sliding with jQuery]] |
| ===Modal=== | ====Modal==== |
| * [[http://drublic.github.io/css-modal/|CSS Modal]] | * [[http://drublic.github.io/css-modal/|CSS Modal]] |
| * [[http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/|CSS Overlay Techniques]] | * [[http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/|CSS Overlay Techniques]] |
| * [[http://kylefox.ca/jquery-modal/examples/index.html|jQuery Modal]] | |
| * [[https://github.com/mamod/moaModal|Moa Modal]] | * [[https://github.com/mamod/moaModal|Moa Modal]] |
| * [[http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/|Nifty Modal Window Effects]] | * [[http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/|Nifty Modal Window Effects]] |
| * [[http://tympanus.net/codrops/2014/12/08/inspiration-dialog-effects/|Inspiration for Dialog Effects]] | * [[http://tympanus.net/codrops/2014/12/08/inspiration-dialog-effects/|Inspiration for Dialog Effects]] |
| * [[http://tympanus.net/codrops/2014/05/12/morphing-buttons-concept/|Morphing Buttons Concept]] | * [[http://tympanus.net/codrops/2014/05/12/morphing-buttons-concept/|Morphing Buttons Concept]] |
| ===== Slider ===== | ==jQuery== |
| * [[http://cssslider.com/|cssSlider]] | * [[https://github.com/kylefox/jquery-modal|jQuery Modal]] |
| * [[http://tympanus.net/codrops/2014/10/24/wobbly-slideshow-effect/|Wobbly Slideshow Effect]] | * [[http://defunkt.io/facebox/|Facebox]] |
| * [[http://tympanus.net/codrops/2011/01/03/parallax-slider/|Parallax Slider with jQuery]] | |
| * [[http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/|Create Featured Content Slider Using jQuery UI]] | |
| * [[http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/|Parallax Content Slider with CSS3 and jQuery]] | |
| * [[http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/|Fluid CSS3 Slideshow with Parallax Effect]] | |
| * [[http://tympanus.net/codrops/2014/03/13/tilted-content-slideshow/|Tilted Content Slideshow]] | |
| * [[http://tympanus.net/codrops/2014/03/18/inspiration-for-item-transitions/|Inspiration for Item Transitions]] | |
| * [[http://tympanus.net/codrops/2014/06/26/draggable-dual-view-slideshow/|Draggable Dual-View Slideshow]] | |
| * [[http://tympanus.net/codrops/2014/11/21/perspective-mockup-slideshow/|Perspective Mockup Slideshow]] | |
| ==== Carousel ==== | |
| * [[https://pawelgrzybek.github.io/siema/|Siema]] | |
| ====Button==== | ====Button==== |
| * [[http://stopdesign.com/eg/buttons/3.0/code.html|Custom Buttons]] | * [[http://stopdesign.com/eg/buttons/3.0/code.html|Custom Buttons]] |
| * [[http://code.google.com/p/sexybuttons/|Sexy Buttons]] | * [[http://code.google.com/p/sexybuttons/|Sexy Buttons]] |
| | * [[https://github.com/timwright12/polybutton|Polybutton]] |
| * [[http://codepen.io/bennettfeely/pen/ErFGv|Twitter Button Concept]] | * [[http://codepen.io/bennettfeely/pen/ErFGv|Twitter Button Concept]] |
| * [[http://css-tricks.com/3d-button-parallax/|3D Button Parallax]] | * [[http://css-tricks.com/3d-button-parallax/|3D Button Parallax]] |
| * [[http://tympanus.net/codrops/2013/06/13/creative-button-styles/|Creative Button Styles]] | * [[http://tympanus.net/codrops/2013/06/13/creative-button-styles/|Creative Button Styles]] |
| * [[http://tympanus.net/codrops/2013/12/12/progress-button-styles/|Progress Button Styles]] | * [[http://tympanus.net/codrops/2013/12/12/progress-button-styles/|Progress Button Styles]] |
| * [[http://zocialbuttons.com/|Zocial]] | * [[https://github.com/adamstac/zocial|Zocial]] |
| * [[http://alexwolfe.github.io/Buttons/|Buttons]] | * [[http://alexwolfe.github.io/Buttons/|Buttons]] |
| * [[https://github.com/nashvail/Quttons|Quttons]] | * [[https://github.com/nashvail/Quttons|Quttons]] |
| * [[https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html|The Tale of Three Spinners]] | * [[https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html|The Tale of Three Spinners]] |
| * [[https://connoratherton.com/loaders|Loaders.css]] | * [[https://connoratherton.com/loaders|Loaders.css]] |
| | * [[https://uiball.com/loaders|Loaders]] |
| ====Notification==== | ====Notification==== |
| | * [[https://sonner.emilkowal.ski/|Sonner]] (Toast, React) |
| | * [[https://github.com/ardeora/solid-toast|Solid Toast]] |
| * [[http://tympanus.net/codrops/2014/07/23/notification-styles-inspiration/|Notification Styles Inspiration]] | * [[http://tympanus.net/codrops/2014/07/23/notification-styles-inspiration/|Notification Styles Inspiration]] |
| | * [[https://adamsilver.io/articles/the-problem-with-snackbars-and-what-to-use-instead/|The problem with snackbars and what to use instead]] |
| ====Tooltip==== | ====Tooltip==== |
| * [[http://tympanus.net/codrops/2014/10/07/tooltip-styles-inspiration/|Tooltip Styles Inspiration]] | * [[http://tympanus.net/codrops/2014/10/07/tooltip-styles-inspiration/|Tooltip Styles Inspiration]] |
| ====Upload==== | ====Upload==== |
| * [[http://markusslima.github.io/bootstrap-filestyle/|Bootstrap FileStyle]] | * [[http://markusslima.github.io/bootstrap-filestyle/|Bootstrap FileStyle]] |
| | ==== Tree ==== |
| | * [[https://github.com/brimdata/react-arborist|React Arborist]] |
| | =====Layout===== |
| ====Grid==== | ====Grid==== |
| * [[http://tympanus.net/codrops/2013/06/19/dynamic-grid-with-transitions/|Dynamic Grid with Transitions]] | * [[http://tympanus.net/codrops/2013/06/19/dynamic-grid-with-transitions/|Dynamic Grid with Transitions]] |
| * [[http://tympanus.net/codrops/2014/05/15/recreating-the-design-samsung-grid-loading-effect/|Recreating the “Design Samsung” Grid Loading Effect]] | * [[http://tympanus.net/codrops/2014/05/15/recreating-the-design-samsung-grid-loading-effect/|Recreating the “Design Samsung” Grid Loading Effect]] |
| * [[http://tympanus.net/codrops/2014/11/11/drag-and-drop-interaction-ideas/|Drag and Drop Interaction Ideas]] | * [[http://tympanus.net/codrops/2014/11/11/drag-and-drop-interaction-ideas/|Drag and Drop Interaction Ideas]] |
| | ===== Slider ===== |
| | * [[http://cssslider.com/|cssSlider]] |
| | * [[http://tympanus.net/codrops/2014/10/24/wobbly-slideshow-effect/|Wobbly Slideshow Effect]] |
| | * [[http://tympanus.net/codrops/2011/01/03/parallax-slider/|Parallax Slider with jQuery]] |
| | * [[http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/|Create Featured Content Slider Using jQuery UI]] |
| | * [[http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/|Parallax Content Slider with CSS3 and jQuery]] |
| | * [[http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/|Fluid CSS3 Slideshow with Parallax Effect]] |
| | * [[http://tympanus.net/codrops/2014/03/13/tilted-content-slideshow/|Tilted Content Slideshow]] |
| | * [[http://tympanus.net/codrops/2014/03/18/inspiration-for-item-transitions/|Inspiration for Item Transitions]] |
| | * [[http://tympanus.net/codrops/2014/06/26/draggable-dual-view-slideshow/|Draggable Dual-View Slideshow]] |
| | * [[http://tympanus.net/codrops/2014/11/21/perspective-mockup-slideshow/|Perspective Mockup Slideshow]] |
| | * [[http://tympanus.net/codrops/2013/09/05/sliding-horizontal-layout/|Sliding Horizontal Layout]] |
| | ==== Carousel ==== |
| | * [[https://pawelgrzybek.github.io/siema/|Siema]] |
| | * [[https://www.embla-carousel.com/|Embla Carousel]] |
| =====Table===== | =====Table===== |
| | * [[https://tanstack.com/table/|TanStack Table]] |
| * [[http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/|Sticky Table Headers & Columns]] | * [[http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/|Sticky Table Headers & Columns]] |
| =====Form===== | =====Form===== |
| * [[http://tympanus.net/codrops/2014/07/30/fullscreen-form-interface/|Fullscreen Form Interface]] | * [[http://tympanus.net/codrops/2014/07/30/fullscreen-form-interface/|Fullscreen Form Interface]] |
| ====Input==== | ====Input==== |
| | * [[https://imask.js.org/|imask]] |
| * [[http://tympanus.net/codrops/2014/11/04/simple-morphing-search/|Simple Morphing Search]] | * [[http://tympanus.net/codrops/2014/11/04/simple-morphing-search/|Simple Morphing Search]] |
| ====Checkbox==== | ====Checkbox==== |
