Loading...
Loading...
Compare original and translation side by side
SfRibbon (Main Container)
├── RibbonFileMenuSettings (Optional File Menu)
└── RibbonTabs
└── RibbonTab (Home, Insert, Design...)
└── RibbonGroups
└── RibbonGroup (Clipboard, Font...)
└── RibbonCollections
└── RibbonCollection (Row/Column Layout)
└── RibbonItems
└── RibbonItem (Button, Dropdown, etc.)SfRibbon (主容器)
├── RibbonFileMenuSettings (可选文件菜单)
└── RibbonTabs
└── RibbonTab (开始、插入、设计...)
└── RibbonGroups
└── RibbonGroup (剪贴板、字体...)
└── RibbonCollections
└── RibbonCollection (行/列布局)
└── RibbonItems
└── RibbonItem (Button、Dropdown等)@using Syncfusion.Blazor
@using Syncfusion.Blazor.Ribbon
@using Syncfusion.Blazor.SplitButtons
<div style="width: 100%">
<SfRibbon>
<RibbonTabs>
<RibbonTab HeaderText="Home">
<RibbonGroups>
<RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row">
<RibbonCollections>
<RibbonCollection>
<RibbonItems>
<RibbonItem Type="RibbonItemType.SplitButton">
<RibbonSplitButtonSettings Content="Paste" IconCss="e-icons e-paste" Items="@pasteOptions">
</RibbonSplitButtonSettings>
</RibbonItem>
</RibbonItems>
</RibbonCollection>
<RibbonCollection>
<RibbonItems>
<RibbonItem Type="RibbonItemType.Button">
<RibbonButtonSettings Content="Cut" IconCss="e-icons e-cut" OnClick="@OnCut">
</RibbonButtonSettings>
</RibbonItem>
<RibbonItem Type="RibbonItemType.Button">
<RibbonButtonSettings Content="Copy" IconCss="e-icons e-copy" OnClick="@OnCopy">
</RibbonButtonSettings>
</RibbonItem>
</RibbonItems>
</RibbonCollection>
</RibbonCollections>
</RibbonGroup>
</RibbonGroups>
</RibbonTab>
</RibbonTabs>
</SfRibbon>
</div>
@code {
private List<DropDownMenuItem> pasteOptions = new List<DropDownMenuItem>()
{
new DropDownMenuItem{ Text = "Keep Source Format" },
new DropDownMenuItem{ Text = "Merge Format" },
new DropDownMenuItem{ Text = "Keep Text Only" }
};
private void OnCut(MouseEventArgs args) { /* Handle cut action */ }
private void OnCopy(MouseEventArgs args) { /* Handle copy action */ }
}@using Syncfusion.Blazor
@using Syncfusion.Blazor.Ribbon
@using Syncfusion.Blazor.SplitButtons
<div style="width: 100%">
<SfRibbon>
<RibbonTabs>
<RibbonTab HeaderText="Home">
<RibbonGroups>
<RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row">
<RibbonCollections>
<RibbonCollection>
<RibbonItems>
<RibbonItem Type="RibbonItemType.SplitButton">
<RibbonSplitButtonSettings Content="Paste" IconCss="e-icons e-paste" Items="@pasteOptions">
</RibbonSplitButtonSettings>
</RibbonItem>
</RibbonItems>
</RibbonCollection>
<RibbonCollection>
<RibbonItems>
<RibbonItem Type="RibbonItemType.Button">
<RibbonButtonSettings Content="Cut" IconCss="e-icons e-cut" OnClick="@OnCut">
</RibbonButtonSettings>
</RibbonItem>
<RibbonItem Type="RibbonItemType.Button">
<RibbonButtonSettings Content="Copy" IconCss="e-icons e-copy" OnClick="@OnCopy">
</RibbonButtonSettings>
</RibbonItem>
</RibbonItems>
</RibbonCollection>
</RibbonCollections>
</RibbonGroup>
</RibbonGroups>
</RibbonTab>
</RibbonTabs>
</SfRibbon>
</div>
@code {
private List<DropDownMenuItem> pasteOptions = new List<DropDownMenuItem>()
{
new DropDownMenuItem{ Text = "Keep Source Format" },
new DropDownMenuItem{ Text = "Merge Format" },
new DropDownMenuItem{ Text = "Keep Text Only" }
};
private void OnCut(MouseEventArgs args) { /* Handle cut action */ }
private void OnCopy(MouseEventArgs args) { /* Handle copy action */ }
}<SfRibbon>
<RibbonTabs>
<RibbonTab HeaderText="Home"><!-- Home commands --></RibbonTab>
<RibbonTab HeaderText="Insert"><!-- Insert commands --></RibbonTab>
<RibbonTab HeaderText="Design"><!-- Design commands --></RibbonTab>
</RibbonTabs>
</SfRibbon><SfRibbon>
<RibbonTabs>
<RibbonTab HeaderText="Home"><!-- Home commands --></RibbonTab>
<RibbonTab HeaderText="Insert"><!-- Insert commands --></RibbonTab>
<RibbonTab HeaderText="Design"><!-- Design commands --></RibbonTab>
</RibbonTabs>
</SfRibbon><RibbonTab HeaderText="Home">
<RibbonGroups>
<RibbonGroup HeaderText="Clipboard"><!-- Copy/Paste items --></RibbonGroup>
<RibbonGroup HeaderText="Font"><!-- Font items --></RibbonGroup>
<RibbonGroup HeaderText="Paragraph"><!-- Alignment items --></RibbonGroup>
</RibbonGroups>
</RibbonTab><RibbonTab HeaderText="Home">
<RibbonGroups>
<RibbonGroup HeaderText="Clipboard"><!-- Copy/Paste items --></RibbonGroup>
<RibbonGroup HeaderText="Font"><!-- Font items --></RibbonGroup>
<RibbonGroup HeaderText="Paragraph"><!-- Alignment items --></RibbonGroup>
</RibbonGroups>
</RibbonTab><SfRibbon>
<RibbonFileMenuSettings Visible="true" MenuItems="@fileMenuItems">
</RibbonFileMenuSettings>
<RibbonTabs><!-- tabs here --></RibbonTabs>
</SfRibbon><SfRibbon>
<RibbonFileMenuSettings Visible="true" MenuItems="@fileMenuItems">
</RibbonFileMenuSettings>
<RibbonTabs><!-- tabs here --></RibbonTabs>
</SfRibbon><RibbonItem Type="RibbonItemType.ComboBox">
<RibbonComboBoxSettings DataSource="@fontFamilies"
FieldSettings="@fieldSettings"
AllowFiltering="true">
</RibbonComboBoxSettings>
</RibbonItem><RibbonItem Type="RibbonItemType.ComboBox">
<RibbonComboBoxSettings DataSource="@fontFamilies"
FieldSettings="@fieldSettings"
AllowFiltering="true">
</RibbonComboBoxSettings>
</RibbonItem><RibbonItem Type="RibbonItemType.GroupButton">
<RibbonGroupButtonSettings Selection="GroupButtonSelection.Single" Items="@alignmentOptions">
</RibbonGroupButtonSettings>
</RibbonItem><RibbonItem Type="RibbonItemType.GroupButton">
<RibbonGroupButtonSettings Selection="GroupButtonSelection.Single" Items="@alignmentOptions">
</RibbonGroupButtonSettings>
</RibbonItem>RibbonTabRibbonTabRowColumnRowColumnButtonCheckboxDropDownSplitButtonComboBoxColorPickerGroupButtonTemplateAutoClassicSimplifiedOverflowSmallMediumLargeButtonCheckboxDropDownSplitButtonComboBoxColorPickerGroupButtonTemplateAutoClassicSimplifiedOverflowSmallMediumLargeindex.htmlApp.razorindex.htmlApp.razor_Imports.razorProgram.csVisibleDisplayOptionsDisabledtrueindex.htmlCssClass@Created_Imports.razorProgram.csVisibleDisplayOptionsDisabledtrueindex.htmlCssClass@Created