如何通过UIkit实现组件到组件的嵌套？

通过UIkit实现组件到组件的嵌套可以通过以下步骤实现：

首先，确保已经引入了UIkit框架的CSS和JavaScript文件到你的项目中。
在HTML文件中，使用UIkit提供的组件标签来创建你的组件。例如，你可以使用<uk-grid>标签创建一个网格布局组件。
在需要嵌套组件的地方，使用UIkit提供的data-uk-*属性来指定要嵌套的组件类型和配置。例如，你可以使用data-uk-grid属性来嵌套一个网格布局组件。
在嵌套的组件中，可以使用UIkit提供的其他组件标签来创建更多的组件。例如，在网格布局组件中，你可以使用<uk-width-*>标签来创建列。
可以通过在嵌套组件的标签上添加data-uk-*属性来配置和自定义组件的行为和样式。例如，你可以使用data-uk-width="1-2@s"属性来指定在小屏幕上列的宽度为一半。

以下是一个示例代码，演示了如何通过UIkit实现组件到组件的嵌套：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="path/to/uikit.min.css" />
  <script src="path/to/uikit.min.js"></script>
</head>
<body>
  <div class="uk-container">
    <div class="uk-grid" data-uk-grid>
      <div class="uk-width-1-2@s" data-uk-width="1-2@s">
        <div class="uk-card uk-card-default">
          <div class="uk-card-header">
            <h3 class="uk-card-title">Card 1</h3>
          </div>
          <div class="uk-card-body">
            <p>This is the content of Card 1.</p>
          </div>
        </div>
      </div>
      <div class="uk-width-1-2@s" data-uk-width="1-2@s">
        <div class="uk-card uk-card-default">
          <div class="uk-card-header">
            <h3 class="uk-card-title">Card 2</h3>
          </div>
          <div class="uk-card-body">
            <p>This is the content of Card 2.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

在这个示例中，我们使用了UIkit的网格布局组件uk-grid和列组件uk-width-*来创建了两个卡片组件。每个卡片组件都有自己的标题和内容。

通过使用data-uk-*属性，我们可以指定每个列的宽度，并在小屏幕上使它们占据一半的宽度。

这只是UIkit提供的一种嵌套组件的方式，UIkit还提供了许多其他组件和功能，可以根据具体需求进行使用和配置。

腾讯云相关产品和产品介绍链接地址：

uikit 3.0 -面向移动的响应式网格

html、css、web、uikit、responsive

我目前正在玩uikit ()。我在创建响应式网格时遇到了麻烦。适用于桌面和移动设备。我的html如下所示： <div class="uk-section uk-section-muted"> <div class="uk-container uk-position-relative"> <h1 class="uk-h1 uk-heading-line uk-text-center uk-text-lowercase"><span>hey</span></h1>

浏览 3提问于2018-05-07得票数 0

1回答

在UIKit中按组重置过滤器

filter、uikit、getuikit

请您告诉我，如果可能的话，以某种方式重置UIKit过滤器，只为一个组。例如，我有一组过滤器，我想单击"Dct“来专门为datacolor组重置过滤器，而不是大小。如果您添加了uk-filter-control参数并使其为空，那么所有的元素都会被重置，是否有一种方法可以进行不同的操作？ <div uk-filter="target: .js-filter"> <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid> <

浏览 6提问于2022-03-13得票数 0

回答已采纳

1回答

警告:收到非布尔属性``uk grid`的`true`

reactjs、react-native、uikit、jsx

当我尝试使用https://getuikit.com/docs/card UIKit卡作为组件时，我很新的反应并得到了这个错误。删除该属性会完全破坏卡片的结构。 import React from 'react'; import faker from 'faker'; import "./css/Cards.css"; const Cards = (props) => { return ( <div className="uk-card uk-card-default uk-width-1-2@

浏览 9提问于2019-05-18得票数 1

回答已采纳

1回答

使用UI工具包添加动态边距

html、css、flexbox、getuikit

我需要增加之间的空白卡，但只有内部空白。下面的代码是响应的。大屏幕有4张卡。中屏幕有3张卡。小屏幕有2张卡。微屏幕有1张卡。 <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit-core-rtl.css" rel="

浏览 0提问于2019-08-15得票数 1

回答已采纳

1回答

在UIKit v3中使div中的粘性工作

getuikit

在UIKit V3中，在滚动过程中，div保持在顶部(粘滞)，可以很好地工作： <div class="uk-card uk-card-default uk-card-body" uk-sticky>Stick to the top</div> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p>  但是，如果我在overflow-y: scroll; div中做了完

浏览 2提问于2019-11-27得票数 0

1回答

木料使用不同的模板作为定制柱型

wordpress、twig、timber

我是完全陌生的PHP，Wordpress和木材。我有一个名为Projects的自定义post类型，它使用post归档模板，我将疯狂地创建一个特定的项目归档模板，以便为它设置一个不同的布局。这就是我的index.twig的样子 {% extends "layouts/base.twig" %} {% block content %} <div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-

浏览 5提问于2017-04-07得票数 0

2回答

获取多个容器的UI工具包筛选器

getuikit

是否有可能有两个容器用于过滤器，而只有一个控制器？现在它只过滤第一个容器，不能做很多事情，因为我的布局是一个循环中的砖石网格，所以我需要头部和单独的容器…… 我想要做的事情。 <div uk-filter="target: .js-filter"> <ul class="uk-subnav uk-subnav-pill"> <li uk-filter-control><a href="#">All</a></li> <li u

浏览 1提问于2019-05-10得票数 1

1回答

主页使用路由器插座在角11中渲染两次。

angular

我想显示我的登录页面没有标题，但主页组件呈现两次，我使用主页组件到我的主页，不是应用组件，但仍然重复。调查一下我所知道的<router-outlet></router-outlet>标签会使这个家出现两次，但我不知道如何解决这个问题。当登录页面处于活动状态时，我使用*ngIf来隐藏标题。 app.component.html <app-header *ngIf="hiHead"></app-header> <router-outlet></router-outlet> <app-footer>

浏览 0提问于2021-08-01得票数 1

1回答

如何将对象从div(类“卡”)的左侧拉出

html、css、getuikit

这就是我所拥有的这就是我要做的我知道如何创建“悬停”，但不知道如何添加这个数字是拉到左边的卡！这是我的html <li> <div uk-parallax="opacity: 0,1; y: 100,0; viewport: 0.3" class="uk-card uk-card-hover uk-card-small uk-card-body"> <h3 class="u

浏览 0提问于2018-09-28得票数 0

回答已采纳

1回答

UIkit超文本标记语言水平卡片使用

html、css、uikit

我想知道如何将水平div添加到UIkit的水平对齐卡中。我已经在他们的文档here中看到过媒体是右对齐的，但还没有看到如何将两个div添加到彼此附近(一个在右，一个在左)。我现在得到的结果是： ? 但是，我希望绿色按钮在卡片的右侧。卡片的创建方式如下： <div id="newBarsCard" style="padding: 40px 0px; padding-top: 0px;" class="uk-card uk-card-default uk-child-width-1-2"> <d

浏览 14提问于2020-04-14得票数 1

1回答

在React JS中筛选数组时未定义

arrays、reactjs、filter

我试图在React中只过滤某些项的数组(在我的例子中，我想要所有具有type: "Plant"的项)。我可以成功地从API获取数据，但是过滤它会产生这个错误：Unhandled Rejection (TypeError): undefined is not an object (evaluating 'data.Array.object') 下面是我在控制台记录数据时的样子：下面是我的完整代码： import React from "react"; import { API, graphqlOperation } from 'aws-a

浏览 10提问于2019-10-26得票数 0

回答已采纳

2回答

Getuikit 3移动时的可排序元素未触发

vue.js、getuikit

由于某些原因，我不能在移动可排序元素后执行操作。未调用/触发事件UIkit.util.on('#sortable'，'moved'，function (item) {})；。这个应用程序是用vue.js制作的，但我没有收到任何错误，所有其他的uikit功能都工作得很好。大约有600行代码，所以我将只展示那些重要的(我认为)。 <template> <div class="products"> <MainMenu /> <div id="ordering" uk-of

浏览 12提问于2019-02-14得票数 0

2回答

如何使用数组的索引值并将其传递给HTML模式，以便在不使用角7循环的情况下显示那里的数据

html、angular、typescript

如何使用数组的索引值并将其传递给HTML模式，以便在不使用角7循环的情况下显示那里的数据 import { Component, OnInit } from '@angular/core'; import { ApiService } from '../services/api.service'; import { movieModel } from '../models/movie'; @Component({ selector: 'app-home', templateUrl: './home.com

浏览 0提问于2019-03-07得票数 2

回答已采纳

3回答

使用uk-close按钮隐藏/关闭容器

html、css、getuikit

可以使用uk-close按钮关闭容器吗？我找到了关闭警报和对话框的示例，但是如何关闭/隐藏容器？ <div class="uk-container uk-position-center"> <div class="uk-width-xxlarge uk-height-large uk-card uk-card-body uk-card-default "> <button class="uk-close-large" type="button" uk-close></but

浏览 50提问于2019-12-14得票数 0

回答已采纳

5回答

角2 *ngFor -条件包装器元素。类似于使用带三个列的引导行，然后添加一个新行。

javascript、angular

我正在使用*ngFor，它使我感到困惑。我正在尝试使用UIkit，但它也适用于Bootstrap。 <div *ngFor="let device of devices" > <div class="uk-child-width-expand@s uk-text-center" uk-grid> <div class="uk-card uk-card-secondary uk-card-hover uk-card-body uk-transform-origin-bottom-right uk-anima

浏览 3提问于2017-02-16得票数 2

回答已采纳

2回答

如何访问API调用中的所有数据

html、angular

getNames(): Observable<bookmodel[]> { const endpoints = 'https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=xxxxxxxx'; return this.http.get(endpoints).pipe( map(this.extractData)); } <h1 class="uk-flex uk-flex-center">Top Boo

浏览 11提问于2019-03-12得票数 0

1回答

从firebase显示图像时获取http://localhost:4200/undefined

angular

我想显示存储在firebase中的图像，但遇到错误GET 404 (未找到) 我尝试将条件添加为未定义的“albumImages.userImage！==*ngIf=”错误消失，但图像仍然不显示。 HTML文件 <h1>Your Gallery</h1> <div class="uk-grid-match uk-child-width-expand@s uk-text-center" uk-grid> <div *ngIf="albumImages.length > 1">

浏览 15提问于2019-08-06得票数 1

1回答

AJAX搜索表单

javascript、jquery、html、ajax

我在html视图和ajax代码中使用了以下搜索表单来处理表单请求 $(document).ready(function() { console.log('Ready'); $('.search-wrapper').on('click', '#find-dates', function(a) { a.preventDefault(); console.log('click'); var t = $("#tour-id").val(),

浏览 14提问于2018-12-30得票数 1

1回答

如何使用html模板中的键显示对象？

angular、typescript

我希望在一个模式中显示一个对象，所以当我单击read按钮时，它会将标题名称和亚马逊链接发送到一个函数以传递给该模型，但是ngFor不会显示一个对象，而且一次只发送一个对象，所以我只需要使用html模板中的键和值来显示{{modal.name}}这样的对象。 /*Function*/ readMore(text: string) { this.modal = text; } <h1 class="uk-flex uk-flex-center uk-width-1-1">{{book.list_name}}</h1> <hr cl

浏览 0提问于2019-03-29得票数 0

回答已采纳

3回答