如何使MudBlazor组件像普通HTML元素一样工作
MudBlazor是一个基于Blazor框架的UI组件库，它提供了丰富的UI组件和样式，可以帮助开发人员快速构建Web应用程序。要使MudBlazor组件像普通HTML元素一样工作，可以按照以下步骤进行操作：
- 引入MudBlazor组件库：在项目中引入MudBlazor组件库的命名空间，可以通过在
_Imports.razor文件中添加@using MudBlazor来实现。 - 使用MudBlazor组件：在需要使用MudBlazor组件的地方，使用相应的组件标签进行声明和调用。例如，要使用一个按钮组件，可以使用
<MudButton>标签。 - 设置组件属性：根据需要，可以通过设置组件的属性来自定义组件的行为和外观。每个MudBlazor组件都有一组可用的属性，可以根据需要进行调整。例如，可以设置按钮的文本、颜色、大小等属性。
- 处理组件事件：MudBlazor组件通常会触发一些事件，例如按钮的点击事件。可以通过在组件上添加事件处理程序来响应这些事件。例如，可以使用
@onclick指令来定义按钮的点击事件处理程序。 - 样式和布局：MudBlazor组件库提供了一套默认的样式和布局，可以根据需要进行自定义。可以使用CSS类、内联样式或组件提供的属性来调整组件的样式和布局。
总结起来，要使MudBlazor组件像普通HTML元素一样工作，需要引入组件库、使用组件标签、设置属性、处理事件，并根据需要进行样式和布局的调整。通过这些步骤，可以充分利用MudBlazor组件库提供的功能和特性，快速构建出符合需求的Web应用程序。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb-for-mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动开发平台（MPS）：https://cloud.tencent.com/product/mps
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
4回答
我已经通过NuGet安装了mudblazor，并遵循了如何设置mudblazor的“教程”，我一步一步地做了所有的事情，但由于某些原因，组件看起来没有任何css或js。我不得不在_host.cshtml中链接css和js文件： <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazo
浏览 221提问于2020-12-07得票数 3
我刚接触blazor，偶然发现了MudBlazor组件。这些都很棒，所以我决定在我的项目中实现它们。我想做的是包装我在自己的自定义组件中使用的每个MudBlazor组件，这样将来如果我更改了任何东西，它就会很简单(就像我已经决定从Radzen更改为MudBlazor一样)。在大多数情况下，这是相当简单的，除了@bind-Value属性之外。我似乎想不出怎么才能让它起作用。下面是包装MudBlazor "MudTextField“的自定义组件。 <MudTextField @bind-Value="@BindTo" Label="@Label" V
浏览 150提问于2021-08-03得票数 0
回答已采纳
Angular组件通常会生成HTML。如果我尝试让它们生成SVG，它会失败，因为它不知道SVG标记。似乎只有在结果在里面的时候它才知道它们。但这不是这里的情况-在父组件中。
我的组件应该生成SVG的各个部分。我怎么才能让它工作呢？
浏览 0提问于2021-09-25得票数 0
例如，在my-components list.html中，我有：
<my-component #first></my-component>
<my-component #second></my-component>
<my-component #third></my-component>
<input #forth/>
我想把它放在我的测试中，比如：
it('test', () => {
const myComponent: HTMLElement = fixture.debugE
浏览 1提问于2018-08-21得票数 5
我正在为Blazor WebAssembly使用一个叫做Mudblazor的CSS框架。Link to mudblazor 我不知道如何在MudTreeView中设置复选框的大小和颜色。 <MudTreeViewItem Value="@item.CategoryName" Class="mud-treeview-item-content.mud-treeview-item-activated" Selected="item.IsChecked" SelectedChanged="eventArgs => { Check
浏览 23提问于2021-09-10得票数 2
回答已采纳
我正在尝试向carouselItem of MudBlazor添加一个图像。它的工作不正确，采取了错误的宽度和高度以及。
我的代码：
</MudCarouselItem>
<MudCarouselItem Transition="transition" Color="@Color.Secondary">
<div class="d-flex" style="height:100%">
<MudIcon Class="mx-auto my-auto"
浏览 20提问于2021-12-23得票数 0
1回答
我正在尝试在Dart代码中实例化一个Polymer元素。
以下是我的元素：
@CustomTag('card-component')
class CardComponent extends PolymerElement {
@published
String playerName;
CardComponent.created() : super.created();
}
到目前为止，我发现唯一的工作方式是：
Element y = new Element.tag('card-component');
但是我真正想做的是，通过访问器(而不是通过Htm
浏览 2提问于2014-12-07得票数 3
回答已采纳
我有一个应用程序，我想隐藏一些文本字段和下拉列表，有一些默认值，因为它是为最终用户，他们输入的字段是有限制的，他们不需要看到创建和编辑。
当它们可见时，一切工作正常。
是否有可能使它们隐藏，但仍具有默认值，以便成功保存。在标准的.net MVC下，我可以这样做，即使是隐藏字段也没有问题，但在.net核心下是不行的。传统的MVC有这样的代码：
<div class="form-group">
@*@Html.LabelFor(model => model.Priority, "Priority", htmlAttrib
浏览 0提问于2018-05-20得票数 0
? ? ? 我正在使用Blazor & MudBlazor组件，我在使用MudBlazor时遇到了问题，当我使用MudText打印for循环中的值时，它会打印循环中所有值的最终值'5‘。然而，当我使用类似段落标记的HTML元素时，它工作得很好。我想让MudText像普通的超文本标记语言一样工作。请参见附件。 在repo上查看此内容 https://try.mudblazor.com/snippet/QOGPbOvlUMTlQUoh ?
浏览 34提问于2021-10-11得票数 0
因此，我按照教程来理解在Rails上使用它的React语法，并且很好地得到了它，只有javascript，然后我尝试从这个教程中实现webpack，但我注意到，.jsx组件有一个非常不同的语法，我还试图复制-粘贴我的组件从第一个教程，不工作，React.createClass不再是，现在我不知道如何嵌套.jsx，在第一个教程，我不知道它是否是一种不同的反应或我可以在哪里找到例子。
浏览 0提问于2017-05-12得票数 1
回答已采纳
1回答
例如，我们有一个容器<ContainerName data=someData>并传递一些道具数据。
在这个容器中，我们使用重新组合，并具有以下代码：
const enhance = compose(
withProps({
statuses: ['ordered', 'received'],
}),
withProps(
// how do I pass props from this container to component ?
),
withState
浏览 3提问于2017-03-17得票数 2
回答已采纳
在我的小枝应用程序中，我有一个控制器呈现一个视图。
这一观点如下：
{% extends ':Template/Backend:backend.html.twig' %}
{% block title_wrapper %}
{% endblock %}
{% block body %}
My code
{% endblock %}
在backend.html.twig中，我有：
{% extends ':Template/base.html.twig' %}
{% block navbar %}
{% render controller ... %
浏览 0提问于2016-01-31得票数 12
1回答
我是在Mudblazor新来的，并试图覆盖扩展面板头的默认填充。下面是html的样子：
Mudblazor在后台创建一个带有.mud-expand-panel-header的div，这就是我想要更改底部填充的元素。我尝试了内联css并从css文件中更改样式，但没有成功。我还试图在pb-1标记上使用TitleContent，但该元素不接受类。对如何改变这种状况有什么想法吗？
浏览 4提问于2022-08-10得票数 0
如果您在谷歌的一些网站上查看HTML源代码，您将看到像<devsite-snackbar></devsite-snackbar>这样的标记，它们是文档体的一部分，但不是有效的HTML。
这是如何允许的，是否可以使用这样的自定义标记？
浏览 2提问于2020-10-22得票数 1
1回答
我有标记文件，在那里我确实使用了普通的HTML标签，但我也想使用角组件选择器，但没有成功。对于angularjs，我可以使用编译函数来完成，但是在新的角度上，这个过程看起来要复杂得多。这是一个
我想要重新创造一个过程，那就是有角的团队是如何做他们的指南页面的。尤其是倾斜的材料。指南是在标记中编写的，但我不知道他们如何能够将示例组件嵌入到这些页面中。选择器在标记文件中添加的组件将不会呈现。
浏览 3提问于2020-09-11得票数 0
回答已采纳
我想要浅层测试我的组件，我知道浅层测试只测试一个级别的深度。我的问题是我会收到警告，因为我的组件需要mapStateToProps和mapDispatchToProps接收的道具。这让我想知道如何正确地将这个道具发送到我的浅层渲染组件，而不重复这些方法。我正在使用jest和酶。
浏览 1提问于2017-08-15得票数 0
我想使用HTML5，因为它也支持Iphone，而且我真的很喜欢它的功能，但是如果它不能完全兼容所有的浏览器，我该怎么办？特别是IE家族。那么有没有办法通过添加一些js脚本e.t.c。因此，HTML5及其js在IE中也可以正常工作，就像它可以在其他浏览器上工作一样。这样我就可以在不考虑浏览器兼容性的情况下使用它。在html5中也有很多游戏引擎，但是如果大多数IE浏览器都不支持呢？或者有人可以告诉我，在不考虑兼容性问题的情况下，我可以利用html5的多少优势？
提前感谢
浏览 1提问于2011-02-01得票数 32
回答已采纳
我在React测试库中使用了getByTestId函数： const button = wrapper.getByTestId("button");
expect(heading.textContent).toBe("something"); 是否可以/建议改为搜索HTML元素？所以就像这样： const button = wrapper.getByHTML("button");
const heading = wrapper.getByHTML("h1");
浏览 103提问于2019-01-17得票数 46
回答已采纳
1回答
我们需要在AEM6.2中自定义OOB 共享和批处理编辑器组件。(分别可在/libs/dam/components/asseteditor &/libs/dam/components/assetshare路径上获得)
我能看到的几个挑战是:1.组件对话框仅在经典UI中可用，但我们希望在touch UI模式中使用相同的对话框。2.我们能否获得这些组件的Java代码，以便自定义这些组件的功能？实现这一目标的最佳途径是什么？
浏览 3提问于2017-04-03得票数 1
回答已采纳
如何将列添加到使用嵌套对象的MudBlazor DataGrid中？
例如，我有一个名为Foo的基本实体，它的组成如下：
public class Foo
{
public int Id {get; set;}
public Bar Bar {get; set;}
}
public class Bar
{
public string Name {get; set;}
}
如何将Bar.Name添加到中的列中
<MudDataGrid Items="@someIEnumerableOfTypeFoo">
<Columns>
浏览 26提问于2022-11-10得票数 1
回答已采纳
1回答
我有Blazor服务器端的项目，首先是MudBlazor，组件工作正常(我专注于文本字段)。然后我将黑色仪表板模板(https://www.creative-tim.com/product/black-dashboard)添加到我的项目中。问题就来了。 这是我的_Host.cshtml @page "/"
@namespace PPJ_Internal_Website_BlazorServer.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOC
浏览 80提问于2021-10-23得票数 0
如何正确地将样式化应用于特定的MudBlzaor组件到表中？
码
<MudTable>
<HeaderContent>
<MudTh> Some Random Header</MudTh>
...
</HeaderContent>
<RowTemplate>
<MudTd> Some Random Content</MudTd>
</RowTemplate>
</MudTable>
问题
1:我是
浏览 2提问于2021-07-21得票数 1
回答已采纳
1回答
有了webcomponents，您可以使用/deep/来定位阴影的内部元素，在我尝试使用事件委托之前，它工作得很好。
常规的点击功能将起作用：
$('html /deep/ a').on('click', function(e) {
e.preventDefault()
console.log('foo')
})
委派似乎没有效果：
$('html').on('click', '/deep/ a', function(e) {
e.preventDefault()
console.l
浏览 0提问于2014-12-30得票数 2
嗨，我已经创建了一个弹出的按钮点击html，它工作得很好。下面是我的HTML码：{{title}} {{signUp}}
<div #myModal class="modal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
&l
浏览 0提问于2018-01-16得票数 0
我想做一个在WebView中调用js原生方法的演示，但失败了。
下面是C#代码：
namespace webviewDemo
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
[AllowForWeb]
public sealed class
浏览 12提问于2019-08-03得票数 1
回答已采纳
我使用的是一个可以用HTML编写的组件。例如，在中，我创建了文本：
<a-entity text="text: 0"></a-entity>
如何更新text组件的text属性？
浏览 8提问于2016-08-04得票数 1
回答已采纳
我正在使用此示例( )在Ember.js应用程序中实现服务器端分页。使用该示例，路由器直接在结果内容数组中放置有关分页的元数据。
在模板层，代码如下所示：
<tfoot>
<tr>
<td>
<ul class="pagination pagination-sm">
<li><a {{action 'firstPage'}}><<</a></li>
<l
浏览 2提问于2014-12-11得票数 0
回答已采纳
1回答
下面的第一个组件本身工作非常好，但是我希望从另一个文件导入该组件：
import * as React from 'react'
const mapStateToProps = 'something here'
const mapDispatchToProps = {
dispatchSetSomething,
dispatchSetSomething
}
type IProps = IContainer & ReturnType<typeof mapStateToProps> & typeof mapDispatchTo
浏览 3提问于2022-04-27得票数 2
用例：客户端希望构建一个库，该库由Range2组件组成，但向该库的最终用户(开发人员)公开抽象的、与技术无关的接口，这样那些用户就可以使用普通的JavaScript，而不知道库的内部结构。
困难来自以下方面：
有一个页面，它使用普通的JavaScript。本页面由第三方开发.
第三方应该能够在页面上的特定位置(DOM节点)插入给定的角2分量。
假设组件是<mg-input>，它应该显示在普通JavaScript页面的标题中，而不仅仅是在那里--还应该显示在页面下的一个表单中。两个不同的位置，两个不同的DOM节点，它们之间有普通的html。
问题：如何在特定DOM
浏览 0提问于2017-01-13得票数 14
每当我触发readItem()和handleChange()之后，浏览器都会抛出错误"this.setState不是一个函数“。除此之外，HandleChange()也能很好地工作。有人能告诉我是什么导致了这个错误以及如何修复它吗？我还期望readtItem()函数更新状态，但这并没有发生。任何帮助都将不胜感激。 谢谢 import React from 'react';
import ListItems from '../src/components/ListItems/ListItems.component';
import Button from
浏览 25提问于2020-10-10得票数 0
回答已采纳
我想用angular 2 ..please创建动态html控件，建议一些好的答案..
这是我的组件
@Component({
selector: 'dcfield',
templateUrl: '/html/shared/dynamic-controls.html',
})
export class DynamicControlComponent implements OnInit {
@Input()
clientComboData: any[];
@Input()
form: FormGroup;
ta
浏览 0提问于2017-02-13得票数 0
我必须在模板中定义一个变量，这样我的模板渲染器就会替换其中的值。然后我必须在我拥有的一些javascript函数中使用这个变量。
这个变量本身是一些html，我希望能够格式化它，使它看起来像HTML，而不是一个不可读的超长单行字符串……
<script>
var myHTML = "
<div>
content
</div>"
</script>
我能看到的让它工作的唯一方法就是这样做(真的很难看)
<script>
var myHTML = ""
+"<div>
浏览 0提问于2016-09-12得票数 1
我一直在尝试使用外部javascript来组装这个基本的购物车。它在jsBin中工作得很好，但当我尝试通过浏览器运行时，它就不能工作了。我猜这是我的html。任何帮助都将不胜感激。
浏览 0提问于2013-04-30得票数 0
回答已采纳
2回答
所以，我读过，正在加载Roboto字体。我希望有一个简单的组件，如：
const theme = createMuiTheme();
const App = () => {
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
<p>Hello world!</p>
</MuiThemeProvider>
);
};
将使用Roboto (默认字体)对p标记进行样式设置。但这是不可能的。如果我将代码更改为：
const
浏览 0提问于2018-08-15得票数 11
回答已采纳
我正在尝试创建我自己的自定义音频HTML5控件。我读过这个，它也有一个有用的例子。
我在本地工作，单击元素后会得到以下错误：
this is clicked: <button class="play-button audio-button icon icon-loudspeaker" data-audio-button>…</button>
Uncaught TypeError: undefined is not a function
我想知道我缺少的是什么，因为教程的例子确实有效，我稍微修改了一下。
HTML5：
<button cla
浏览 5提问于2014-09-29得票数 0
回答已采纳
1回答
所以我正在学习如何使用npm库，我找到了这个旋转木马。我在我的项目中实现了它，但我不确定如何更改属性。这是文档：，这是我当前的代码：
import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import Project1 from './Project1'
import
浏览 0提问于2019-11-19得票数 0
1回答
我正在尝试创建自己的自定义组件，该组件继承自MudTable。在我的自定义组件中，我创建了一个具有IEnumerable类型的TItem属性，然后从父类发送一个DataSource，并通过参数定义TItem类型。我遇到的问题是，MudTable使用@context从DataSource中获取值，当您使用预定义的类型给DataSource时，这个值是已知的。你可以在这里看到。
但是，当DataSource是泛型类型时，@context不知道从哪个属性中获取值，如何做到这一点。
父组件，它包括自定义组件：
<CETable DataSource="Persons" ItemT
浏览 22提问于2021-12-09得票数 1
回答已采纳
1回答
我在多选择模式下绑定到select字段，遇到了"For“属性的问题。
当使用select字段时，必须设置选项类型，在本例中它将是字符串。要使验证工作正常，需要设置"For"-Property并指向与select字段选项(和string)相同类型的有效属性。但是我期待一个多重选择，所以我绑定到我的模型中的一个IEnumerable，并且验证代码也被设置为这个属性。我没有必要的属性来绑定，即使我有，验证也不会像预期的那样工作。
我该怎么做呢？我尝试构建一个自定义表达式，该表达式指向数组的第一个元素，但我对表达式有缺点，无法使其工作。
@using FluentValida
浏览 12提问于2022-03-29得票数 1
回答已采纳
1回答
我想把我的角度应用程序集成到其他许多简单的网页中，但是没有iframe。
在下一段代码中，我们看到一个简单的、外部的html网页，名为"Shoes“。
“鞋店”是一个卖鞋的网络。我的目标是在<div id="my-angular-app"></div>中将我的整个My-角应用程序添加到div中。
正如您所看到的，首先，我们需要一个异步请求，然后在varible中实例化My-角应用程序。
目标是做一些类似于下一个html的事情。看看我的角度应用程序是如何被称为异步的。
<!doctype html>
<html lang="
浏览 3提问于2021-04-08得票数 1
回答已采纳
我有一个React组件，我正在React之上集成Ant设计框架。我有一个包含3列的Ant行。我还有一个css文件，里面有自定义的css。我想使用自定义css并在其上添加css。当组件呈现时，我的css文件中的css都没有实现到组件中。
下面是react组件：
import React, { Component } from 'react';
// import Logo from '../../../static/images/bootup-logo.png';
import styles from './Topbar.css';
import
浏览 3提问于2019-01-08得票数 1
2回答
我在查找jquery设置autocomplete的值时遇到了麻烦。我知道它在后台使用了一个组合框来控制什么是可搜索的自动补全。我一直在摆弄ui.item，但一点运气都没有。我能想到的唯一方法就是创建一个数组，并在发生变化时将数据保存到该数组中。我认为jquery必须在某个地方设置每个框的值，但我在html中找不到它。您可以看到我在中处理的内容。最后，我想得到的是一种将当前值保存到数据库中的方法，这样我就可以保存状态。
我使用的是jquery网站上找到的中的jquery自动补全代码。
浏览 0提问于2011-12-28得票数 1
回答已采纳
让我们假设在React 16应用程序中有这个组件的层次结构：
组件A由组件B和C组成
这些组件由具有非零高度的块HTML元素表示.
在componentDidMount of component B中，我使用香草JavaScript来找出折叠元素的高度。这使得底层DOM发生了变异。
在组件componentDidMount方法C中，我还使用香草JS从组件的顶部了解偏移量，如、B、和C。
我知道这两个组件的偏移量不可能是相同的，但是在我最初的代码版本中是一样的。在setTimeout中封装偏移量计算函数后，得到了较好的测量结果。
setTimeout(() => {this.calcula
浏览 1提问于2018-01-18得票数 0
1回答
我有一个包含一些HTML标记的字符串。
我想把它传递到组件的插槽中。
此组件在其他地方使用，在开始标记和结束标记之间有常规的html标记，并按预期工作。
问题是胡须语法输出转义的HTML，{{myFormattedText}}变成了字面上的Some line of <span>text with formatting</span> that is passed in from somewhere else，这不是我们想要的。
将其传递到组件上的v-html="myFormattedText"属性中，将组件标记中的所有内容替换为变量字符串。
有办法这样做吗
浏览 0提问于2019-07-01得票数 2
回答已采纳
1回答
我使用MudBlazor框架创建了一个简单的程序
Test.razor文件
<MudTextField @bind-Value="TextValue" Label="Standard" Variant="Variant.Text"></MudTextField>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="Clicked" Class="mt-2"&
浏览 26提问于2022-03-03得票数 0
1回答
我有一个问题(我认为这是一个相当常见的问题)，我无法找到一个很好的方法来解决当前的角4.x架构。也许有一种方法我还没有找到，但我已经搜索了相当广泛。
我想插入一些动态的，用户生成的HTML内容到一个角度应用程序。这个HTML内容还包括一些已知的(包括在模块声明中)应该呈现的角组件。下面是一些puesdo应用程序HTML可能会帮助我解释：
<app-component>
<!-- standard angular header and router-outlet -->
<app-header>
<app-nav>
浏览 2提问于2017-05-26得票数 8
回答已采纳
我正在使用MudTable of MudBlazor。在使用函数事件OnRowClick之后，如何读取表当前页的值？
浏览 4提问于2021-06-02得票数 0
我看到的所有示例都说明要执行下面的代码，但这会使而不是工作(请参阅下面的jsfiddle )。
html { height: 100%; min-height: 100%; }
body { height: 100%; min-height: 100%; }
.stretchable { position: absolute; width: 100px; height: 100%; min-height: 100%; }
显示它不工作：
如何使用CSS仅强制div作为文档体的高度，而不是窗口？
浏览 6提问于2014-08-14得票数 0
回答已采纳
我有一个用户界面:重复拍卖项目内的表。它是一个常规的html表格，因为当你点击一个竞价commandLink时，就会在所选的拍卖项目下打开一行，并显示一个竞价组件。Bid commandLink使用ajax的方式如下：
<f:ajax listener="#{bean.addBidView(lot)}" render="bidView" />
addBidView正在更新auctionItems的映射，这就是如何打开正确的选定行。当用户再次单击同一个Bid链接时，addBidView会计算出该链接并关闭竞价组件。
现在假设用户单击了几行，从而打开了几
浏览 1提问于2012-02-27得票数 1
回答已采纳
我正在尝试为我的Blazor webapp构建一个基本的对话框组件，它应该在代表对话步骤的不同子组件之间进行转换。 但到目前为止，我还没有找到一种方法来将数量可变的不同组件传递给这个基本对话框。 我希望用法看起来像这样： <Dialog>
<DialogItem>
@*SomeComponent*@
</DialogItem>
<DialogItem>
@*AnotherComponent*@
</DialogItem>
</Dialog> 有一些组件库(比
浏览 35提问于2021-08-27得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
