Cardlayout"
From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Cardlayout = {{ZKComponentReferenceAccessibilityComponentInfo}} since 9.5.0 == Required Settings == {{ZKComponentReferenceAccessibilityN...") |
|||
| (4 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
{{ZKComponentReferencePageHeader}} | {{ZKComponentReferencePageHeader}} | ||
| − | + | {{versionSince|9.5.0}} {{ZK EE}} | |
| − | |||
| − | {{ | ||
| − | |||
| − | |||
| − | |||
| − | |||
{{ZKComponentReferenceAccessibilityNamingReference}} | {{ZKComponentReferenceAccessibilityNamingReference}} | ||
| − | + | Cardlayout is often used along with other components to achieve the carousel effect. If you are using cardlayout for carousel, check here for [https://www.w3.org/TR/wai-aria-practices/#carousel carousel practice]. | |
| − | |||
| − | |||
| − | |||
=== Sample === | === Sample === | ||
| + | Here is a simple traffic light carousel: | ||
<source lang="xml" > | <source lang="xml" > | ||
<div ca:role="region" ca:aria-roledescription="carousel" ca:aria-label="traffic light" tabindex="0"> | <div ca:role="region" ca:aria-roledescription="carousel" ca:aria-label="traffic light" tabindex="0"> | ||
Latest revision as of 08:38, 29 September 2020
Since 9.5.0
- Available for ZK:
-
Label a Component
To name a component with ARIA attribute by adding the aria-label client attribute to the component, please refer to ZK_Developer's_Reference/Accessibility#Specify_ARIA_Attributes
Cardlayout is often used along with other components to achieve the carousel effect. If you are using cardlayout for carousel, check here for carousel practice.
Sample
Here is a simple traffic light carousel:
<div ca:role="region" ca:aria-roledescription="carousel" ca:aria-label="traffic light" tabindex="0">
<div>
<button ca:aria-label="Previous Slide" onClick="card.previous()">previous</button>
<button ca:aria-label="Next Slide" onClick="card.next()">next</button>
</div>
<cardlayout id="card" width="300px" height="200px" style="border:1px solid red" selectedIndex="1" tabindex="0">
<div ca:aria-label="red" vflex="1" hflex="1" style="background-color:red;padding:20px">red</div>
<div ca:aria-label="yellow" vflex="1" hflex="1" style="background-color:yellow;padding:20px">yellow</div>
<div ca:aria-label="green" vflex="1" hflex="1" style="background-color:green;padding:20px">green</div>
</cardlayout>
</div>