Material Design Lite中的单选按钮实心填充不打印
Material Design Lite（简称MDL）是一种基于Google Material Design概念的前端框架，用于构建现代化的Web应用程序。在MDL中，单选按钮（Radio Button）是一种常见的用户界面元素，用于在多个选项中选择一个。
单选按钮的实心填充表示选中状态，而不打印则意味着在打印页面时，该单选按钮不会被显示或打印出来。
MDL提供了一套简洁、美观的单选按钮样式，可以通过添加相应的CSS类来实现实心填充的效果。在HTML中，可以使用以下代码创建一个实心填充的单选按钮：
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option1">
<input type="radio" id="option1" class="mdl-radio__button" name="options" value="option1" checked>
<span class="mdl-radio__label">Option 1</span>
</label>在上述代码中，mdl-radio__button类用于定义单选按钮的样式，mdl-radio__label类用于定义单选按钮的文本标签。通过添加checked属性，可以设置单选按钮的默认选中状态。
MDL还提供了其他样式和效果，如动画效果、水波纹效果等，可以根据具体需求进行定制。
对于实心填充的单选按钮的应用场景，常见的包括：
- 表单中的选项选择：在表单中，用户可以通过单选按钮选择一个选项，例如性别选择、支付方式选择等。
- 设置页面中的选项配置：在设置页面中，用户可以通过单选按钮选择不同的配置选项，例如语言选择、主题选择等。
- 问卷调查中的选项选择：在问卷调查中，用户可以通过单选按钮选择不同的答案选项。
腾讯云提供了一系列与云计算相关的产品，其中包括云服务器、云数据库、云存储等。然而，由于要求不能提及具体的云计算品牌商，无法给出腾讯云相关产品和产品介绍链接地址。如果需要了解更多关于腾讯云的产品信息，建议访问腾讯云官方网站进行查阅。
相关·内容
1回答
不知何故，Material Design Lite只给出了文档中水平单选按钮的示例：
如果您想要移动，这是不够的，而且您的标签有几个单词的长度。
不管怎样，这里有一个代码：
我试着用<br>把项目分开，然后用<p>包装它们，但是没有用。我想一些忍者css技巧可以解决这个问题。
浏览 1提问于2017-02-22得票数 1
回答已采纳
在本地安装Material Design Lite的文档时遇到一些问题。我在中执行了以下命令
git clone https://github.com/google/material-design-lite
cd material-design-lite
npm install && npm install -g gulp
gulp all && gulp serve
运行gulp all时出现错误：
root@c54a089ac69c:/home/material-design-lite# gulp all
[21:18:38] Requiring exter
浏览 3提问于2016-04-16得票数 3
我正在做一个MEAN堆栈(Mongo，Express，Angular，Node)，我想使用Google的Material Design Lite库。根据的说法，一个人应该运行
npm install material-design-lite --save
在NPM项目中使用mdl组件。我得到以下错误：
npm ERR! Failed at the material-design-lite@1.0.0 install script 'napa mojombo/clippy'.
npm ERR! This is most likely a problem with the mate
浏览 2提问于2015-07-14得票数 0
2回答
我只想在我的项目中使用MDL的布局组件。
因此，在我的app.css文件中，我导入了以下内容：
@import url('~material-design-lite/src/layout/_layout.scss');
在构建过程中，我得到了以下错误：
ERROR in ./~/css-loader!./~/material-design-lite/src/layout/_layout.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../variables i
浏览 1提问于2016-10-17得票数 2
回答已采纳
我已经通读了组件列表和提供的CSS，但我没有看到任何提到选择框的内容--只有常规输入；文本、单选、复选框、文本区域等。
如何使用带选择框的Material Design Lite？使用这些类作为常规文本输入可以实现一半的效果，但这肯定是不正确的。
浏览 83提问于2015-07-09得票数 30
因此，我试图移动一个现有的静态网站，有材料设计Lite的反应。
我使用创建-反应-应用程序包创建一个新的反应应用程序。我运行的命令"npm‘材料-设计-轻’-保存“-这两种工作。
现在，在我的App.JS文件中导入它。
import componentHandler from 'material-design-lite';
class App extends Component {
componentDidMount() {
componentHandler.upgradeAllRegistered();
}
当我这样做的时候，我会得到这个错误。
浏览 3提问于2018-01-09得票数 1
回答已采纳
我通过保龄球安装。
所以我在我的应用中加入了..。
var app = new EmberApp(defaults, {
sassOptions: {
includePaths: ['bower_components/material-design-lite/src']
}
});
app.import('bower_components/material-design-lite/material.js');
并引进我的风格..。
@import "_color-definitions";
$color-p
浏览 5提问于2016-06-21得票数 0
回答已采纳
1回答
我想从material.css压缩CSS文件，但是Webpack没有看到material.css文件，如果我像这样导入它：
import 'material-design-lite';
但是当我试图像这样直接导入material.css时：
import 'material-design-lite/material.css';
那我就有：
ERROR in ./~/material-design-lite/material.css
Module parse failed: /p/prod/node_modules/material-design-lite/mat
浏览 0提问于2016-05-22得票数 1
回答已采纳
1回答
MDL在我的环境中没有发挥作用。我继续进行本教程：
库存在于node_modules中，但调试器向我显示消息：
[WDS] App updated. Reloading...
login:10 GET http://localhost:4200/node_modules/material-design-lite/material.min.css
login:11 GET http://localhost:4200/node_modules/material-design-lite/material.min.js
login:12 GET http://localhost:4200/nod
浏览 7提问于2017-04-10得票数 0
回答已采纳
我知道这个问题已经有很多例子了，但是没有一个能解决我在使用Sass的时候遇到的问题。
上下文:我正在使用npm安装material-design-lite，并要求在我的AddReminderView.ts文件中使用它：
require('material-design-lite/dist/material.css');
require('material-design-lite/dist/material.js');
require('../scss/styles.scss');
这是我的webpack配置，非常简单。
const path =
浏览 3提问于2018-07-17得票数 10
回答已采纳
刚开始我的第一个角2应用程序，但我遇到了一些问题。
我的IDE是WebStorm &我用角度CLI生成了这个项目
我的问题发生在试图使用材料设计Lite。
我在我的index.html中导入了三个依赖项：
<link rel="stylesheet" href="../../node_modules/material-design-lite/material.min.css">
<script src="../../node_modules/material-design-lite/material.min.js">
浏览 1提问于2016-10-12得票数 1
回答已采纳
我一直在我的网站上使用Material-Design-Lite，我也在使用JQuery来显示一个滚动到顶部的按钮。但他们并没有在一起工作。安装Material-Design-Lite后，该按钮在单击时不起任何作用。
<div class='back-to-top'>
<a class='hvr-icon-spin' href='#'/>
</div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() &
浏览 0提问于2015-07-28得票数 2
1回答
自动完成/搜索建议与材料设计？
、、、、
因此，在material-design-lite v1.x中没有内置机制用于“芯片”或列表附加到输入/搜索字段，和/或填充/显示响应事件。
我发现了这个： --但是对于MDL是否有一个最佳实践，其中包含了自动完成/搜索建议？
或者，类似于MDL中的Google/YouTube搜索栏？
浏览 6提问于2016-10-13得票数 7
下面是我的App.vue代码：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import 'material-design-lite'
export default {
name: 'app'
}
</script>
<style lang="stylus">
@import url
浏览 4提问于2017-09-29得票数 1
在Material Design Lite中，视差滚动背景似乎不起作用。或者我做错了。
这就是我的问题：
中间巨大的空格没有显示背景-图像或背景:我在HiDPI屏幕上测试它时给出了它。然而，它适用于其他尺寸的屏幕，如MDPI和更小的屏幕(至少根据Chrome的说法)。我尝试使用一个单独的.parallax类，其中包含以下内容：
.parallax{
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
但这不起作用，也
浏览 0提问于2015-10-22得票数 2
我在将集成到Angular2中有一个小问题，请您帮我说一下我所做的事情--我正在使用最新版本的angular2，MDL框架不起作用
如何在Angular2中集成材料设计？问题是由于代码是旧版本，库是新版本。
npm install material-design-lite --save
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<link rel="stylesheet" href="/app/t
浏览 6提问于2016-11-08得票数 0
回答已采纳
1回答
根据选中的复选框获取表行数据
、、、、
我使用Material Design Lite创建一个表，并使用php动态插入行。material design lite为每一行提供了复选框。现在，我想在单击按钮时使用所选行的数据。有谁知道怎么做吗？
代码如下：
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp" id="sanctionedTable">
<thead>
<tr>
<th class="mdl-data-tab
浏览 0提问于2016-03-04得票数 0
我想知道是否有一种方法可以将Material Design Lite按钮样式应用于文件选取器，即通过以下方式在HTML页面上创建的组件：
<input type="file" id="filePicker" />
我希望该组件的“浏览”按钮有一个凸起的按钮(如果可能的话，与波纹)的外观。参见。
谢谢!
浏览 0提问于2015-12-11得票数 3
我需要更多的组件来开发ruby on rails应用程序。我是否可以使用mdl-ext组件，将它们直接包含在我的assets文件夹中，因为没有gem可以通过bundle安装程序安装它。
这里提供了Material design lite extensions
我想把它和这里提供的material-design-lite 一起使用。注意！材料设计精简版我已经在用它了。
如果这是可能的，那么将其包含在资产管道中的最佳方式是什么？
浏览 24提问于2017-07-18得票数 2
回答已采纳
1回答
材料设计-轻刀尖定位
、、、
我正在使用material design lite库，但我有一个问题。当我缩小窗口时，有时工具提示不是正确的positioning，而是2 lines而不是one。
Html
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.2.0/material.min.js"></script>
<link rel="stylesheet" href="htt
浏览 7提问于2016-08-17得票数 0
回答已采纳
我正在尝试将来自Material Design Lite ()的按钮添加到Joomla 3.x站点。
我尽我所能地遵循了这些指令，但我得到的输出并没有得到样式。
我试图在这个页面上彻底记录我的尝试：
非常感谢所有的帮助。
浏览 24提问于2015-09-29得票数 0
早午餐/ npm和菲尼克斯把我搞糊涂了。缺乏具体的例子无济于事。也许这个问题可以给我们一些启发？这是我在mo‘的配置
npm: {
enabled: true,
styles: {
'material-design-lite': ['dist/material.min.css'],
'mdl-ext': ['lib/mdl-ext.css']
},
globals: {
material: 'material-design-lite'
}
}
有几个问题。虽然mdl样式正在工作，但我不确
浏览 6提问于2017-08-15得票数 0
随机的，可能是愚蠢的问题- Material-Design-Lite博客模板可以完全安装在Wordpress上吗？从下载了完整的模板，想知道如何使用整个文件...
谢谢!
浏览 0提问于2015-07-09得票数 1
我正在尝试用一些动态的答案填充一些问题，但它对我没有用。
一切都很好，但我不知道如何通过这样的问题获得这个动态单选按钮值：
General Assessment of the Programme:Good
Quality of the Material Provided:Excellent
Design of the Programme:Excellent
我如何获得这些数据？
<table class="table table-bordered" *ngFor="let item of QuestionMaster.Questions let i=inde
浏览 7提问于2017-02-03得票数 1
回答已采纳
4回答
我注意到，当我在sass文件中@导入样式时，我的webpack配置多次将相同的样式导入到head <style>标记中。
我想是因为我的全局样式文件，它看起来是这样的：
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import '~material-design-lite/src/material-design-lite.scss';
稍后，我在多个其他组件样式文件中导入样式：
@import 'global';
有什么配置
浏览 6提问于2016-09-24得票数 9
回答已采纳
根据材料设计公司的自述，我已经成功地建立和服务了当地版本的MDL网站。我发现material-design-lite\dist\文件夹被送达了。
我好奇的是，有一个名为animation的文件夹，它的路径是material-design-lite\dist\components\animation。但是，我似乎不能通过点击MDL网站来导航到那里。不过，我可以通过访问。
有人对此有洞察力吗？有没有我忽略的地方或东西？
浏览 4提问于2016-05-11得票数 0
回答已采纳
2回答
在我的index.html中，我有：
<!-- Material Design Lite -->
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.teal-red.min.css" />
<script src="/bower_components/material-design-lite/material.min.js"></script>
<!-- Material Design icon
浏览 3提问于2016-11-13得票数 1
3回答
我尝试在页面加载时设置滑块的值。设置mdl滑块的值的推荐方法如下-
document.querySelector('#slider').MaterialSlider.change(value);
但是，如果从$(document).ready()或$(window).load()调用，则会抛出错误TypeError: document.querySelector(...).MaterialSlider is undefined。
设置一秒的超时可以解决这个问题，但看起来有点老生常谈。有没有其他我可以绑定它的事件，以确保它正常工作？
这就是我加载脚本的方式--
//mob
浏览 28提问于2016-08-18得票数 3
回答已采纳
4回答
新的ASP.NET核心框架使我们能够针对不同的环境执行不同的html：
<environment names="Development">
<link rel="stylesheet" href="~/lib/material-design-lite/material.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names=
浏览 1提问于2015-11-15得票数 79
回答已采纳
我在bind a Knockout array with Material Design Lite复选框中遇到问题。基本上，它不会显示选中的复选框。
如何解决这个问题呢？
var ViewModel = function() {
this.uniqueTabsNames = ko.observableArray(['one', 'two', 'three']);
}
ko.applyBindings(new ViewModel());
<link href="https://fonts.googleapis.com/css
浏览 0提问于2017-05-27得票数 2
看起来包含了比Material Design Lite更多的组件，现在可以使用了。既然这两个Google项目都与Material Design哲学保持一致，那么我为什么要使用MDL而不是PSK呢？
在我看来，你可以像使用Bootstrap、jQueryUI或任何其他page.js库/框架一样，简单地删除PSK的东西。
浏览 1提问于2015-12-02得票数 4
1回答
我刚刚开始了一个小项目的节点和表达式使用玉作为视图引擎，但由于某些原因，我不知道.
我的看法是：
doctype html
html
head
meta(charset='utf-8')
title= 'Admin / ' + title
link(ref='stylesheet', href='https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css')
link(ref='styl
浏览 1提问于2015-10-19得票数 0
回答已采纳
如何使用material design lite创建具有功能的星形设计。我想要像下面的图片一样设计
谁能让我知道如何在MDL中创建评估设计
浏览 10提问于2017-08-17得票数 0
这是我的package.json文件
{
"name": "deep-playground-prototype",
"version": "2016.3.10",
"description": "",
"private": true,
"scripts": {
"clean": "rimraf dist",
"start": "npm run serve-watch",
浏览 1提问于2018-12-18得票数 0
我在尝试使用Material Design Lite和AngularJS时遇到了麻烦。在谷歌了一下之后，我发现了另一个关于类似问题的堆栈溢出帖子：
我正在尝试通过将数据从ajax请求推送到模型来将数据加载到表中。从那里，视图由AngularJS更新。由于该表使用Material Design Lite的javascript添加了选择多个条目的功能，因此新的表条目似乎没有使用适当的类/属性进行更新。
按照其他人在另一个堆栈溢出问题中的规定，我们需要运行componentHandler.upgradeAllRegistered();。这似乎没有正确地升级元素。
下面是一个示例的JSFiddle：
浏览 2提问于2015-08-13得票数 2
我希望旋转器在页面加载时出现，然后在页面加载后慢慢消失。如何使用material design lite实现此功能？
浏览 3提问于2015-12-26得票数 2
我正在尝试材料设计，我不知道这里缺少什么。 我想使用文本输入和按钮。 输入在div中。我预计输入大小会受到包含的div的限制。 在本例中，我将封闭div的宽度设置为50px。 然而，输入只是扩展并占据了整个宽度。 为什么？ 屏幕截图： ? 代码： <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<link href=&#
浏览 19提问于2019-02-08得票数 1
回答已采纳
我正在寻找使用Material Design Lite滚动固定标题的解决方案。
我想要做的就像Stack Overflow正在做的那样。当您将光标移到Stack Overflow上的页眉上并使用鼠标向下滚动时，页面将向下滚动，页眉固定在顶部。滚动条不会停止在标题的底部。滚动条通过页眉延伸到页面顶部。这就是我想要做的。
我的网页使用Material Design Lite中的布局组件。我使用mdl-layout--fixed-header修复我的头文件。即使页眉是固定的，页面内容是可滚动的，但当光标位于页眉上时，我无法使用鼠标滚动页面，滚动条停在页眉的底部。
如何创建类似Stack Overfl
浏览 18提问于2017-09-29得票数 0
2回答
我有如下所示的单选按钮。
<div id="lensType">
<input type="radio" name="design" style="vertical-align: middle" value="1"/>
<label for="design">Single Vision</label><br/>
浏览 0提问于2013-04-17得票数 0
回答已采纳
尝试将mdl实例化到vuejs项目(vue v2.1)中。遇到与非常相似的问题，除了我在App.vue中调用mounted () { componentHandler.upgradeDom()}时，它返回：
TypeError: _materialMin2.default.upgradeDom is not a function
此外，如果我在浏览器控制台中输入componentHander.upgradeDom()，它将执行预期的操作，而不会出现错误。如果我在挂载的钩子中使用console.log(componentHandler.upgradeDom())，那么它将返回一个emtpy对象。
浏览 5提问于2017-01-26得票数 0
我从中复制了一个可排序的表的示例，但它不起作用。有人能告诉我我哪里做错了吗？
我的<head>中有这些链接
<link rel="stylesheet" href="/includes/material-design-lite/material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
html：
<div id="us
浏览 15提问于2017-04-27得票数 0
1回答
我安装了材料设计模块通过npm，但我想改变它与其他颜色和更好的颜色，不包括在材料设计色彩Pallete。
我在这里读到的。
但是它对我不起作用，当我试图改变颜色时，我会得到白色/黑色的外观。
我有我的主要scss
@import 'colors';
@import '../../../node_modules/material-design-lite/src/material-design-lite'; `
我的_colors.scss包含：
$golden: #c6a259;
$brown: #240000;
$color-primary: #c6a259 !
浏览 5提问于2016-05-02得票数 2
回答已采纳
1回答
我正在尝试在程序中加载我的json文件。
使用以下代码：
seed.d.ts:
declare module "*.json" {
const value: any;
export default value;
}
dataset.ts:
import * as data from "./my.json"
我尝试使用npm run build进行构建，得到了以下错误：
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: n
浏览 2提问于2018-12-26得票数 1
1回答
将鼠标悬停在material design lite工具提示上后，是否可以使其保持打开状态？例如，用户可以点击其中的一个链接。
<div id="myTooltip" class="icon material-icons">info</div>
<div class="mdl-tooltip mdl-tooltip--large" for="myTooltip">
<a href="#">Here</a> is the further informat
浏览 20提问于2018-08-24得票数 2
回答已采纳
我正在尝试使用Material Design Lite库。
将图标放在其中一个选项卡中并在其下方显示选项卡文本的最佳方式是什么(请记住最佳实践和可伸缩性)。
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="https://cod
浏览 3提问于2016-07-22得票数 1
3回答
有人知道为什么在中，Material Design Lite sidenav (或者他们所说的抽屉)在用作组件时不会显示吗？
当它不像在中那样用作组件时，它工作得很好
我正在使用下面的代码，但可能用错了地方？
componentHandler.upgradeAllRegistered();
浏览 3提问于2016-05-24得票数 1
1回答
我试图用用户登录的OctoberCMS建立一个网站，并按照视频说明安装“用户”插件，并在登录页面中添加帐户组件{% component 'account' %}，在默认布局中添加会话[session] security = "all"。
在“Demo”主题和“Material Design Lite”主题中使用了相同的过程-在Demo主题中，这个用户创建、停用等功能非常完美，但在“Material Desing”中-它被卡住了，无法创建新用户。
浏览 0提问于2018-05-30得票数 0
我已经使用Angular材质创建了对话框，但到目前为止还没有找到使用Material Design Lite创建对话框的方法。有没有解决的办法？
浏览 0提问于2016-01-15得票数 2
是否可以创建没有在Symfony框架中的基本模板中定义的新块。我试过这样做，但是在运行时它不包括那些新定义的块到基本模板中。我必须将这些代码包含在子模板中的一个单独的块中，因为它提供了错误otherwise.Thanks。
扩展另一个模板的模板不能在第95行的applicationStudentBundle:Default:StudentRequest.html.twig中有一个主体。
addstudent.html.twig
{% extends 'applicationMainBundle:Default:maintemplate.html.twig' %}
{
浏览 3提问于2016-01-19得票数 1
1回答
我正在尝试Material Design Lite，为一个学校项目制作一个漂亮的网页。我遇到了一个问题，标题中的三明治图标是。
我复制并粘贴了固定标题示例中的确切源代码(单击CodePen按钮可以查看我正在尝试的完整源代码)，但它的显示方式与示例不同。
我是不是漏掉了什么？我做HTML/CSS已经有一段时间了，但我不明白为什么会发生这种情况。会不会是个bug呢？谢谢。
浏览 3提问于2016-04-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
