组件

各种有用的、额外的组件,这些组件不包含在 UIkit 本身中。

UIkit 提供一些高级组件,这些组件不包含在 UIkit 核心框架中。通常,您不会在日常网站中使用这些组件。它们包括诸如可嵌套和日期选择器之类的东西,如果您创建诸如管理区域之类的高级用户界面,它们将派上用场。


用法

在您下载 UIkit 后,您可以在单独的 /css/js 文件夹中找到所有附加组件

/css
    /components
        <!-- Component with the basic style -->
        autocomplete.css
        autocomplete.min.css

        <!-- Component with the Gradient style -->
        autocomplete.gradient.css
        autocomplete.gradient.min.css

        <!-- Component with the Almost flat style -->
        autocomplete.almost-flat.css
        autocomplete.almost-flat.min.css
        ...

/js
    /components
        <!-- JavaScript of the component and minified version -->
        autocomplete.js
        autocomplete.min.js
        ...

要使用其中一个组件,您只需将 CSS 和组件的 JavaScript 添加到文档的头部。

示例

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>
        <!-- Autocomplete CSS -->
        <link rel="stylesheet" href="components/autocomplete.css">
        <!-- Autocomplete Javascript -->
        <script src="components/autocomplete.js"></script>
    </head>
    <body>
    </body>
</html>

测试

UIkit 为每个组件提供测试文件。这些页面中的每一个都包含其组件的测试用例,并为您提供开箱即用支持的所有可能性的概述。

在 ZIP 文件中,您将找到所有 UIkit CSS、JavaScript 和字体文件,可用于您的项目。为了保持 UIkit 核心框架的简洁,它几乎没有任何样式。因此,我们提供了两个附加的发行版,分别具有渐变和几乎平坦的样式。每种样式都以单个 CSS 文件以及缩小版的形式提供。还包括一些组件,这些组件不属于核心框架,可以单独添加到您的项目中。

转到测试