This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/royale-docs.git
The following commit(s) were added to refs/heads/master by this push:
new 13eb35c jewel-card start
13eb35c is described below
commit 13eb35c18e7f9575cefe4f3c7b775e2daab30519
Author: Carlos Rovira <[email protected]>
AuthorDate: Sat Aug 15 12:29:43 2020 +0200
jewel-card start
---
component-sets/jewel.md | 4 +--
component-sets/jewel/jewel-card.md | 59 ++++++++++++++++++++++++++++++++++++
component-sets/jewel/jewel-drawer.md | 2 +-
3 files changed, 62 insertions(+), 3 deletions(-)
diff --git a/component-sets/jewel.md b/component-sets/jewel.md
index b7eeee0..bdfd6ed 100644
--- a/component-sets/jewel.md
+++ b/component-sets/jewel.md
@@ -59,7 +59,7 @@ If the component name is a link, you can click it to see more
information about
|------------------ |------------------------------------------------------
|---------------------------------------------------------------------------------
|------------------ |-------------- |
| __Containers__ | [Application](component-sets/jewel/application)
| The root container of a Jewel
Application | 0.9.4 | Complete
|
| | ButtonBar
| Container that displays a series of buttons
| 0.9.7 | Complete |
-| | Card |
Content (text, images,...) container with optional title and actions zones
| 0.9.4 | Complete |
+| | [Card](component-sets/jewel/card) |
Content (text, images,...) container with optional title and actions zones
| 0.9.4 | Complete |
| | [Container](component-sets/jewel/container) |
Container that surrounds other components
| 0.9.4 | Complete |
| | [DataContainer](component-sets/jewel/datacontainer) | A
Container that creates child elements dynamically based on a data provider
| 0.9.4 | Complete |
| | [Drawer](component-sets/jewel/drawer) | A container
used for main navigation that can optionaly be hidden to the side of screen
| 0.9.4 | Complete |
@@ -67,7 +67,6 @@ If the component name is a link, you can click it to see more
information about
| | Grid | Container that uses Grid
Layout and needs other immediate children to work as cells and host content.
| 0.9.4 | Complete |
| | SimpleTable | A basic HTML table that can be
declared in MXML |
0.9.4 | Complete |
| | Table | A complex HTML table
element filled from a data source. Cells are ItemRenderers.
| 0.9.4 | In Progress |
-| | TabBar |
| 0.9.4 | Complete |
| | TabBarContent | A container to use with TabBar and
capable of presenting organized content | 0.9.4
| Complete |
| | Wizard | 11.0+
| 0.9.4 | Complete |
| __Components__ | [Alert](component-sets/jewel/alert)
| Displays a message and one or more buttons in a view that pops up over
all other controls and views. | 0.9.4 | Complete |
@@ -90,6 +89,7 @@ If the component name is a link, you can click it to see more
information about
| | HSlider |
| 0.9.4 | Complete |
| | VSlider |
| 0.9.6 | Complete |
| | SnackBar |
| 0.9.4 | Complete |
+| | TabBar |
| 0.9.4 | Complete |
| | [TextInput](component-sets/jewel/textinput)
| A control for single-line text field. | 0.9.4 |
Complete |
## Jewel Themes
diff --git a/component-sets/jewel/jewel-card.md
b/component-sets/jewel/jewel-card.md
index a223be1..2855461 100644
--- a/component-sets/jewel/jewel-card.md
+++ b/component-sets/jewel/jewel-card.md
@@ -23,4 +23,63 @@ permalink: /component-sets/jewel/card
# Jewel Card
+## Reference
+
+Available since version __0.9.4__.
+
+| Class | Extends |
+|------------------------------ |----------------------------------
|
+|
[org.apache.royale.jewel.Card](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/Card){:target='_blank'}
|
[org.apache.royale.jewel.VContainer](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/VContainer){:target='_blank'}
|
+
+<sup>_Note: This component is currently only available for JavaScript._</sup>
+
+## Overview
+
+The Jewel Card class is a [Container](component-sets/jewel/container) for
content like text or images that support optional parts like title and actions
zones.
+
+Card is a vertical container with a default "panel" styling that adds up to
the features already provided by `VContainer`.
+
+It can be use alone or with other complementary components listed below:
+
+| Component | Description
|
+|--------------------------- |
------------------------------------------------------------------------------------------------------|
+| __CardHeader__ | a container to hold drawer header content (i.e:
a title, image icon logo, or header actions) |
+| __CardTitle__ | a title label to use inside the drawer header
with specific styling |
+| __CardPrimaryContent__ | a container to hold card main content
|
+| __CardExpandedContent__ | a container for content that need to remove all
paddings and gaps with the surrounding Card |
+| __CardActions__ | a footer container to hold actions like
buttons, icons or navigation
|
+
+## Example of use
+
+In __MXML__ declare a `Card` like this:
+
+```mxml
+<j:Card>
+ <j:CardTitle text="Jewel Simple Card"/>
+
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p><Simplest version uses just the Card component
laying content elements vertically with some default gap between them. It
applies some default padding.</p>]]></j:html>
+ </j:Label>
+
+ <j:Button text="Action" emphasis="primary"/>
+</j:Card>
+```
+
+In __ActionScript__ we can do the same in the following way:
+
+```as3
+var card:Card = new Card();
+// add a label to the Card
+var label:Label = new Label();
+label.text = "Some text";
+card.addElement(label);
+// add the Container to the parent
+parent.addElement(card);
+```
+
+where `parent` is the container where the control will be added.
+
+## Relevant Properties and Methods
+
+> Check the Reference of
[org.apache.royale.jewel.Card](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/Card){:target='_blank'}
for a more detailed list of properties and methods.
diff --git a/component-sets/jewel/jewel-drawer.md
b/component-sets/jewel/jewel-drawer.md
index 70c4f62..b97c2c0 100644
--- a/component-sets/jewel/jewel-drawer.md
+++ b/component-sets/jewel/jewel-drawer.md
@@ -46,7 +46,7 @@ Drawer has other complementary components:
| Component | Description
|
|------------------- |
------------------------------------------------------------------------------------------------------|
-| __DrawerHeader__ | a container to hold drawer heeader content (i.e: a
title or an image icon logo) |
+| __DrawerHeader__ | a container to hold drawer header content (i.e: a title
or an image icon logo) |
| __DrawerContent__ | a container to hold drawer main content like
navigation, icons, or text |
| __DrawerFooter__ | a
[BarRow](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.bar/BarRow){:target='_blank'}
to use as the last content. Styling use to be similar to the
[FooterBar](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/FooterBar){:target='_blank'}
|
