The DevExpress Tabs component for Blazor allows you to build tabbed interfaces. You can create a single tab (the DxTab component) or a tab with content (the DxTabPage component).
The main tab-related API is listed below:
- ActiveTabIndex – Specifies the active tab's index.
- Click – Fires when a user clicks the tab. Handle this event to specify different click handlers for different items. To specify a common click handler for all tabs, use the TabClick event at the component's level.
- RenderMode – Specifies how the DxTabs component loads tab content.
- ScrollMode – Specifies how users navigate between tabs when they do not fit the container's width.
- TabIconCssClass – Specifies the tab icon's CSS class.
- TabTemplate – Specifies the tab's template.
- TextTemplate – Specifies the template used to display the tab's text.
Sales Representative Michael Suyama
Birthday: 7/2/1981
Michael is a graduate of Sussex University (MA, economics, 2001) and the University of California at Los Angeles (MBA, marketing, 2004). He also took the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional." He is fluent in Japanese and can read and write French, Portuguese, and Spanish.
Use the DxTabPage class to create tab pages within the DxTabs component.
You can use the ActiveTabIndex property to track active tab change events. This example demonstrates how to update the content area when a user selects a tab.
Sales Representative Nancy Davolio
Birthday: 12/8/1978
Nancy received a BA degree in psychology from Colorado State University in 2000. She also completed "The Art of the Cold Call" course. She is a member of Toastmasters International.
Vice President, Sales Andrew Fuller
Birthday: 2/19/1965
Andrew received his BTS commercial in 1987 and a Ph.D. in international marketing at the University of Dallas in 1994. He speaks French and Italian fluently, and reads German. He joined the company as a sales representative. After that, he was promoted to sales manager in January 2005 and vice president of sales in March 2006. Andrew is a member of the Sales Management Round table, Seattle Chamber of Commerce, and Pacific Rim Importers Association.
Sales Representative Janet Leverling
Birthday: 8/30/1985
Janet received a BS degree in chemistry at Boston College in 2006. She also completed a certificate program in food retailing management. Janet was hired as a sales associate in 2013 and promoted to sales representative in February 2014.
Sales Representative Margaret Peacock
Birthday: 9/19/1973
Margaret received a BA degree in English literature at Concordia College (1994) and an MA at the American Institute of Culinary Arts (2002). She was temporarily assigned to the London office from July until November 2008.
Sales Manager Steven Buchanan
Birthday: 3/4/1955
Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London. He was promoted to sales manager in March 1993. Mr. Buchanan completed the courses: "Successful Telemarketing" and "International Sales Management." He is fluent in French.
Sales Representative Michael Suyama
Birthday: 7/2/1981
Michael is a graduate of Sussex University (MA, economics, 2001) and the University of California at Los Angeles (MBA, marketing, 2004). He also took the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional." He is fluent in Japanese and can read and write French, Portuguese, and Spanish.
Sales Representative Robert King
Birthday: 5/29/1960
Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company. After completing the "Selling in Europe" course, he was transferred to the London office in March 1993.
Inside Sales Coordinator Laura Callahan
Birthday: 1/9/1985
Laura received a BA degree in psychology from the University of Washington. She also completed a course in business French. She reads and writes French.
Sales Representative Anne Dodsworth
Birthday: 1/27/1980
Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.
Use the ScrollMode property to specify how users navigate between tabs when they do not fit the container's width. The following modes are available:
Auto — the scroll mode is adapted to the device type. Mobile and tablet devices use Swipe mode. Desktop devices use NavButtons mode.
NavButtons — the container displays a few tabs that fit the width. Users can navigate to other tabs in the following ways: use the navigation buttons, or hover the mouse pointer over a tab, hold the Shift key, and scroll the mouse wheel.
Swipe — the container displays a few tabs that fit the width. To navigate to other tabs, users can swipe tabs, or hover the mouse pointer over the container, hold the Shift key, and scroll the mouse wheel.
NoScroll — users cannot scroll tabs. The tabs that do not fit the container's width are moved to a new line.
Use the Scroll Mode combobox to switch between different modes.
Sales Representative Nancy Davolio
Birthday: 12/8/1978
Vice President, Sales Andrew Fuller
Birthday: 2/19/1965
Sales Representative Janet Leverling
Birthday: 8/30/1985
Sales Representative Margaret Peacock
Birthday: 9/19/1973
Sales Manager Steven Buchanan
Birthday: 3/4/1955
Sales Representative Michael Suyama
Birthday: 7/2/1981
Sales Representative Robert King
Birthday: 5/29/1960
Inside Sales Coordinator Laura Callahan
Birthday: 1/9/1985
Sales Representative Anne Dodsworth
Birthday: 1/27/1980
Use the TabPosition property to specify where tab headers appear relative to tab content.
In this demo, you can choose four positions: Top, Bottom, Right, Left.