跳转到主要内容

章节web.dev 学习文章

Patterns

114 页更新于 2 天前

开始阅读

本章内容114

  1. 01 Animation patterns Welcome to our growing collection of animation patterns. These patterns try to demonstrate how you can crea... 2 天前
  2. 02 Split Text - Animated Letters Create infinitely animated letter effects that respect user's motion preferences. Full article · Video on Y... 2 天前
  3. 03 Split Text - Animated Words Create infinitely animated word effects that respect user's motion preferences. Full article · Video on You... 2 天前
  4. 04 Split Text - Hover Letters Create interactive letter effects that respect user's motion preferences. Full article · Video on YouTube ·... 2 天前
  5. 05 Split Text - Hover Words Create interactive word effects that respect user's motion preferences. Full article · Video on YouTube · S... 2 天前
  6. 06 How to copy images Many modern browsers support copying images to the clipboard in the formats PNG and SVG. Other formats are ... 2 天前
  7. 07 How to copy text Cutting and pasting text is one of the most commonly used features of apps in general and desktop applicati... 2 天前
  8. 08 How to paste files Pasting files into the browser consists of using the paste event of the HTMLElement. Using the HTMLEleme... 2 天前
  9. 09 How to paste images Using the Async Clipboard API To read images from the user's clipboard programmatically, that is, after a b... 2 天前
  10. 10 How to paste text Using the Async Clipboard API To read text from the user's clipboard programmatically, for example, after a... 2 天前
  11. 11 Component patterns Welcome to our growing collection of component patterns. These can provide inspiration, accessibility requi... 2 天前
  12. 12 Breadcrumbs This pattern shows how to create a responsive and accessible breadcrumbs component for users to navigate yo... 2 天前
  13. 13 Buttons This pattern shows how to style the different buttons types of the web. Full article · Video on YouTube · S... 2 天前
  14. 14 Carousel This pattern shows how to create a color-adaptive, responsive, and accessible carousel component. {% Aside ... 2 天前
  15. 15 Dialog This pattern shows how to create color-adaptive, responsive, and accessible mini and mega modals with the ... 2 天前
  16. 16 Game Menu This pattern shows how to create a mouse and keyboard accessible 3D game menu. Full article · Video on YouT... 2 天前
  17. 17 Loading Bar This pattern shows how to build a color adaptive and accessible loading bar with the <progress> element. F... 2 天前
  18. 18 Media Scroller This pattern shows how to create horizontal scrolling experiences for the web that are minimal, responsive,... 2 天前
  19. 19 Multi-Select This pattern shows how to build a responsive, adaptive, and accessible, multiselect component for sort and ... 2 天前
  20. 20 Settings This pattern shows how to build a settings component that is responsive, supports multiple device inputs, a... 2 天前
  21. 21 Sidenav This pattern shows how to build a component for the web that is responsive, stateful, supports keyboard nav... 2 天前
  22. 22 Split Buttons This pattern shows how to build an adaptive and accessible split button component. Full article · Video on ... 2 天前
  23. 23 Stories This pattern shows how to build a Stories component for the web that is responsive, supports keyboard navig... 2 天前
  24. 24 SVG Favicon This pattern shows how to build a dark and light theme adaptive favicon with SVG. Full article · Video on Y... 2 天前
  25. 25 Switch This pattern shows how to create a responsive, adaptive and accessible switch component. Full article · Vid... 2 天前
  26. 26 Tabs This pattern shows how to create a tab component with grid and scroll snap points. Full article · Video on ... 2 天前
  27. 27 Toast This pattern shows how to build an adaptive and accessible toast component. Full article · Video on YouTube... 2 天前
  28. 28 Example Pattern Set Code pattern is a snippet of code, representing a solution to a typical problem. Patterns are organized as ... 2 天前
  29. 29 demo layout: demo patternId: example-set/example-pattern draft: true noindex: true 2 天前
  30. 30 Example pattern Code pattern is a snippet of code, representing a solution to a typical problem. 2 天前
  31. 31 Full HTML demo pattern The HTML for the demo page can differ from the code samples displayed in the code pattern tabs. To achieve ... 2 天前
  32. 32 demo patternId: example-set/graph layout: demo noindex: true pageScripts: https://code.highcharts.com/highcharts... 2 天前
  33. 33 Graph demo pattern Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolo... 2 天前
  34. 34 demo layout: demo noindex: true patternId: example-set/image-demo {% Img src="image/admin/3lZosaL1YXafLn4ZRINl... 2 天前
  35. 35 Image demo pattern It is possible to use an image (static or animated) as a demo in a CodePattern. Use an Img shortcode wrapp... 2 天前
  36. 36 How to drag and drop directories The HTML Drag and Drop interfaces enable web applications to accept dragged and dropped files on a web page... 2 天前
  37. 37 How to drag and drop files The HTML Drag and Drop interfaces enable web applications to accept dragged and dropped files on a web page... 2 天前
  38. 38 How to handle files opened from the file explorer Using the File Handling API First, declare the file_handlers attribute in your web app manifest. The File ... 2 天前
  39. 39 How to open a directory Dealing with directories is not something you will cope with on a daily basis, but occasionally the use cas... 2 天前
  40. 40 How to open one or multiple files Dealing with files is one of the most common operations for apps on the web. Traditionally, users needed to... 2 天前
  41. 41 How to receive shared files Using the Web Share Target API First, declare a share_target in your web app manifest that lists an actio... 2 天前
  42. 42 How to save a file Dealing with files is one of the most common operations for apps on the web. Traditionally, users needed to... 2 天前
  43. 43 How to share files Using the Web Share API's share() method To share files, call navigator.share(). Note that you should alwa... 2 天前
  44. 44 Layout patterns Welcome to our growing collection of CSS layout patterns. Most of these patterns use CSS grid and flexbox t... 2 天前
  45. 45 demo patternId: layout/aspect-ratio-image-card layout: demo 2 天前
  46. 46 Aspect ratio image card With the aspect-ratio property, as you resize the card, the green visual block maintains this 16 x 9 aspec... 2 天前
  47. 47 Autobot A centering technique where an element pushes equally from all edges of a flex container. Best for quick ce... 2 天前
  48. 48 demo patternId: layout/clamping-card layout: demo 2 天前
  49. 49 Clamping card In this demo, you are setting the width using clamp() like so: width: clamp(<min>, <actual>, <max>). This... 2 天前
  50. 50 demo patternId: layout/container-query-card layout: demo 2 天前
  51. 51 Container query card ⚠️ {% Aside 'warning' %} This demo uses an experimental web technology that is not currently supported in all ... 2 天前
  52. 52 Content Center A centering technique that is only a few lines of CSS, works great for many elements, but has the side effe... 2 天前
  53. 53 demo patternId: layout/deconstructed-pancake layout: demo 2 天前
  54. 54 Deconstructed pancake This is a common layout for marketing sites, for example, which may have a row of three items, usually with... 2 天前
  55. 55 Fluffy Center A centering technique that puts the content in the center via equal padding around all its sides. See the f... 2 天前
  56. 56 Gentle Flex A centering technique that only aligns content and doesn't change their size during the process. See the fu... 2 天前
  57. 57 demo patternId: layout/holy-grail layout: demo 2 天前
  58. 58 Holy grail layout For this classic holy grail layout, there is a header, footer, left sidebar, right sidebar, and main conten... 2 天前
  59. 59 demo patternId: layout/line-up layout: demo 2 天前
  60. 60 Line up The main point demonstrated here is the use of justify-content: space-between, which places the first and ... 2 天前
  61. 61 demo patternId: layout/pancake-stack layout: demo 2 天前
  62. 62 Pancake stack Unlike the deconstructed pancake, this example does not wrap its children when the screen size changes. Com... 2 天前
  63. 63 Pop n' Plop A centering technique for overlaying other content. See the full article for many more details about this t... 2 天前
  64. 64 demo patternId: layout/repeat-auto-minmax layout: demo 2 天前
  65. 65 RAM (Repeat, Auto, Minmax) For this seventh example, combine some of the concepts you've already learned about to create a responsive ... 2 天前
  66. 66 demo patternId: layout/sidebar-says layout: demo 2 天前
  67. 67 Sidebar says This demo takes advantage of the minmax() function for grid layouts. In the demo this function is used to s... 2 天前
  68. 68 demo patternId: layout/super-centered layout: demo 2 天前
  69. 69 Super centered Use place-items: center to center an element within its parent. First specify grid as the display method, ... 2 天前
  70. 70 demo patternId: layout/twelve-span-grid layout: demo 2 天前
  71. 71 12-span grid Another classic: the 12-span grid. You can quickly write grids in CSS with the repeat() function. Using: ... 2 天前
  72. 72 Media patterns Welcome to our collection of media patterns. These intend to help you create modern media experiences on th... 2 天前
  73. 73 How to add effects to audio The Web Audio API uses the AudioContext() interface to manage sources, filters, and destinations. Once you... 2 天前
  74. 74 How to customize media notifications The Media Session API allows websites to let users know what's currently playing in their browser and contr... 2 天前
  75. 75 How to process audio from the user's microphone Accessing the user's camera and microphone is possible on the web platform with the Media Capture and Strea... 2 天前
  76. 76 How to record audio from the user's microphone Accessing the user's camera and microphone is possible on the web platform with the Media Capture and Strea... 2 天前
  77. 77 How to add Picture-in-Picture to video controls The Picture-in-Picture (PiP) Web API allows websites to create a floating video window always on top of oth... 2 天前
  78. 78 How to record the user's screen Sharing tabs, windows, and screens is possible on the web platform with the Screen Capture API. The getDis... 2 天前
  79. 79 Theming patterns Welcome to our growing collection of theming patterns. These intend to help you create adaptive color syste... 2 天前
  80. 80 Color Schemes with HSL This pattern shows how to go beyond light and dark themes with CSS custom properties. Full article · Video ... 2 天前
  81. 81 Light and Dark HSL Starter Kit This pattern shows how to use HSL to create harmonious light and dark themes with CSS custom properties. 2 天前
  82. 82 Dark and Light Theme Switch This pattern shows how to create a switch for your website that allows changing between light and dark them... 2 天前
  83. 83 How to create an app badge Badges are used to convey non-urgent information to the user. For example, they are used to indicate the st... 2 天前
  84. 84 How to access contacts from the address book Sometimes you want to let users of your app select one of their contacts to message via an email or chat ap... 2 天前
  85. 85 How to use multiple screens Using window.getScreenDetails() To make sure your browser supports the getScreenDetails() method, first c... 2 天前
  86. 86 How to periodically synchronize data in the background Periodic background sync lets you show fresh content when a progressive web app or service worker-backed pa... 2 天前
  87. 87 How to add Richer Install UI App stores provide a space for developers to showcase their apps before installation, with screenshots and ... 2 天前
  88. 88 How to let the user share the website they are on Letting the user share the website they are on is a common web apps pattern that you can find on many news ... 2 天前
  89. 89 How to create app shortcuts App shortcuts help users quickly start common or recommended tasks within your web app. Easy access to thos... 2 天前
  90. 90 Carousels A carousel is a UX component that displays content in a slideshow-like manner. Large, above-the-fold carous... 2 天前
  91. 91 Autoplay carousel This carousel uses CSS scroll snap to create smooth, performant slide transitions that do not cause layout ... 2 天前
  92. 92 Fonts If a web font has not been loaded, browsers typically delay rendering any text that uses the web font. In m... 2 天前
  93. 93 demo patternId: web-vitals-patterns/fonts/fonts-self-hosted Self-hosted Fonts ... 2 天前
  94. 94 Self-hosted fonts Self-hosted fonts are font files that are served from your own servers - rather than those of a third-party... 2 天前
  95. 95 demo patternId: web-vitals-patterns/fonts/fonts-third-party Third-party ... 2 天前
  96. 96 Third-party fonts It is incredibly important to deliver fonts quickly: faster font delivery not only means that text will be ... 2 天前
  97. 97 Images Images can cause layout shifts if they load after the surrounding page has already been rendered. This issu... 2 天前
  98. 98 demo patternId: web-vitals-patterns/images/img-tag <img> tag ... 2 天前
  99. 99 <img> tag Setting the width and height attributes on <img> tags helps prevent layout shifts. This information allo... 2 天前
  100. 100 demo patternId: web-vitals-patterns/images/responsive-img-density Responsive Images ... 2 天前
  101. 101 Responsive images and art direction Responsive images are often implemented using the srcset attribute. The srcset attribute is a comma-separa... 2 天前
  102. 102 Infinite scroll Infinite scroll is a UX pattern where content is continuously added to the page as a user scrolls. Some imp... 2 天前
  103. 103 Infinite scroll This infinite scroll implementation is designed to ensure that there are never any layout shifts - regardle... 2 天前
  104. 104 Banners and notices Banners and notices are a common source of layout shifts. Inserting a banner into the DOM after the surroun... 2 天前
  105. 105 Animated footer This animated footer slides-in from the bottom of the page. The effect is created by using the CSS transfor... 2 天前
  106. 106 Modal Modals can be used as an alternative to banner notices. Because modals get displayed on top of existing pag... 2 天前
  107. 107 Sticky footer Sticky footers are a popular way of displaying notices. Notices placed in the footer are less likely to obs... 2 天前
  108. 108 Placeholders Placeholders reserve space for future page content. Placeholders can be used as a solution to layout shifts... 2 天前
  109. 109 Placeholders Creating placeholders for page content can sometimes be as simple as adding a background effect to existing... 2 天前
  110. 110 Video Video can impact Web Vitals by being a source of layout shifts. In addition, in some scenarios large video ... 2 天前
  111. 111 demo patternId: web-vitals-patterns/video/video Video L... 2 天前
  112. 112 Video When optimizing video for Core Web Vitals make sure to set the width and height attributes on the <video>... 2 天前
  113. 113 demo patternId: web-vitals-patterns/video/video-gif GIF-style video ... 2 天前
  114. 114 GIF-style video Animated GIFs can be 5-20x larger than the equivalent MP4 video. However, MP4 videos can be configured to l... 2 天前