NxLoadError which executes this function
- when clicked. For backwards compatibility reasons, this prop is not technically required. However
- current UX standards are that it should always be present. If not specified
- the NxLoadError will be rendered without a Retry button.
+ A Retry button will be rendered in the NxLoadError which
+ executes this function when clicked.
This is some content inside a wider modal.
This is some content inside a narrower modal.
+.nx-modal-content className.
+ the .nx-modal-content className. This element (and thus the modal
+ overall) will shrink to fit the content, or expand vertically until the modal reaches its maximum height
+ (determined as a distance from the viewport edges). If the contents of
+ the nx-modal-content continue to grow beyond that height, it
+ introduces a scrollbar.
.nx-modal-footer.nx-footerfooter elementNxModal component supports
- buttons, nx-error or nx-alert classes
+ Each modal should contain a footer containing buttons for various actions. At a minimum, there
+ should be a button that enables the user to close the modal. Further, the footer may contain
+ an NxAlert as would typically be the case after a form submission
+ which resulted in an error.
.nx-modal--wideNxModal component.nx-modal-content--tabs.nx-modal-content.nx-modal-content when
+ you want to use tabs within an NxModal as the sole contents of
+ the modal body. The modifier keeps the tabs "sticky" while allowing the tab content to scroll.
className attributes passed in on
the NxModal element will be added to
@@ -103,11 +116,22 @@ export default function NxModalPage() {
Escape key.
NxModal. Click the button to open the modal.
+ A basic example of an NxModal. Click the button to open the modal. Note that
+ this modal has sufficient content to induce scrolling (on most monitors). You will see in other examples that
+ when modals have smaller contents, the scrollbar does not appear and the modal content area shrinks to fit.
NxModal also supports stacked or nested modals. A second modal can be
@@ -151,6 +184,7 @@ export default function NxModalPage() {
NxModal also contains a form, but additionally demonstrates the typical
@@ -158,10 +192,20 @@ export default function NxModalPage() {
an NxErrorAlert in the footer
NxModal.
+ A demonstration of the wide styles
+ for NxModal.
+ narrow styles
+ for NxModal.
This is some content inside a modal.
++ Bacon ipsum dolor amet tri-tip pork belly pork chop, prosciutto cupim short ribs strip steak frankfurter + sausage shank alcatra corned beef. Buffalo prosciutto leberkas swine bacon turducken kevin, biltong pork + chop ham andouille. Landjaeger swine strip steak, cow andouille jerky fatback pork loin short loin. Beef + ribs t-bone chislic filet mignon chuck porchetta bresaola pork loin. Strip steak rump pancetta, salami + sausage chicken short ribs tenderloin ham pork belly t-bone sirloin pastrami ground round kielbasa. Cupim + alcatra landjaeger shank, venison turkey capicola short ribs spare ribs meatloaf. Chislic strip steak + jowl, ball tip prosciutto salami ham ground round pig pork chop cupim shoulder. +
++ Short ribs pancetta tri-tip bacon shoulder jowl bresaola biltong picanha chislic beef ribs jerky + turducken. Pork chop swine pork belly, meatloaf jerky tail sirloin meatball. Capicola short loin shoulder + strip steak, tail beef ribs tongue prosciutto turducken tri-tip leberkas. Tenderloin leberkas doner flank + ball tip tongue drumstick short loin shankle pork. +
++ Jowl frankfurter buffalo chuck chicken, pastrami shankle drumstick bresaola picanha strip steak. Sausage + ball tip buffalo capicola ham shoulder. Beef short loin salami strip steak shankle jowl short ribs rump + venison. Turkey jerky ham drumstick flank doner boudin sirloin cow tri-tip andouille. Beef ribs burgdoggen + strip steak shank buffalo turkey corned beef. +
++ Shankle boudin filet mignon alcatra jerky. Buffalo prosciutto boudin biltong ball tip, leberkas burgdoggen + meatloaf pig turducken. Landjaeger turducken pig fatback. Ribeye boudin tongue pork chop short loin pork + belly buffalo flank tri-tip pancetta fatback shoulder short ribs spare ribs. Brisket chuck buffalo, + landjaeger pancetta cow jowl rump shankle strip steak turducken burgdoggen spare ribs pork belly + frankfurter. +
++ Doner ham hock cupim, buffalo chicken pig sirloin tri-tip. T-bone sirloin swine capicola ham. Kielbasa + leberkas doner cupim venison. Ground round pancetta tri-tip prosciutto t-bone brisket, buffalo leberkas + frankfurter jerky flank chislic corned beef. Swine cow t-bone meatball. Sausage salami turducken bresaola + brisket kielbasa ham hock. Landjaeger boudin bresaola biltong, ham hock brisket turducken kielbasa + meatloaf capicola porchetta hamburger shank jerky ribeye. +
This is the second modal.
- The top-level component to use when displaying tables of data.
- It can have <NxTableHead> and
- <NxTableBody> components as children.
-
- Equivalent to the <thead> element.
- The <NxTableRow> component is the only valid child.
- Descendant <NxTableCell> components will have the
- <isHeader> prop set.
+ A set of React components which encapsulate and assist with the styles for HTML tables.
+ The top-level component to use when displaying tables of data.
+ It can have <NxTableHead> and
+ <NxTableBody> components as children.
+
- Equivalent to the <tbody> element.
- It should have <NxTableRow> for children.
-
+ Equivalent to the <thead> element.
+ The <NxTableRow> component is the only valid child.
+ Descendant <NxTableCell> components will have the
+ <isHeader> prop set.
+
<NxTable> to set the
- colSpan attribute on the loading spinner and error message
- <NxTableCell>
-
+ Equivalent to the <tbody> element.
+ It should have <NxTableRow> for children.
+
error is present.
+
- Equivalent to the <tr> element.
- It automatically assigns isHeader on the children
- if that prop is set on this row.
- It should have <NxTableCell> for children.
-
+ Equivalent to the <tr> element.
+ It automatically assigns isHeader on the children
+ if that prop is set on this row.
+ It should have <NxTableCell> for children.
+
+ Equivalent to the <th> or
+ {' '}<td> element.
+
.nx-cell--meta-info class on the cell. This class is
+ applied to table cells that provide meta-information about the table data, such as loading, error,
+ and empty table states. For those three states, the caller of
+ the NxTable react component does not manage the table cells
+ directly (instead using the appropriate props on NxTableBody, and
+ therefore does not need to use this prop. However, the prop is available for any
+ other meta-info states that the caller might wish to convey. The intended usage is that a cell
+ using this prop would be the only cell in the only row in the table body, and would have
+ a colspan attribute causing it to span all the way across the
+ table.
+ <NxTableCell> components
+ in the <NxTableHead>
+ <NxFontAwesomeIcon>s
+ NxTableCells with this prop set will
+ self-populate with the icon, and do not take children.
+
- Equivalent to the <th> or
- <td> element.
+ For guidance on the construction of a scrolling table, see the scrolling example on
+ the nx-table HTML element page.
<NxTableCell> components
- in the <NxTableHead>
- <NxFontAwesomeIcon>
- NxTable should be used to indicate that there is no data
+ to be seen.
+ NxTable should be used with a custom meta-info situation.
+ NxTabs family of components.
+ NxTabs family of components in an
+ {' '}NxTile.
+ NxTabs family of components in an
+ {' '}NxTile where there is no tile header and the tabs are top most within
+ the tile.
+ NxTabs family of components in an
+ {' '}NxModal.
+ NxTabs family of components in an
+ {' '}NxModal with no modal header.
| - Header - | -- Header - | -- Header - | -
|---|---|---|
|
- |
- Content 1 | -Content 2 | -
|
- |
- Content 1 | -Content 2 | -
|
- |
- Content 1 | -Content 2 | -
|
- |
- Content 1 | -Content 2 | -
|
- |
- Content 1 | -Content 2 | -
|
- |
- Content 1 | -Content 2 | -
| - Header - | -- Header - | -- Header - | -
|---|---|---|
|
- |
- Content 1 | -Content 2 | -
|
- |
- Content 1 | -Content 2 | -
|
- |
- Content 1 | -Content 2 | -
|
- |
- Content 1 | -Content 2 | -
|
- |
- Content 1 | -Content 2 | -
- NxThreatBar is used at the left edge of a table cell or list item
- to indicate via color the threat level of the information to follow.
-
- There are two scales to choose from: threat level by category, and policy threat
- level by number. When using this component, it is expected that just one of the props will be passed. If both
- are passed, threatLevelCategory takes precedence. If neither are passed,
- the unspecified category is used
-
| Prop | -Type | -Required | -Details | -
|---|---|---|---|
| threatLevelCategory | -One of 'unspecified', 'none', 'low', 'moderate', 'severe', or 'critical' | -No | -A Threat Level Category to base the bar color off of | -
| policyThreatLevel | -number (0 - 10 inclusive) | -No | -A Policy Threat Level Number to base the bar color off of | -
- The following table shows the mapping between threat level number and threat level category. -
-| Threat Level Number | -Threat Level Category | -
|---|---|
| 0 | -none | -
| 1 | -low | -
| 2 - 3 | -moderate | -
| 4 - 7 | -severe | -
| 8 - 10 | -critical | -
.nx-list including rows displaying threat bars for each category.
- .nx-list including rows displaying threat bars for range of policy threat
- numbers.
- .nx-table including rows displaying threat bars for each category.
- .nx-table including rows displaying threat bars for range of policy threat
- numbers.
-
+ NxThreatIndicator is an inline element used
+ to indicate via color the IQ policy threat level of the information to follow that follows it.
+
+ There are two scales to choose from: threat level by category, and threat
+ level by number. When using this component, it is expected that just one of the props will be passed. If both
+ are passed, threatLevelCategory takes precedence. If neither are passed,
+ the unspecified category is used
+
| Prop | +Type | +Required | +Details | +
|---|---|---|---|
| threatLevelCategory | +One of 'unspecified', 'none', 'low', 'moderate', 'severe', or 'critical' | +No | +A Threat Level Category off of which to base the indicator color | +
| policyThreatLevel | +number (0 - 10 inclusive) | +No | +A Policy Threat Level Number off of which to base the indicator color | +
+ The following table shows the mapping between threat level number and threat level category. +
+| Threat Level Number | +Threat Level Category | +
|---|---|
| 0 | +none | +
| 1 | +low | +
| 2 - 3 | +moderate | +
| 4 - 7 | +severe | +
| 8 - 10 | +critical | +
NxThreatIndicator whose
+ color is set to a different threatLevelCategory value.
+ NxThreatIndicator whose
+ color is set to a different policyThreatNumber value.
+ .nx-list including rows in various configurations, each starting with
+ an NxThreatIndicator. Note that this list uses such a wide variety of
+ items for layout illustration purposes only. In practice you would not, for instance, have action buttons within
+ an item of a clickable list.
+ nx-table is one of the primary places
+ that NxThreatIndicator is intended to be used, this example demonstrates a
+ typical usage of it. Note that no special classes or placements are needed here, it is essentially just the
+ usual inline layout of the threat indicator and adjacent content, within a table cell.
+ | Policy Name | +Count | +
|
+ |
+ 8 | +
|
+ |
+ 12 | +
bottomof standard characters. For instance, - when writing by hand on ruled paper, the rule line on which you are writing is the baseline. By default, - the characters in a sequence of text all have their baselines aligned. -
q, contain parts that drop below the baseline. Fonts and line layouts - must take this into account -
bottomof standard characters. For + instance, when writing by hand on ruled paper, the rule line on which you are writing is the baseline. + By default, the characters in a sequence of text all have their baselines aligned. + +
q, contain parts that drop below the baseline. Fonts and line layouts must + take this into account. + +
none;
low;
moderate;
severe; + +
none;
low;
moderate;
severe; and
critical, or
unspecified. Each Policy Threat Level is a member of a corresponding category: -
- The sidebar at left can be used to navigate to the various examples, which are organized into groups as follows: -
-+ The sidebar at left can be used to navigate to the various examples, which are organized into groups + as follows: +
+
Documentation of all React components available to consumers of RSC, including demonstrations, example
code, and full documentation of relevant React props. Examples here
demonstrate basic usage of each component along with some modicum of supporting code - for example,
code tracking the toggle state of a NxCheckbox. This supporting code
should be taken as example only. Depending on the architectural needs of the consuming application, there
are many different ways that state management and other supporting concerns could be handled.
-
Miscellaneous advice for RSC consumers
+Demonstrations of raw CSS classes that are available to consumers of RSC. Some of these classes are also available as React components, but are documented here as well for lower-level/non-React use. -
Documentation of SCSS mixins and CSS helper classes available to consumers of RSC. -
Explanations of broader layout concepts that includes groups of components and/or styles working together. -
Utility function and datatypes available to users of RSC.
+