reluem/contao-uikit

一个用于集成UIkit框架的contao扩展包。

安装: 124

依赖: 0

建议者: 0

安全性: 0

星标: 1

关注者: 1

分支: 0

公开问题: 1

类型:contao-bundle

0.5.3 2023-01-02 14:44 UTC

This package is auto-updated.

Last update: 2024-09-30 01:40:39 UTC


README

添加到根目录的composer.json

"require" : {
    "oomphinc/composer-installers-extender": "^2.0",
    },
"extra": {
    "installer-types": [
      "npm-asset"
    ],
    "installer-paths": {
      "assets/{$name}/": [
        "type:npm-asset"
      ]
    }
  },
  "repositories": [
    {
      "type": "composer",
      "url": "https://asset-packagist.org"
    }
  ]

此模块的composer.json中包含自动加载UIkit资源的片段。您需要在根json中具有上述提到的要求,以便从npm-asset加载资源。

"require" : {
    "npm-asset/uikit": "~3.0"
    },

接下来,在您的文件目录中创建一个自定义的.scss主题,并在您的Contao页面布局中引用它。您的自定义文件将覆盖UIkit核心中的变量,使您能够更改例如颜色或字体。

### Your Custom SCSS file

// 1. Your custom variables and variable overwrites.
// e.g. $global-primary-background: rgb(0, 48, 135);

// 2. Import default variables and available mixins.
@import "../../assets/uikit/src/scss/variables-theme.scss";
@import "../../assets/uikit/src/scss/mixins-theme.scss";

// 3. Your custom mixin overwrites.

// 4. Import UIkit.
@import "../../assets/uikit/src/scss/uikit-theme.scss";

// 5. Other Custom SCSS

特性

模块

  • 带有模块选择器的导航栏
  • 列集
  • 用于新闻订阅的华丽警报

内容元素

  • 英雄图片
  • 带按钮的链接预告

其他

  • 图标插入标签
  • JS自动移动到DOM末尾