Question

我即将编写我个人的“Hello World Firefox OS App”。为了与系统的style guide保持一致，我想使用Mozilla提供的Building Blocks。

由于我希望有可能设置一些偏好，我决定复制drawer example。

虽然示例代码在buildingfirefoxos.com上正常工作，但我自己的代码缺少一些带有封闭边栏的白色背景。我想，我正在努力正确使用Building Blocks。

这是我的源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <title>
            some simple app
        </title>
        <link rel="stylesheet" href="./css/util.css" />
        <link href="./style/headers.css" rel="stylesheet" type="text/css">
        <link href="./style_unstable/progress_activity.css" rel="stylesheet" type="text/css">
        <link href="./style_unstable/drawer.css" rel="stylesheet" type="text/css">

    </head>
    <body  role="application">
        <section data-type="sidebar">
            <header>
                <menu type="toolbar">
                    <a href="#content"><span class="icon icon-add">add</span></a>
                </menu>
                <h1>Title <em>(9)</em></h1>
            </header>
            <nav>
                <ul>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                </ul>
                <h2>Subtitle</h2>
                <ul>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label larger label than the </a></li>
                    <li><a href="#content">label</a></li>
                </ul>
            </nav>
        </section>
        <section role="region" id="main">
            <header>
                <a href="#content"><span class="icon icon-menu">hide sidebar</span></a>
                <a href="#main"><span class="icon icon-menu">show sidebar</span></a>
                <h1>Title</h1>
            </header>
            <progress value="80" max="100"></progress>
            <header>
                <h2>Subtitle</h2>
            </header>
            <article role="main">
                1234
            </article>
        </section>
    </body>
</html>

在这里你可以看到，主要部分与侧边栏重叠（正如预期的那样），但缺少背景或其他东西，隐藏了侧边栏。

Drawer Building Block with closed side bar Drawer Building Block with opened side bar

我是否需要更改一些CSS？我只想使用Building Blocks，因为这可以帮助我减少花在更新上的时间，当构建模块适应新的样式指南时......

提前thx：）

Answer 1

我有同样的问题。对我有用的解决方案是确保我在源中包含更多标签，以便CSS知道它需要采取什么行动。

<section id="drawer" role="region">
  <article class="content scrollable header">
    ...
  </article>
</section>

确保您在那里和正确的地方有上述标签（不要忘记结束标签）。您可以查看Building Blocks来源，看看它们的去向。

Firefox OS Building Blocks的区域部分中缺少背景

1 个答案: