third_party/ot-br-posix/repo/third_party/mdl/repo/src/shadow/README.md

   1 ## Introduction
   2
   3 The Material Design Lite (MDL) **shadow** is not a component in the same sense as an MDL card, menu, or textbox; it is a visual effect that can be assigned to a user interface element. The effect simulates a three-dimensional positioning of the element, as though it is slightly raised above the surface it rests upon &mdash; a positive *z-axis* value, in user interface terms. The shadow starts at the edges of the element and gradually fades outward, providing a realistic 3-D effect.
   4
   5 Shadows are a convenient and intuitive means of distinguishing an element from its surroundings. A shadow can draw the user's eye to an object and emphasize the object's importance, uniqueness, or immediacy.
   6
   7 Shadows are a well-established feature in user interfaces, and provide users with a visual clue to an object's intended use or value. Their design and use is an important factor in the overall user experience.
   8
   9 ### To include an MDL **shadow** effect:
  10
  11 &nbsp;1. Code an element, such as a `<div>`, that is to receive the shadow effect; size and style it as desired, and add any required content.
  12 ```html
  13 <div>
  14 Some content
  15 </div>
  16 ```
  17 &nbsp;2. Add an MDL shadow class to the element using the `class` attribute.
  18 ```html
  19 <div class="mdl-shadow--4dp">
  20 Some content
  21 </div>
  22 ```
  23
  24 The shadowed component is ready for use.
  25
  26 #### Examples
  27
  28 A div with a user-specified class and a small shadow.
  29
  30 ```html
  31 <div class="my-shadow-card mdl-shadow--2dp">Small shadow</div>
  32 ```
  33
  34 A div with a user-specified class and a medium-large shadow.
  35
  36 ```html
  37 <div class="my-shadow-card mdl-shadow--6dp">Medium-large shadow</div>
  38 ```
  39
  40 ## Configuration options
  41
  42 The MDL CSS classes apply various predefined visual shadows to the element. The table below lists the available classes and their effects.
  43
  44 | MDL class | Effect | Remarks |
  45 |-----------|--------|---------|
  46 | `mdl-shadow--2dp` | Assigns a small shadow to the object | Optional; if omitted, no shadow is present |
  47 | `mdl-shadow--3dp` | Assigns a medium-small shadow to the object | Optional; if omitted, no shadow is present |
  48 | `mdl-shadow--4dp` | Assigns a medium shadow to the object | Optional; if omitted, no shadow is present |
  49 | `mdl-shadow--6dp` | Assigns a medium-large shadow to the object | Optional; if omitted, no shadow is present |
  50 | `mdl-shadow--8dp` | Assigns a large shadow to the object | Optional; if omitted, no shadow is present |
  51 | `mdl-shadow--16dp` | Assigns an extra-large shadow to the object | Optional; if omitted, no shadow is present|