stylesheet.html

来自「维信SDK文档。源码要求为至少5个C或Java源码」· HTML 代码 · 共 658 行 · 第 1/2 页

    <dt><code>border-type: rectangle</code> <i>&lt;color&gt;</i><code>;</code></dt>
    <dd>
      Border is drawn with solid color.
    </dd>  

    <dt><code>border-type: rectangle</code> 
        <i>&lt;top-color&gt;</i>
        <i>&lt;right-color&gt;</i>
        <i>&lt;bottom-color&gt;</i>
        <i>&lt;left-color&gt;</i>
        <code>;</code></dt>
    <dd>
      Border is drawn like classic beweled button.
    </dd>  

    <dt>
      <a name="border_grid_8"></a>
      <code>border-type: image</code> <i>&lt;image&gt;</i> <code>;</code>
    </dt>
    <dd>
      Given image is split into 9 regions according
      to border dimensions, as suggested by diagram, and
      the regions are used when filling up the border area.
      <table cellspacing=1 cellpadding=0 border=0  width=150>
      <tr>
        <td align=center bgcolor=#c0c0c0>1<td>
        <td align=center width=120 bgcolor=#c0c0c0>2<td>
        <td align=center bgcolor=#c0c0c0>3<td>
      </tr>   
      <tr>
        <td align=center bgcolor=#c0c0c0>4<td>
        <td height=50 align=center bgcolor=#c0c0c0>5<td>
        <td align=center bgcolor=#c0c0c0>6<td>
      </tr>   
      <tr>
        <td align=center bgcolor=#c0c0c0>7<td>
        <td align=center bgcolor=#c0c0c0>8<td>
        <td align=center bgcolor=#c0c0c0>9<td>
      </tr>   
      </table>
      Regions 1, 3, 7 and 9 are used to fill corners of border area.<br>

      Regions 2, 8 are used to horizontally fill the upper and lower border areas,
      regions are repeated/clipped as needed.<br>

      Regions 4, 6 are used to vertically to fill the left and right borders areas,
      regions are repeated/clipped as needed.<br>
      
      Region 5 is ignored.
    </dd>
  </dl>  
  </blockquote>



  <h4>Padding</h4>
  
  <ul>
    <li><code>padding</code>:
      <i>&lt;top-dim&gt;</i>
      <i>&lt;right-dim&gt;</i> 
      <i>&lt;bottom-dim&gt;</i> 
      <i>&lt;left-dim&gt;</i><code>;</code> </li>
    <li><code>padding-left</code>: <i>&lt;dim&gt;</i><code>;</code>  </li>
    <li><code>padding-right</code>: <i>&lt;dim&gt;</i><code>;</code>  </li>
    <li><code>padding-top</code>: <i>&lt;dim&gt;</i><code>;</code>  </li>
    <li><code>padding-bottom</code>: <i>&lt;dim&gt;</i><code>;</code>  </li>
  </ul>



  <h4>Background</h4>
  <blockquote>
  <dl>
    <dt>
      <code>background: none;</code>
    </dt>
    <dd>
      No background is drawn.
    </dd>  

    <dt>
      <code>background: solid</code> <i>&lt;color&gt;</i><code>;</code>
    </dt>
    <dd>
      Background is drawn with solid color.
    </dd>  

    <dt>
      <code>background: hgradient </code> 
      <i>&lt;left-color&gt;</i>
      <i>&lt;right-color&gt;</i>
      <code>;</code>
    </dt>
    <dd>
      Background is drawn as horizontal gradient.
    </dd>  

    <dt>
      <code>background: vgradient </code> 
      <i>&lt;top-color&gt;</i>
      <i>&lt;bottom-color&gt;</i>
      <code>;</code>
    </dt>
    <dd>
      Background is drawn as vertical gradient.
    </dd>  

    <dt>
      <code>background: image </code> 
      <i>&lt;image&gt;</i>
      ( <code>transparent</code> | <i>&lt;color&gt;</i> )
      <i>&lt;alignment&gt;</i>
      ( <code>repeat-x</code>, <code>repeat-y</code> | <code>no-repeat</code>)
      <code>;</code>
    </dt>
    <dd>
      Background is drawn using given image. Image is aligned to
      given position on target area and repeated as specified.
      Remaining area is either left transparent or filled with specified color.
    </dd>  

    <dt>
      <code>background: grid8</code> 
      <i>&lt;image&gt;</i> 
      <code>transparent</code>
      <i>&lt;top-dim&gt;</i> 
      <i>&lt;right-dim&gt;</i> 
      <i>&lt;bottom-dim&gt;</i> 
      <i>&lt;left-dim&gt;</i> 
      <code>;</code>
    </dt>  
    <dd>
      Given image is split into 9 regions by given dimensions and drawn like
      <a href="stylesheet.html#border_grid_8">image border</a>.
      Padding and component areas area not drawn.
    </dd>  
    
    <dt>
      <code>background: grid8</code> 
      <i>&lt;image&gt;</i> 
      <code>automatic</code>
      <i>&lt;top-dim&gt;</i> 
      <i>&lt;right-dim&gt;</i> 
      <i>&lt;bottom-dim&gt;</i> 
      <i>&lt;left-dim&gt;</i> 
      <code>;</code>
    </dt>  
    <dd>
      Given image is split into 9 regions by given dimensions and drawn like
      <a href="stylesheet.html#border_grid_8">image border</a>.
      Padding and component areas are filled with color picked
      from first (top left) pixel of region 5.
    </dd>  
    
    
    <dt>
      <code>background: grid8</code> 
      <i>&lt;image&gt;</i> 
      <i>&lt;color&gt;</i> 
      <i>&lt;top-dim&gt;</i> 
      <i>&lt;right-dim&gt;</i> 
      <i>&lt;bottom-dim&gt;</i> 
      <i>&lt;left-dim&gt;</i> 
      <code>;</code><br>
    </dt>
    <dd>
      Given image is split into 9 regions by given dimensions and drawn like
      <a href="stylesheet.html#border_grid_8">image border</a>.
      Padding and component areas are filled with given color.
    </dd>  
    
    <dt>
      <code>background: grid9</code> 
      <i>&lt;image&gt;</i> 
      <i>&lt;top-dim&gt;</i> 
      <i>&lt;right-dim&gt;</i> 
      <i>&lt;bottom-dim&gt;</i> 
      <i>&lt;left-dim&gt;</i> 
      <code>;</code><br>
    </dt>
    <dd>
      Given image is split into 9 regions by given dimensions and drawn like
      <a href="stylesheet.html#border_grid_8">image border</a>.
      Padding and component areas are filled using the region 5 
      of image, repeating and clipping as needed.
    </dd>  
  </dl>  
  </blockquote>

  <h4>Colors</h4>
  <p> 
   Component specific customization. See individual component
   for description. Note that there is overlap between
   color slots, style compiler will issue warning 
   if it detects conflict.
  </p>
  <ul>
    <li><code>color</code>: <i>&lt;color&gt;</i><code>;</code>  </li>
    <li><code>color-1</code>: <i>&lt;color&gt;</i><code>;</code>  </li>
    <li><code>color-2</code>: <i>&lt;color&gt;</i><code>;</code>  </li>
    <li><code>color-3</code>: <i>&lt;color&gt;</i><code>;</code>  </li>
    <li><code>color-4</code>: <i>&lt;color&gt;</i><code>;</code>  </li>
    
    <li><code>cursor-color</code>: <i>&lt;color&gt;</i><code>;</code>  
      <br>See <code><a href="Input.html">Text</a></code> 
    </li>
  </ul>

  <h4>Images</h4>
  <p> 
   Component specific customization. See individual component
   for description.
  </p>
  <ul>
    <li><code>image</code>: <i>&lt;image&gt;</i><code>;</code>  </li>
    <li><code>image-1</code>: <i>&lt;image&gt;</i><code>;</code>  </li>
    <li><code>image-2</code>: <i>&lt;image&gt;</i><code>;</code>  </li>
    <li><code>image-3</code>: <i>&lt;image&gt;</i><code>;</code>  </li>
    <li><code>image-4</code>: <i>&lt;image&gt;</i><code>;</code>  </li>
  </ul>

  <h4>Fonts</h4>
  <p> 
   Component specific customization. See individual component
   for description.
  </p>
  <ul>
    <li><code>font</code>: <i>&lt;font&gt;</i><code>;</code>  </li>
    <li><code>font-1</code>: <i>&lt;font&gt;</i><code>;</code>  </li>
    <li><code>font-2</code>: <i>&lt;font&gt;</i><code>;</code>  </li>
    <li><code>font-3</code>: <i>&lt;font&gt;</i><code>;</code>  </li>
    <li><code>font-4</code>: <i>&lt;font&gt;</i><code>;</code>  </li>
  </ul>

  <h4>Arguments</h4>
  <p> 
   Component specific customization. See individual component
   for description. Note that there is overlap between
   argument slots, style compiler will issue warning 
   if it detects conflict.
  </p>
  <ul>
    <li><code>argument</code>: <i>&lt;integer&gt;</i><code>;</code>  </li>
    <li><code>argument-1</code>: <i>&lt;integer&gt;</i><code>;</code>  </li>
    <li><code>argument-2</code>: <i>&lt;integer&gt;</i><code>;</code>  </li>
    <li><code>argument-3</code>: <i>&lt;integer&gt;</i><code>;</code>  </li>
    <li><code>argument-4</code>: <i>&lt;integer&gt;</i><code>;</code>  </li>
    
    <li><code>hspacing</code>: <i>&lt;dim&gt;</i><code>;</code> 
      <br>See <code><a href="Flow.html">Flow</a></code> 
    </li>
      
    <li><code>vspacing</code>: <i>&lt;dim&gt;</i><code>;</code> 
      <br>See <code><a href="Flow.html">Flow</a></code> 
    </li>
      
    <li><code>line-spacing</code>: <i>&lt;dim&gt;</i><code>;</code> 
      <br>See <code><a href="Text.html">Text</a></code> 
    </li>
      
    <li><code>line-alignment: left | hcenter | right;</code> 
      <br>See <code><a href="Text.html">Text</a></code> 
    </li>
      
    <li><code>label-spacing</code>: <i>&lt;dim&gt;</i><code>;</code>
      <br>See <code><a href="Label.html">Label</a></code> 
    </li>
       
    <li><code>label-icon-orientation: left | right;</code> 
      <br>See <code><a href="Label.html">Label</a></code> 
    </li>
      
    <li><code>indicator-background:</code> <i>&lt;color&gt;</i><code>;</code> 
      <br>See <code><a href="Progress.html">Progress</a></code> 
    </li>
      
    <li><code>indicator-foreground:</code> <i>&lt;color&gt;</i><code>;</code>
      <br>See <code><a href="Progress.html">Progress</a></code> 
    </li>
       
    <li><code>indicator-height:</code> <i>&lt;dim&gt;</i><code>;</code>
      <br>See <code><a href="Progress.html">Progress</a></code> 
    </li>
      
    <li><code>ticker-speed:</code> <i>&lt;integer&gt;</i><code>;</code> 
      <br>See <code><a href="Ticker.html">Ticker</a></code> 
    </li>
      
    <li><code>ticker-mode: loop | bounce;</code> 
      <br>See <code><a href="Ticker.html">Ticker</a></code> 
    </li>
      
  </ul>

  <h4>Default style</h4>
  <p> 
    Empty style contains following properties:
<pre>
    margin: 0 0 0 0;
    border: 0 0 0 0;
    border-type: none;
    padding: 0 0 0 0;
    background: none;
    font-1: proportional medium plain;
    font-2: proportional medium plain;
    font-3: proportional medium plain;
    font-4: proportional medium plain;
    color-1: black;
    color-2: black;
    color-3: black;
    color-4: black;
    argument-1: 0;
    argument-2: 0;
    argument-3: 0;
    argument-4: 0;
    width: 0;
    height: 0;
    align: top left;
</pre>
  </p>
  
  <br>
  <br>

    
</body>
</html>