Tabs
Federal
SAM Managed Services
Control your agency’s entire software estate with the help of our industry-leading experts. Our specialists will partner with you to develop a SAM strategy, manage licenses, and reduce waste.
Security and Compliance
Our expert guidance ensures seamless compliance with government software policies, safeguarding the sensitive data your citizens trust you to protect.
State & Local
SAM Program Development
Standardizing license management for your government organization can feel overwhelming. With our guidance, establish processes, policies, and procedures to drive IT success for decades.
License Management: IASP Program
Avoid IBM audits and reduce waste with expert recommendations for actionable cost savings.
Public Education
License Management
Reduce waste and fiscal risk with expert recommendations for actionable cost savings.
Certified Training
Equip your staff with the knowledge they need to manage IT assets for years to come.
Basics
The tabs component is probably the most complex component we have in terms of implementation (which probably means it needs a refactor, but I digress). This means that the basics aren't going to be very basic, so it's best if you get some help implementing this from someone familiar with the source code or is at least familiar with creating and implementing HTML Custom Elements. The devious part of all of this is that while we may be using the slot attribute, most of these things are not technically slotted, which may cause some issues if you are hoping to manipulate the design or behavior of said slotted elements.
It starts with the custom element itself, <ap-tabs>, whose direct children need to be:
<div slot="tablist">The tablist is comprised of bare
<button>elements. These are the tabs that the user will click on to change the content of the panel container. The order of the buttons in the tablist should match the order of the panels in the panel container. If there are more or less buttons than panels, the component will not work as expected and you should have a nice graphical bug where it should be.<div slot="panel-container">Inside the panel container will be a corresponding number of
<ap-tab-panel>elements. They will have 3 direct children exactly:<img slot="image">Technically, this can be any element, but you will usually use an
<img>element here.<h3 slot="statement-title">This is the title of the panel. This is ideally different than the button label. It should be a heading element, but it doesn't have to be.
<div slot="description">Put whatever content you want to here. Limit to a few concise sentences for the best experience.
html<ap-tabs>
<div slot="tablist">
<button>Federal</button>
<button>State & Local</button>
<button>Public Education</button>
</div>
<div slot="panel-container">
<ap-tab-panel>
<img slot="image" />
<h3 slot="statement-title">Federal</h3>
<div slot="description">
<h4>SAM Managed Services</h4>
<p>
Control your agency’s entire software estate with the
help of our industry-leading experts. Our specialists will
partner with you to develop a SAM strategy, manage licenses,
and reduce waste.
</p>
<h4>Security and Compliance</h4>
<p>
Our expert guidance ensures seamless compliance with
government software policies, safeguarding the sensitive
data your citizens trust you to protect.
</p>
</div>
</ap-tab-panel>
<ap-tab-panel>
<img slot="image" />
<h3 slot="statement-title">State & Local</h3>
<div slot="description">
<h4>SAM Program Development</h4>
<p>
Standardizing license management for your government
organization can feel overwhelming. With our guidance,
establish processes, policies, and procedures to drive IT
success for decades.
</p>
<h4>License Management: IASP Program</h4>
<p>
Avoid IBM audits and reduce waste with expert
recommendations for actionable cost savings.
</p>
</div>
</ap-tab-panel>
<ap-tab-panel>
<img slot="image" />
<h3 slot="statement-title">Public Education</h3>
<div slot="description">
<h4>License Management</h4>
<p>
Reduce waste and fiscal risk with expert recommendations for
actionable cost savings.
</p>
<h4>Certified Training</h4>
<p>
Equip your staff with the knowledge they need to manage IT
assets for years to come.
</p>
</div>
</ap-tab-panel>
</div>
</ap-tabs>
Customizations
Hide Statement Titles
If you don't want the statement titles to display, you can simply remove the <h3 slot='statement-title'> elements from the <ap-tab-panel> elements. Otherwise, if you want to make it complicated, you can:
- Add the
data-hide-statement-titlesboolean attribute to<ap-tabs>to hide the statement title on all panels OR - Add the
data-hide-titleboolean attribute to<ap-tab-panel>to hide the statement title on that specific panel.
html<ap-tabs data-hide-statement-titles>
<div slot="tablist">
<button>Federal</button>
<button>State & Local</button>
<button>Public Education</button>
</div>
<div slot="panel-container">
<ap-tab-panel>
<img slot="image" />
<h3 slot="statement-title">Federal</h3>
<div slot="description">
<h4>SAM Managed Services</h4>
<p>
Control your agency’s entire software estate with the
help of our industry-leading experts. Our specialists will
partner with you to develop a SAM strategy, manage licenses,
and reduce waste.
</p>
<h4>Security and Compliance</h4>
<p>
Our expert guidance ensures seamless compliance with
government software policies, safeguarding the sensitive
data your citizens trust you to protect.
</p>
</div>
</ap-tab-panel>
<ap-tab-panel>
<img slot="image" />
<h3 slot="statement-title">State & Local</h3>
<div slot="description">
<h4>SAM Program Development</h4>
<p>
Standardizing license management for your government
organization can feel overwhelming. With our guidance,
establish processes, policies, and procedures to drive IT
success for decades.
</p>
<h4>License Management: IASP Program</h4>
<p>
Avoid IBM audits and reduce waste with expert
recommendations for actionable cost savings.
</p>
</div>
</ap-tab-panel>
<ap-tab-panel>
<img slot="image" />
<h3 slot="statement-title">Public Education</h3>
<div slot="description">
<h4>License Management</h4>
<p>
Reduce waste and fiscal risk with expert recommendations for
actionable cost savings.
</p>
<h4>Certified Training</h4>
<p>
Equip your staff with the knowledge they need to manage IT
assets for years to come.
</p>
</div>
</ap-tab-panel>
</div>
</ap-tabs>
Federal
SAM Managed Services
Control your agency’s entire software estate with the help of our industry-leading experts. Our specialists will partner with you to develop a SAM strategy, manage licenses, and reduce waste.
Security and Compliance
Our expert guidance ensures seamless compliance with government software policies, safeguarding the sensitive data your citizens trust you to protect.
State & Local
SAM Program Development
Standardizing license management for your government organization can feel overwhelming. With our guidance, establish processes, policies, and procedures to drive IT success for decades.
License Management: IASP Program
Avoid IBM audits and reduce waste with expert recommendations for actionable cost savings.
Public Education
License Management
Reduce waste and fiscal risk with expert recommendations for actionable cost savings.
Certified Training
Equip your staff with the knowledge they need to manage IT assets for years to come.
html<ap-tabs>
<div slot="tablist">
<button>Federal</button>
<button>State & Local</button>
<button>Public Education</button>
</div>
<div slot="panel-container">
<ap-tab-panel data-hide-title>
<img slot="image" />
<h3 slot="statement-title">Federal</h3>
<div slot="description">
<h4>SAM Managed Services</h4>
<p>
Control your agency’s entire software estate with the
help of our industry-leading experts. Our specialists will
partner with you to develop a SAM strategy, manage licenses,
and reduce waste.
</p>
<h4>Security and Compliance</h4>
<p>
Our expert guidance ensures seamless compliance with
government software policies, safeguarding the sensitive
data your citizens trust you to protect.
</p>
</div>
</ap-tab-panel>
<ap-tab-panel>
<img slot="image" />
<h3 slot="statement-title">State & Local</h3>
<div slot="description">
<h4>SAM Program Development</h4>
<p>
Standardizing license management for your government
organization can feel overwhelming. With our guidance,
establish processes, policies, and procedures to drive IT
success for decades.
</p>
<h4>License Management: IASP Program</h4>
<p>
Avoid IBM audits and reduce waste with expert
recommendations for actionable cost savings.
</p>
</div>
</ap-tab-panel>
<ap-tab-panel>
<img slot="image" />
<h3 slot="statement-title">Public Education</h3>
<div slot="description">
<h4>License Management</h4>
<p>
Reduce waste and fiscal risk with expert recommendations for
actionable cost savings.
</p>
<h4>Certified Training</h4>
<p>
Equip your staff with the knowledge they need to manage IT
assets for years to come.
</p>
</div>
</ap-tab-panel>
</div>
</ap-tabs>
Federal
SAM Managed Services
Control your agency’s entire software estate with the help of our industry-leading experts. Our specialists will partner with you to develop a SAM strategy, manage licenses, and reduce waste.
Security and Compliance
Our expert guidance ensures seamless compliance with government software policies, safeguarding the sensitive data your citizens trust you to protect.
State & Local
SAM Program Development
Standardizing license management for your government organization can feel overwhelming. With our guidance, establish processes, policies, and procedures to drive IT success for decades.
License Management: IASP Program
Avoid IBM audits and reduce waste with expert recommendations for actionable cost savings.
Public Education
License Management
Reduce waste and fiscal risk with expert recommendations for actionable cost savings.
Certified Training
Equip your staff with the knowledge they need to manage IT assets for years to come.