You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/08/15 10:29:53 UTC
[royale-docs] branch master updated: jewel-card start
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 <ca...@apache.org>
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'} |