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}}
= Cardlayout =
 
{{ZKComponentReferenceAccessibilityComponentInfo}}
 
 
 
  since 9.5.0
 
 
 
== Required Settings ==
 
 
{{ZKComponentReferenceAccessibilityNamingReference}}
 
{{ZKComponentReferenceAccessibilityNamingReference}}
  
Since the Cardlayout component is not enough to act like a WCAG carousel,
+
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].
user have to combine other components and add some attributes to make it fit the WCAG carousel.
 
 
 
more information here [https://www.w3.org/TR/wai-aria-practices/#carousel WCAG carousel].
 
  
 
=== 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:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

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>