- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在我的 Blazor 项目中使用“Syncfusion”SfSidebar。我从这个网站得到以下代码:点击 here导航到该站点。
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons
<div class="col-lg-12 col-sm-12 col-md-12">
<div id="wrapper">
<SfSidebar Width="220px" DockSize="72px" EnableDock="true" Position="@Position" @ref="Sidebar" HtmlAttributes="@HtmlAttribute">
<ChildContent>
<div class="dock">
<ul>
<li class="sidebar-item" id="toggle" @onclick="@Toggle">
<span class="e-icons expand"></span>
<span class="e-text" title="menu">Menu</span>
</li>
<li class="sidebar-item">
<span class="e-icons home"></span>
<span class="e-text" title="home">Home</span>
</li>
<li class="sidebar-item">
<span class="e-icons profile"></span>
<span class="e-text" title="profile">Profile</span>
</li>
<li class="sidebar-item">
<span class="e-icons info"></span>
<span class="e-text" title="info">Info</span>
</li>
<li class="sidebar-item">
<span class="e-icons settings"></span>
<span class="e-text" title="settings">Settings</span>
</li>
</ul>
</div>
</ChildContent>
</SfSidebar>
<!-- end of sidebar element -->
<!-- main content declaration -->
<div id="main-content container-fluid col-md-12">
<div class="title">Main content</div>
<div class="sub-title">
<p>Click the radio button to switch the Sidebar position</p>
<div class="column">
<!-- RadioButton element declaration -->
<SfRadioButton @bind-Checked="@Leftbtn" Value="Left" Label="Left" Name="state" ValueChange="PositionChange" TChecked="string"></SfRadioButton>
</div>
<div class="column">
<!-- RadioButton element declaration -->
<SfRadioButton @bind-Checked="@Leftbtn" Value="Right" Label="Right" Name="state" ValueChange="PositionChange" TChecked="string"></SfRadioButton>
</div>
</div>
</div>
</div>
</div>
@code {
SfSidebar Sidebar;
public string Leftbtn = "Left";
private SidebarPosition Position { get; set; }
public void Toggle()
{
this.Sidebar.Toggle();
}
public void PositionChange(Syncfusion.Blazor.Buttons.ChangeArgs<string> args)
{
if (args.Value == "Left")
{
this.Position = SidebarPosition.Left;
}
else
{
this.Position = SidebarPosition.Right;
}
}
Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()
{
{"class", "dockSidebar" }
};
}
<style>
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
#wrapper .sub-title .column {
display: inline-block;
padding: 10px;
}
/* custom code start */
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
.sb-content-tab .center {
display: block;
}
/* custom code end */
/* end of content area styles */
/* Sidebar styles */
.dockSidebar.e-sidebar.e-right.e-close {
visibility: visible;
transform: translateX(0%);
}
.dockSidebar .e-icons::before {
font-size: 25px;
}
/* dockbar icon Style */
.dockSidebar .home::before {
content: '\e102';
}
.dockSidebar .profile::before {
content: '\e10c';
}
.dockSidebar .info::before {
content: '\e11b';
}
.dockSidebar .settings::before {
content: '\e10b';
}
.e-sidebar .expand::before,
.e-sidebar.e-right.e-open .expand::before {
content: '\e10f';
}
.e-sidebar.e-open .expand::before,
.e-sidebar.e-right .expand::before {
content: '\e10e';
}
/* end of dockbar icon Style */
.dockSidebar.e-close .sidebar-item {
padding: 5px 20px;
}
.dockSidebar.e-dock.e-close span.e-text {
display: none;
}
.dockSidebar.e-dock.e-open span.e-text {
display: inline-block;
}
.dockSidebar li {
list-style-type: none;
cursor: pointer;
}
.dockSidebar ul {
padding: 0px;
}
.dockSidebar.e-sidebar ul li:hover span {
color: white
}
.dockSidebar span.e-icons {
color: #c0c2c5;
line-height: 2
}
.e-open .e-icons {
margin-right: 16px;
}
.e-open .e-text {
overflow: hidden;
text-overflow: ellipsis;
line-height: 23px;
font-size: 15px;
}
.sidebar-item {
text-align: center;
border-bottom: 1px solid rgba(229, 229, 229, 0.54);
}
.e-sidebar.e-open .sidebar-item {
text-align: left;
padding-left: 15px;
color: #c0c2c5;
}
.dockSidebar.e-sidebar {
background: #2d323e;
overflow: hidden;
}
/* custom generated icons styles */
@@font-face {
font-family: 'e-icons';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjciQ6oAAAEoAAAAVmNtYXBH1Ec8AAABsAAAAHJnbHlmKcXfOQAAAkAAAAg4aGVhZBLt+DYAAADQAAAANmhoZWEHogNsAAAArAAAACRobXR4LvgAAAAAAYAAAAAwbG9jYQukCgIAAAIkAAAAGm1heHABGQEOAAABCAAAACBuYW1lR4040wAACngAAAJtcG9zdEFgIbwAAAzoAAAArAABAAADUv9qAFoEAAAA//UD8wABAAAAAAAAAAAAAAAAAAAADAABAAAAAQAAlbrm7l8PPPUACwPoAAAAANfuWa8AAAAA1+5ZrwAAAAAD8wPzAAAACAACAAAAAAAAAAEAAAAMAQIAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA4QLhkANS/2oAWgPzAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABeAAAADgAIAAIABuEC4QnhD+ES4RvhkP//AADhAuEJ4QvhEuEa4ZD//wAAAAAAAAAAAAAAAAABAA4ADgAOABYAFgAYAAAAAQACAAYABAADAAgABwAKAAkABQALAAAAAAAAAB4AQABaAQYB5gJkAnoCjgKwA8oEHAAAAAIAAAAAA+oDlQAEAAoAAAEFESERCQEVCQE1AgcBZv0mAXQB5P4c/g4Cw/D+lwFpAcP+s24BTf6qbgAAAAEAAAAAA+oD6gALAAATCQEXCQEHCQEnCQF4AYgBiGP+eAGIY/54/nhjAYj+eAPr/ngBiGP+eP54YwGI/nhjAYgBiAAAAwAAAAAD6gOkAAMABwALAAA3IRUhESEVIREhFSEVA9b8KgPW/CoD1vwq6I0B64wB640AAAEAAAAAA+oD4QCaAAABMx8aHQEPDjEPAh8bIT8bNS8SPxsCAA0aGhgMDAsLCwoKCgkJCQgHBwYGBgUEBAMCAgECAwUFBggICQoLCwwMDg0GAgEBAgIDBAMIBiIdHh0cHBoZFhUSEAcFBgQDAwEB/CoBAQMDBAUGBw8SFRYYGhsbHB0cHwsJBQQEAwIBAQMEDg0NDAsLCQkJBwYGBAMCAQEBAgIDBAQFBQYGBwgICAkJCgoKCwsLDAwMGRoD4gMEBwQFBQYGBwgICAkKCgsLDAwNDQ4ODxAQEBEWFxYWFhYVFRQUExIRERAOFxMLCggIBgYFBgQMDAwNDg4QDxERERIJCQkKCQkJFRQJCQoJCQgJEhERERAPDw4NDQsMBwgFBgYICQkKDAwODw8RERMTExUUFhUWFxYWFxEQEBAPDg4NDQwMCwsKCgkICAgHBgYFBQQEBQQAAAAAAwAAAAAD8wPzAEEAZQDFAAABMx8FFREzHwYdAg8GIS8GPQI/BjM1KwEvBT0CPwUzNzMfBR0CDwUrAi8FPQI/BTMnDw8fFz8XLxcPBgI+BQQDAwMCAT8EBAMDAwIBAQIDAwMEBP7cBAQDAwMCAQECAwMDBAQ/PwQEAwMDAgEBAgMDAwQE0AUEAwMDAgEBAgMDAwQFfAUEAwMDAgEBAgMDAwQFvRsbGRcWFRMREA4LCQgFAwEBAwUHCgsOEBETFRYXGRocHR4eHyAgISIiISAgHx4eHRsbGRcWFRMREA4LCQgFAwEBAwUHCgsOEBETFRYXGRsbHR4eHyAgISIiISAgHx4eAqYBAgIDBAQE/rMBAQEDAwQEBGgEBAQDAgIBAQEBAgIDBAQEaAQEBAMDAQEB0AECAwMDBAVoBAQDAwMCAeUBAgIEAwQEaAUEAwMDAgEBAgMDAwQFaAQEAwQCAgElERMVFhcZGhwdHh4fICAhIiIhICAfHh4dGxsZFxYVExEQDgsJCAUDAQEDBQcKCw4QERMVFhcZGxsdHh4fICAhIiIhICAfHh4dHBoZFxYVExEQDgsKBwUDAQEDBQcKCw4AAAIAAAAAA9MD6QALAE8AAAEOAQcuASc+ATceAQEHBgcnJgYPAQYWHwEGFBcHDgEfAR4BPwEWHwEeATsBMjY/ATY3FxY2PwE2Ji8BNjQnNz4BLwEuAQ8BJi8BLgErASIGApsBY0tKYwICY0pLY/7WEy4nfAkRBWQEAwdqAwNqBwMEZAURCXwnLhMBDgnICg4BEy4mfQkRBGQFAwhpAwNpCAMFZAQSCH0mLhMBDgrICQ4B9UpjAgJjSkpjAgJjAZWEFB4yBAYIrggSBlIYMhhSBhIIrggFAzIfE4QJDAwJhBQeMgQGCK4IEgZSGDIYUgYSCK4IBQMyHxOECQwMAAEAAAAAAwED6gAFAAAJAicJAQEbAef+FhoBzf4zA+v+Ff4VHwHMAc0AAAAAAQAAAAADAQPqAAUAAAEXCQEHAQLlHf4zAc0a/hYD6x7+M/40HwHrAAEAAAAAA/MD8wALAAATCQEXCQE3CQEnCQENAY7+cmQBjwGPZP5yAY5k/nH+cQOP/nH+cWQBjv5yZAGPAY9k/nEBjwAAAwAAAAAD8wPzAEAAgQEBAAAlDw4rAS8dPQE/DgUVDw4BPw47AR8dBRUfHTsBPx09AS8dKwEPHQL1DQ0ODg4PDw8QEBAQERERERUUFBQTExITEREREBAPDw0ODAwLCwkJCAcGBgQEAgIBAgIEAwUFBgYHBwkICQoCygECAgQDBQUGBgcHCQgJCv3QDQ0ODg4PDw8QEBAQERERERUUFBQTExITEREREBAPDw0ODAwLCwkJCAcGBgQEAgL8fgIDBQUHCAkKCwwNDg8PERESExQUFRYWFhgXGBkZGRoaGRkZGBcYFhYWFRQUExIREQ8PDg0MCwoJCAcFBQMCAgMFBQcICQoLDA0ODw8RERITFBQVFhYWGBcYGRkZGhoZGRkYFxgWFhYVFBQTEhERDw8ODQwLCgkIBwUFAwLFCgkICQcHBgYFBQMEAgIBAgIEBAYGBwgJCQsLDAwODQ8PEBARERETEhMTFBQUFREREREQEBAQDw8PDg4ODQ31ERERERAQEBAPDw8ODg4NDQIwCgkICQcHBgYFBQMEAgIBAgIEBAYGBwgJCQsLDAwODQ8PEBARERETEhMTFBQUFRoZGRkYFxgWFhYVFBQTEhERDw8ODQwLCgkIBwUFAwICAwUFBwgJCgsMDQ4PDxEREhMUFBUWFhYYFxgZGRkaGhkZGRgXGBYWFhUUFBMSEREPDw4NDAsKCQgHBQUDAgIDBQUHCAkKCwwNDg8PERESExQUFRYWFhgXGBkZGQAAAQAAAAAD6gPqAEMAABMhHw8RDw8hLw8RPw6aAswNDgwMDAsKCggIBwUFAwIBAQIDBQUHCAgKCgsMDAwODf00DQ4MDAwLCgoICAcFBQMCAQECAwUFBwgICgoLDAwMDgPrAQIDBQUHCAgKCgsLDA0NDv00Dg0NDAsLCgoICAcFBQMCAQECAwUFBwgICgoLCwwNDQ4CzA4NDQwLCwoKCAgHBQUDAgAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAA0AAQABAAAAAAACAAcADgABAAAAAAADAA0AFQABAAAAAAAEAA0AIgABAAAAAAAFAAsALwABAAAAAAAGAA0AOgABAAAAAAAKACwARwABAAAAAAALABIAcwADAAEECQAAAAIAhQADAAEECQABABoAhwADAAEECQACAA4AoQADAAEECQADABoArwADAAEECQAEABoAyQADAAEECQAFABYA4wADAAEECQAGABoA+QADAAEECQAKAFgBEwADAAEECQALACQBayBlLWljb25zLW1ldHJvUmVndWxhcmUtaWNvbnMtbWV0cm9lLWljb25zLW1ldHJvVmVyc2lvbiAxLjBlLWljb25zLW1ldHJvRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AaQBjAG8AbgBzAC0AbQBlAHQAcgBvAFIAZQBnAHUAbABhAHIAZQAtAGkAYwBvAG4AcwAtAG0AZQB0AHIAbwBlAC0AaQBjAG8AbgBzAC0AbQBlAHQAcgBvAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AaQBjAG8AbgBzAC0AbQBlAHQAcgBvAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0AB2hvbWUtMDELQ2xvc2UtaWNvbnMHbWVudS0wMQR1c2VyB0JUX2luZm8PU2V0dGluZ19BbmRyb2lkDWNoZXZyb24tcmlnaHQMY2hldnJvbi1sZWZ0CE1UX0NsZWFyDE1UX0p1bmttYWlscwRzdG9wAAA=) format('truetype');
font-weight: normal;
font-style: normal;
}
/* end of custom generated icons styles */
/* custom code start */
.sf-new .sb-header,
.sf-new .sb-bread-crumb,
.sf-new #action-description,
.sf-new .sb-action-description,
.sf-new .e-tab-header,
.sf-new .description-section,
.sf-new #description-section,
.sf-new #description,
.sf-new #navigation-btn,
.sf-new .sb-toolbar-splitter,
.sf-new .sb-footer, .sf-new #left-sidebar, .sb-component-name {
display: none
}
.sf-new .sb-right-pane.e-view {
margin-left: 0px !important;
}
.sb-action-description.sb-rightpane-padding {
padding-bottom: 0;
}
.description-section {
padding-top: 0;
}
#sb-content-header {
display: none
}
#content-tab.sb-content-tab {
height: 100% !important;
}
.sf-new .container-fluid,
.sf-new .container-fluid .control-section,
#sidebar-section, description-section sb-rightpane-padding {
padding: 0;
}
.sb-component-name.sb-rightpane-padding {
margin-top: -56px;
}
.sb-right-pane.e-view {
left: 0;
padding-left: 0;
padding-right: 0;
top: 0;
overflow-y: hidden;
}
.sb-desktop-wrapper {
height: 100%;
}
.sb-component-name h1 {
padding-top: 0;
}
.sf-new .sb-content.e-view {
top: 0;
}
/* end of newTab support */
/* custom code end */
/* end of sidebar styles */
'SfSidebar.Toggle()' is obsolete: 'This method is deprecated and will no longer be used. Use the IsOpen property to achieve this case.'
然后我改变了
public void Toggle()
{
this.Sidebar.Toggle();
}
如下,
public void Toggle()
{
this.Sidebar.IsOpen();
}
然后我收到以下错误消息:-
Non-invocable member 'SfSidebar.IsOpen' cannot be used like a method.
如果你能帮我解决这个问题,我非常感激。
最佳答案
我们已经检查了您报告的侧边栏组件问题。 IsOpen 是 属性(property)侧边栏组件。您已经定义了 isOpen 属性,就像调用方法一样。这可能是您报告的问题的原因。
有关 IsOpen 属性的定义,请参阅以下代码片段。
<SfSidebar Width="220px" DockSize="72px" EnableDock="true" @bind-IsOpen="isOpen" Position="@Position" @ref="Sidebar" HtmlAttributes="@HtmlAttribute">
<ChildContent>
<div class="dock">
</div>
</ChildContent>
</SfSidebar>
@code {
public bool isOpen { get; set; }
public void Toggle()
{
if (isOpen)
{
isOpen = false;
}
else
{
isOpen = true;
}
}
}
请参阅下面的示例链接。
关于bootstrap-4 - Blazor Web 组件侧边栏错误 : "SfSidebar.Toggle()' is obsolete: blazor",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64587094/
有人可以告诉我 Bootstrap、Twitter Bootstrap 和 Bootstrap 3 之间有什么区别吗? 最佳答案 在 CSS 框架的上下文中,Bootstrap 和 Twitter B
什么是 Bootstrap 文档中的屏幕阅读器??? >>> bootstrap document 不知道什么是屏幕阅读器? 最佳答案 它是视力不佳或由于某种原因无法从屏幕上阅读的人使用的工具;它会向
我想更新网站上的 Bootstrap,但我不知道安装的版本。 如何仅使用 bootstrap.css 和 bootstrap.min.js 文件来识别 bootstrap 版本? CSS 文件中没有版
很抱歉问了这么一个愚蠢的问题,但我真的不清楚这些。 Bootstrap 是一个非常棒的库,它节省了开发人员的大量工作。 因为它提供了很多功能,比如 节省大量时间。 响应式功能。 一致的设计。 便于使用
我正在使用 ng2-bootstrap对于 Angular 2 项目。 这个包同时支持Bootstrap 3和4,我安装后默认使用Bootstrap 3。我没有找到任何关于切换的信息。 如何从 Boo
我计划在我的项目中使用 Bootstrap 4 和 angular 4,但我对 npm install --save @ng-bootstrap/ng-bootstrap 和 npm install
单击删除按钮后,我设置了警报。 但它的默认高度更大,我想让它更小(高度)。 我试过 display-4 属性(property),但它没有工作。 我已通过 w-50 将宽度设置为屏幕的一半,但警报的一
我使用 Bootstrap 按钮下拉菜单来显示表单。我通过调用 stopPropagation 禁用了单击时消失的下拉菜单(当用户操作表单时) .表单的元素之一是下拉列表。如果我使用 native h
twitter-bootstrap 中的“bootstrap”一词是什么意思?在许多 gem 中都有“bootstrap”这个词。我搜索了其中的含义,但无法得出结论。那么有人可以在这种情况下给出“Bo
由于 Bootstrap 5 不再使用 jQuery 并且正在使用 vanilla JS,我想知道是否仍然建议使用 Bootstrap-Vue,不管 Bootstrap-Vue 还不支持 Bootst
我正在使用 codeigniter 框架,我正在使用 bootstrap typeahead,一切都很好,但我的问题是当我将它放在 bootstrap 模式中时,bootstrap typeahead
我刚刚完成安装 bootstrap 5 版本 ^5.0.0-alpha1并在 app.js 中导入 Bootstrap import "bootstrap" 其他.js var myModal = n
我一直在尝试在使用选项卡的页面上实现 ScrollSpy。 这是我的 body 标签: 这是我的标签 HTML: Home Profile
如果您选择使用 Bootstrap-Xtra,您是否应该也包括原始的 bootstrap.css,或者 bootstrap-xtra.css 应该是一个完整的替代品。 例如,bootstrap-xtr
我正在使用 bootbox 创建一个对话框。 bootbox.dialog({ message: 'Datepicker input: ', title: "Custom label"
我正在将使用 Bootstrap 构建的 Web 应用程序迁移到 React 和 react-bootstrap,两者都很棒。我在 react-bootstrap 中没有看到的一件事是如何顺利集成 B
我正在使用 Bootstrap 3 RC,默认按钮是带有黑色文本的深灰色,而不是带有黑色文本的浅灰色。我已经尝试过 CDN 链接和离线。我还清空了我的浏览器缓存以防万一。有没有其他人经历过这个?这可能
在我的一个项目中,我曾经有 bootstrap-tagsinput http://timschlechter.github.io/bootstrap-tagsinput沿着 bootstrap-2.3
下拉菜单在 Angular-UI-Bootstrap 中不起作用?使用 Bootstrap-3 CSS 以下是代码。链接Click me for a dropdown出现。但不会在点击时切换。怎么了?
如何在 Bootstrap Table 中添加 Bootstrap 按钮 最佳答案 我已经想出了解决办法。我想和大家分享。 这是我的 table : # Visit
我是一名优秀的程序员,十分优秀!