Material Design Lite Lists如何访问选定的元素？

Material Design Lite (MDL) 是一种用于构建现代化、响应式的网站和应用程序的设计语言。MDL Lists 是 MDL 中的一个组件，用于展示列表内容。要访问选定的元素，可以使用 MDL 提供的 JavaScript API。

在 MDL 中，列表元素使用 mdl-list 类进行标记。要访问选定的元素，可以使用以下步骤：

首先，确保在 HTML 文件中引入了 MDL 的 CSS 和 JavaScript 文件。可以通过在 <head> 标签中添加以下代码来引入 MDL 的 CSS 文件：

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

并在 <body> 标签的末尾添加以下代码来引入 MDL 的 JavaScript 文件：

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>

在 HTML 文件中，使用 <ul> 标签创建一个列表，并为其添加 mdl-list 类：

<ul class="mdl-list">
  <!-- 列表项 -->
</ul>

在列表中添加列表项。每个列表项使用 <li> 标签，并为其添加 mdl-list__item 类：

<ul class="mdl-list">
  <li class="mdl-list__item">
    <!-- 列表项内容 -->
  </li>
</ul>

如果要访问选定的元素，可以使用 JavaScript 来获取对应的 DOM 元素。例如，可以使用 querySelector() 方法来获取第一个选定的元素：

var selectedElement = document.querySelector('.mdl-list__item');

以上是使用 MDL Lists 访问选定元素的基本步骤。根据具体的需求，可以进一步使用 MDL 提供的其他 API 和功能来操作和修改选定的元素。

腾讯云提供了丰富的云计算产品和服务，其中包括云服务器、云数据库、云存储等。具体推荐的腾讯云产品和产品介绍链接地址可以根据实际情况进行选择和提供。

相关·内容

Material Design Lite ，简洁惊艳的前端工具箱

Material Design Lite简介本文主要介绍Material Design设计语言的HTML/CSS/JS部分实现。对应每一小节的在线练习地址如下，大家可以去试试。...Material Design Lite MDL中定义了一组样式类mdl-shadow--Ndp，用于声明材料的阴影，N的有效取值为：2/3/4/6/8/16。为元素应用阴影样式类很简单： ......Material Design Lite 在MDL中，我们可以使用样式类mdl-color--{palette}-{hue}来设置背景色，使用样式类 mdl-color-text--{palette}-...Material Design Lite 在MDL中，使用样式类mdl-typography--{name}声明文本的排版样式： Hello

1.3K3 0

Material Design Lite，简洁惊艳的前端工具箱

本文所对应的小练习和示例均可以访问：http://www.hubwiz.com/class/55adae643ad79a1b05dcbf77。...一、设计语言 github项目地址：https://github.com/google/material-design-lite 拟真 vs....Material Design Lite MDL中定义了一组样式类mdl-shadow–Ndp，用于声明材料的阴影，N的有效取值为：2/3/4/6/8/16。为元素应用阴影样式类很简单： <!...Material Design Lite 在MDL中，我们可以使用样式类mdl-color–{palette}-{hue}来设置背景色，使用样式类 mdl-color-text–{palette}-{hue...Material Design提供了11种规格的文字样式供不同场景下排版使用: Material Design Lite 在MDL中，使用样式类mdl-typography–{name}声明文本的排版样式

9491 0

有了这 18 个免费的React模板以后，也太省事了吧！！

有时需要做一个页面，不是设计师出身的我们肯定不想花大量的时间去构思如何设计一个漂亮的页面，那么此时有一些好看又免费的模板就再好不过啦，这里给你们推荐15个一、React Blur Admin Go to...NextJS Material Dashboard 是一个免费的 Material-UI、 NextJS 和 React Admin，其新颖的设计灵感来自谷歌的 Material Design。...它是完全编码的，包括插件、元素、 SASS 文件等等。三、WrapKit React Lite Go to WrapKit React Lite ?...WrapKit React Lite 是一个免费的 React 网站模板，允许你创建令人惊叹的网站，登陆页面，主页，等等。它带有随时可用的用户界面块和元素，以帮助水平的设计和美学的项目。...它具有启动新项目所需的各种特性: Material UI 组件、 Form 元素、 JWT 身份验证、登录页面、代码分割等等。

12.7K1 0

静态网页托管平台的选择

Material Design Lite Material Design Lite (MDL)是谷歌根据自己的Material Design设计风格开发的精简版Web UI框架, 虽然市面上有很多基于material...MDL的官网和git仓库, 以及material的官方字体图标: https://getmdl.io/ https://github.com/google/material-design-lite https...://material.io/tools/icons/ 所以我的博客也叫Blog Lite, 意指完全遵循material的精简博客 Blog Lite 当前版本0.1.1 首先声明, 这个blog适用的人群有限...: 存放着material design的官方字体 mdl/: MDL框架的所有相关文件 img/: 存放着所有图片, 包括logo, 卡片背景和网站素材图片 showdown/: 一个markdown2html...源码拿到手之后修改下这个文件之后就能上手用了, 为了方便我使用js的形式描述data.json: // data.json是一个列表对象, 其中每一个元素是一个album, 代表一个大类包含许多的子链接

1.4K3 0

Android Studio 4.1 发布，全方位提升开发体验

设计 Material Design 组件更新现在，创建新项目 (New Project) 对话框中的 Android Studio 模板使用 Material Design 组件 (MDC)，并且默认支持最新版的主题和样式设计指南...△ 项目模板中的 Material Design 组件更新更新包括: MDC: 项目使用 build.gradle 中的 com.google.android.material:material。...要查看导入模型的详细信息以及如何在应用中使用，请双击项目中的 .tflite 模型文件以打开模型查看器页面。您可以阅读官方文档了解详情。...选定实例的跟踪事件统计信息。有关线程状态分布的数据。所选跟踪事件内运行时间最长的实例。...独立分析器现在可以在独立于 Android Studio 主窗口的单独窗口中访问 Android Studio 分析器。

3.7K2 0

15 个优秀的响应式 CSS 框架

Material Design for Bootstrap (MDB) ?...Material Design for Bootstrap MDB 建立在 Bootstrap 之上，并提供了开箱即用的材料设计外观。...Material Design Lite Framework (MDL) ?...material design light framework Google 的 Material Design Lite 框架是最流行的 CSS 框架之一，可为你的网站添加 Material Design...materialize Materialize 是基于 Material Design 的现代响应式前端框架。Google的材料设计是一种流行的设计趋势，涉及卡片、阴影和动画。

11.1K1 0

18 个漂亮的 Bootstrap 模板

优质的管理模板。现代 Google 的材料设计。使用 Bootstrap Material Design 框架构建。惊人而流畅的动画。很棒的通知和报警系统。...模板的免费 lite 版面向博客应用（https://designrevision.com/downloads/shards-dashboard-lite-react/）。最近更新：一年前。...更多信息：https://themeforest.net/item/altair-admin-material-design-uikit-template/12190654 Demo：http://preview.themeforest.net.../item/altair-admin-material-design-uikit-template/full_screen_preview/12190654 3、Gene ?...更多信息：https://themeforest.net/item/gene-angular-2-material-design-admin-template/19877169 Demo：https:/

14.5K1 1

Android Studio 4.1 发布啦

Summary tab： “Summary” 面板中新的“Analysis”选项卡显示：汇总特定事件的所有发生次数的统计信息，例如发生次数和最小/最大持续时间。跟踪选定事件的事件统计信息。...有关如何记录系统跟踪的基本用法说明，请参阅“使用CPU Profiler检查CPU活动”的“ 记录跟踪”部分。...Material Design Components：在新项目模板中更新了主题和样式 ?...现在 “ Create New Project” 对话框中的 Android Studio 模板使用“ Material Design Components (MDC)”，并且默认情况下符合主题和样式的更新指南...更新包括： MDC：项目依赖 com.google.android.material:material ，Base app themes 的主题使用 Theme.MaterialComponents.*

6.5K1 0

程序员练级攻略（2018）：前端 UIUX设计

布拉德将这个概念应用在界面设计中，我们的界面就是由一些基本的元素组成的。...乔希·杜克（Josh Duck）的"HTML 元素周期表"完美阐述了我们所有的网站、App、企业内部网、hoobadyboops 等是如何由相同的 HTML 元素组成的。...除了到官网学习 Material Design，你还可以访问 Material Design 中文版来学习。...Material Design Lite ，这是 Google 官方的框架，简单易用。 Materialize ，一组类似于 Bootstrap 的前端 UI 框架。...Material-UI 是基于 Google Material Design 的 React 组件实现。

1.3K2 0

年终盘点: 复盘20+基于React的开源管理后台&插件

上一篇文章和大家分享了国内外 star 比较多的 vue3 开源管理系统, 也是我之前做项目会考虑的方案, 本篇文章继续为大家推荐几款基于 React 的开源管理系统，让我们一起探索这些工具如何利用...描述层级关系: 体现元素之间的层级与空间关系。提供反馈、明确意向: 助力交互体验。...它的核心是QueryClient,它是一个全局状态管理器,可以帮助我们从多个组件中访问和共享数据查询结果。该项目是为网络开发人员提供的高质量开源软件。...安装npm i rsuite --save应用优势l通过全局访问功能，来轻松地管理应用程序。...项目特点：专业的用户界面。 MUI (Material-UI) React 组件。完全响应式，所有现代浏览器都支持。

1.3K1 0

Material Design — 网格列表（Grid lists）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚...Grid lists Material Design链接：Grid lists ?...网格列表网格列表（Grid lists）网格列表是标准列表视图的替代方法。 Grid lists由以垂直和水平布局排列的cell重复后组成。 Grid lists最适用于同质数据类型。...---- 内容 Tiles中的内容 Tiles中的内容由主要内容和辅助内容组成。主要内容是主要的区分元素，通常是图像。次要内容可以是操作或文本。为缺少主要内容图像的tiles提供默认图像。 ?...Grid lists展示图像优先于文字，Lists展示文字优先于图像。要在整个网格列表中保持一致的节奏，请截断过长的文本内容。或者，增加grid的大小，以便tiles可以容纳较长的标题。

3.5K12 0

听我说说我的博客: 月访问量过万的个人IT博客的技术史

我的博客是如何工作的？ HTTP服务器当你开发在网页上访问我的博客的时候，你可能会注意到上面的协议是HTTPS。但是并不会察觉到它是HTTP2.0。...Angluar & Material Design Lite vs Bootstrap & jQuery Mobile 这是一个现代浏览器的前端战争。...Backbone就负责了相应的Detail页和List页的处理。尽管这样做的方式可以让用户访问的速度更快，但是我相信没有一个用户会一次性的把技术博客看完。...最后，出现了Material Design Lite，也就是现在这个丑丑的页面，还不兼容新IE（微信浏览器）。作为一个技术博客，它也用到了HighLight.js的语法加亮。...Design Lite (用户) BootStrap (后台) jQuery + jQuery.autocomplete + jquery.githubRepoWidget HighLight.js

1.6K10 0

15 个优秀的 Vue 后台管理模板

Vue Paper 仅有16种元素，其它 150种以上的元素则来自付费的Creative Tim，不用免费的 16 种元素，也有很多值得我们学习的地方。...模板不仅看起来很棒，而且还利用了 Material Design 规范创建了一个干净，可访问的用户界面。颜色很棒，模板易于定制，总体而言，一切都做得很好。.../vue-material-template-full Vue Material Admin Template是一个基于Vue的Material Design后台管理模板，使用Vuetifyjs作为基础的框架...主要特点：流畅的响应式设计基于Vuetify和 Material Design 三种颜色主题和深色模式 Vuex和Vue-Router支持 15. Light Blue Vue Lite ?...Vue Material Dashboard ? Vue Material Dashboard是使用Vue Material的另一个免费资源。

13.1K2 1

国外排名前 15 的 Vue 后台管理模板

模板不仅看起来很棒，而且还利用了 Material Design 规范创建了一个干净，可访问的用户界面。颜色很棒，模板易于定制，总体而言，一切都做得很好。...Vue Material Admin Template是一个基于Vue的Material Design后台管理模板，使用Vuetifyjs作为基础的框架。...主要特点：流畅的响应式设计基于Vuetify和 Material Design 三种颜色主题和深色模式 Vuex和Vue-Router支持 15....Light Blue Vue Lite 浅蓝主题Vue管理模板（Light Blue Vue Admin）是一个免费的Vue.js和Bootstrap 4仪表板模板，设计独特、具有稍微透明的小部件和渐变背景...Vue Material Dashboard Vue Material Dashboard是使用Vue Material的另一个免费资源。

3.3K2 0

Android Studio 4.1你想知道的都在了

article/details/109045686 概览 Android Studio 4.1 目前已经发布，该版本共修复了2370 个 bug 以及 275 个 issue，主要包含如下新增功能：设计 Material...Design 组件库的更新开发 Database Inspector 功能直接在 Android Studio 中运行模拟器 Dagger 导航支持使用 TensorFlow Lite 模型构建与测试...Android 模拟器支持折叠屏除了最近添加的 5G 蜂窝测试外，还添加了对 Android 模拟器的可折叠设备的支持。使用 30.0.26 及更高版本的模拟器将支持此功能。 ?...摘要选项卡：分析面板中新的摘要选项卡显示：汇总特定事件的所有发生次数的统计信息，例如发生次数和最小/最大持续时间。跟踪选定事件的事件统计信息。有关线程状态分布的数据。...所选跟踪事件的运行时间最长的事件。 ?

9143 0

那些前端常用的网站插件

— 快速实现全屏滚动特性 Typed.js — 打字机效果 Waypoints.js — 滚动到某个元素位置时触发一个功能 Highlight.js — web 语法高亮 Chart.js — 使用 JavaScript... — 滚动时展现动画 Scrolline.js — 页面滚动时显示滚动进度 Velocity.js — 快速流畅的 JavaScript 动画 Animate on scroll — 漂亮的页面滚动元素动画...Hybrid 选择框 Nice select — 创建漂亮的选择框的 jQuery 库 Tether — 使用固定定位来创建相关元素 Shepherd.js — 为应用创建新手引导 Tooltip — ...Jquery 选择框插件 IziToast — 通知弹窗实现 IziModal — 模态框实现 CSS 库 / 设计相关 Animate.css — 动画库 Flat UI Colors — 扁平化设计配色 Material...design lite— 基于 Google material design 的框架 Colorrrs — 随机颜色生成器 Section separators — CSS 实现区域分割 Topcoat

4.5K5 0

今天推荐，今年排名前 15 的 Vue 后台管理模板

3.2K1 0

2021，排名前 15 的 Vue 后台管理模板

4.2K1 1

借助 Material You 动态配色丰富您的应用

Material Design 3 在 Material Design Primary 颜色和 Secondary 颜色的基础上，引入了 Tertiary 颜色和附加色槽，用于验证无障碍访问功能并保障显示的和谐性...在 Material Design 3 (或简称为 M3) 中，我们在设计方案里引入了新调色板和角色，您可将 Container 颜色及其对应的 On Container 颜色，用于无需像非容器元素那样强调的界面元素...那么如何使这一切成为可能呢？方法是使用 Token。Token 在 Material Design 2 颜色角色的基础上，提供了全局的样式色槽，它能够帮您更改与颜色级联一致的角色分配。...△ 相同的 Token，不同的色值无障碍访问但是这些 Token 本身如何确保色彩的无障碍访问？...迁移至 Material 3 接下来向您介绍如何将应用迁移至 Material 3。迁移的第一步是引用新 Token 并将其与应用中的组件连接。

2.5K3 0

Human Interface Guidelines —— Pickers

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚...Picker Picker包含一个或多个可滚动的不同值的列表，每个列表都有一个选定的值——显示在view中心的较暗的文本中。...选取器的高度大致是五行lists值的高度。 Picker的宽度取决于设备和环境，可以是屏幕的宽度或 enclosing view。...使用时注意 ·使用可预测的和逻辑上有序的值当可滚动列表停止滚动时，picker中的许多值会被隐藏。人们最好能够预测这些值是什么，例如一个按字母顺序排列的国家名称列表，以便他们能够快速浏览列表。...·避免切换屏幕以显示Picker 在上下文中，出现在正在编辑的字段下方或靠近正在编辑的字段显示时，picker效果最好。

6532 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云