Skip to content

docs(875461): Contextual tab UG documentation added. #2765

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 19, 2024
Merged

docs(875461): Contextual tab UG documentation added. #2765

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a2b8a24
875461: Contextual tab UG documentation added.
Mar 18, 2024
9d0e44f
875461: toc file modified.
Mar 18, 2024
9f87be2
Merge branch 'development' into EJ2-875461-contextual
Mar 18, 2024
8c29c94
Merge branch 'development' into EJ2-875461-contextual
Mar 19, 2024
1133a8a
875461: description updated.
Mar 19, 2024
201ecce
Merge branch 'EJ2-875461-contextual' of https://github.com/syncfusion…
Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/add-contextual-tab/contextualtab.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
public ActionResult ContextualTab()
{
return View();
}
153 changes: 153 additions & 0 deletions ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/add-contextual-tab/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
List<RibbonContextualTab> contextTabs = new List<RibbonContextualTab>()
{
new RibbonContextualTab
{
Visible = true,
Tabs = new List<RibbonTab>()
{
new RibbonTab()
{
Id="ShapeFormat", Header = "Shape Format" ,
Groups = new List<RibbonGroup>()
{
new RibbonGroup()
{
Header="Text decoration",
ShowLauncherIcon=true,
Collections = new List<RibbonCollection>()
{
new RibbonCollection()
{
Items = new List<RibbonItem>()
{
new RibbonItem()
{
Type = RibbonItemType.Button,
ButtonSettings = new RibbonButtonSettings
{
Content = "Text Header",
IconCss = "e-icons e-text-header"
}
},
new RibbonItem()
{
Type = RibbonItemType.Button,
ButtonSettings = new RibbonButtonSettings
{
Content = "Text Wrap",
IconCss = "e-icons e-text-wrap"
}
},
new RibbonItem()
{
Type = RibbonItemType.Button,
ButtonSettings = new RibbonButtonSettings
{
Content = "Text Annotation",
IconCss = "e-icons e-text-annotation"
}
}
}
}
}
},
new RibbonGroup()
{
Header="Accessibility",
Collections = new List<RibbonCollection>()
{
new RibbonCollection()
{
Items = new List<RibbonItem>()
{
new RibbonItem()
{
Type = RibbonItemType.Button,
AllowedSizes = RibbonItemSize.Large,
ButtonSettings = new RibbonButtonSettings
{
Content = "Alt Text",
IconCss = "e-icons e-text-alternative"
}
}
}
}
}
},
new RibbonGroup()
{
Header="Arrange",
ShowLauncherIcon=true,
Collections = new List<RibbonCollection>()
{
new RibbonCollection()
{
Items = new List<RibbonItem>()
{
new RibbonItem()
{
Type = RibbonItemType.Button,
ButtonSettings = new RibbonButtonSettings
{
Content = "Bring Forward",
IconCss = "e-icons e-bring-forward"
}
},
new RibbonItem()
{
Type = RibbonItemType.Button,
ButtonSettings = new RibbonButtonSettings
{
Content = "Send Backward",
IconCss = "e-icons e-send-backward"
}
},
new RibbonItem()
{
Type = RibbonItemType.Button,
ButtonSettings = new RibbonButtonSettings
{
Content = "Selection Pane",
IconCss = "e-icons e-show-hide-panel"
}
}
}
}
}
}
}
}
}
}
};
}

@Html.EJS().Ribbon("ribbon").ContextualTabs(contextTabs).Tabs(tab =>
{
tab.Header("Home").Groups(groups =>

{
groups.Header("Clipboard").GroupIconCss("e-icons e-paste").ShowLauncherIcon(true).Id("lipboardGroup").Collections(collection =>
{
collection.Items(items =>
{
items.Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("Cut");
}).Add();
items.Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-copy").Content("Copy");
}).Add();
items.Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-format-painter").Content("Format Painter");
}).Add();
}).Add();
}).Add();
}).Add();
}).Render()
83 changes: 83 additions & 0 deletions ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/add-contextual-tab/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" id="clipboardGroup" groupIconCss="e-icons e-paste" showLauncherIcon=true>
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button">
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
<e-ribbon-item type="Button">
<e-ribbon-buttonsettings iconCss="e-icons e-copy" content="Copy"></e-ribbon-buttonsettings>
</e-ribbon-item>
<e-ribbon-item type="Button">
<e-ribbon-buttonsettings iconCss="e-icons e-format-painter" content="Format Painter"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
<e-ribbon-contextual-tabs>
<e-ribbon-contextual-tab visible=true>
<e-ribbon-tabs>
<e-ribbon-tab header="Shape Format" id="ShapeFormat">
<e-ribbon-groups>
<e-ribbon-group header="Text decoration" id="Textdecoration" showLauncherIcon=true>
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button">
<e-ribbon-buttonsettings iconCss="e-icons e-text-header" content="Text Header"></e-ribbon-buttonsettings>
</e-ribbon-item>
<e-ribbon-item type="Button">
<e-ribbon-buttonsettings iconCss="e-icons e-text-wrap" content="Text Wrap"></e-ribbon-buttonsettings>
</e-ribbon-item>
<e-ribbon-item type="Button">
<e-ribbon-buttonsettings iconCss="e-icons e-text-annotation" content="Text Annotation"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Accessibility">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" allowedSizes=Large>
<e-ribbon-buttonsettings iconCss="e-icons e-text-alternative" content="Alt Text"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Arrange" showLauncherIcon=true>
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button">
<e-ribbon-buttonsettings iconCss="e-icons e-bring-forward" content="Bring Forward"></e-ribbon-buttonsettings>
</e-ribbon-item>
<e-ribbon-item type="Button">
<e-ribbon-buttonsettings iconCss="e-icons e-send-backward" content="Send Backward"></e-ribbon-buttonsettings>
</e-ribbon-item>
<e-ribbon-item type="Button">
<e-ribbon-buttonsettings iconCss="e-icons e-show-hide-panel" content="Selection Pane"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</e-ribbon-contextual-tab>
</e-ribbon-contextual-tabs>
</ejs-ribbon>
4 changes: 4 additions & 0 deletions ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/method/contextualtab.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
public ActionResult ContextualTab()
{
return View();
}
111 changes: 111 additions & 0 deletions ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/method/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
List<RibbonContextualTab> contextTabs = new List<RibbonContextualTab>()
{
new RibbonContextualTab
{
Tabs = new List<RibbonTab>()
{
new RibbonTab()
{
Header = "Arrange & View",
Id = "ArrangeView",
Groups = new List<RibbonGroup>()
{
new RibbonGroup()
{
Header="Arrange",
ShowLauncherIcon=true,
Collections = new List<RibbonCollection>()
{
new RibbonCollection()
{
Items = new List<RibbonItem>()
{
new RibbonItem()
{
Type = RibbonItemType.Button,
ButtonSettings = new RibbonButtonSettings
{
Content = "Bring Forward",
IconCss = "e-icons e-bring-forward"
}
},
new RibbonItem()
{
Type = RibbonItemType.Button,
ButtonSettings = new RibbonButtonSettings
{
Content = "Send Backward",
IconCss = "e-icons e-send-backward"
}
},
new RibbonItem()
{
Type = RibbonItemType.Button,
ButtonSettings = new RibbonButtonSettings
{
Content = "Selection Pane",
IconCss = "e-icons e-show-hide-panel"
}
}
}
}
}
}
}
}
}
}
};
}
<div>
<button class="e-btn" id="show-contextual"> Show tab </button>
<button class="e-btn" id="hide-contextual"> Hide tab </button>
</div>
@Html.EJS().Ribbon("ribbon").ContextualTabs(contextTabs).Created("ribbonCreated").Tabs(tab =>
{
tab.Header("Home").Groups(groups =>

{
groups.Header("Clipboard").GroupIconCss("e-icons e-paste").ShowLauncherIcon(true).Id("lipboardGroup").Collections(collection =>
{
collection.Items(items =>
{
items.Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("Cut");
}).Add();
items.Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-copy").Content("Copy");
}).Add();
items.Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-format-painter").Content("Format Painter");
}).Add();
}).Add();
}).Add();
}).Add();
}).Render()

<script>
var ribbon;
function ribbonCreated() {
ribbon = document.getElementById('ribbon').ej2_instances[0];
}
document.getElementById('show-contextual').onclick = () => {
ribbon.showTab('ArrangeView', true);
}
document.getElementById('hide-contextual').onclick = () => {
ribbon.hideTab('ArrangeView', true);
}
</script>

<style>
#ribbon {
margin-top: 20px;
}
</style>
Loading