An entire block of formatted code, highlighted in the body text.
1 2import ForgeUI, { Code } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
text | string | Yes | The code to be formatted. |
language | string | The language in which the code is written. |
The code
component currently supports the following programming languages:
"abap", "actionscript", "ada", "arduino", "autoit", "c", "c++", "coffeescript", "csharp", "css", "cuda", "d", "dart", "delphi", "elixir", "erlang", "fortran", "foxpro", "go", "graphql", "groovy", "haskell", "haxe", "html", "java", "javascript", "json", "julia", "kotlin", "latex", "livescript", "lua", "mathematica", "matlab", "objective-c", "objective-j", "objectpascal", "ocaml", "octave", "perl", "php", "powershell", "prolog", "puppet", "python", "qml", "r", "racket", "restructuredtext", "ruby", "rust", "sass", "scala", "scheme", "shell", "smalltalk", "sql", "standardml", "swift", "tcl", "tex", "text", "typescript", "vala", "vbnet", "verilog", "vhdl", "xml", "xquery"
1 2const App = () => { const exampleCodeBlock = ` // React Component class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, mountNode ); `; return ( <Code text={exampleCodeBlock} language="javascript" /> ); };
A table that displays data and other components.
This component can't contain another Table
component within itself.
1 2import ForgeUI, { Table, Head, Row, Cell } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
Table | Head | Array<Row> | Yes | Top-level component of a table. |
Head | Array<Cell> | Yes | Container of cells for the heading row of the table. A table can only contain one Head . |
Row | Array<Cell> | Yes | Container of cells for a row of the table. |
rowsPerPage | number | No | Maximum number of rows shown in the table before pagination is automatically enabled. Defaults to 25. Set to 0 to disable automatic pagination. |
Cell | ForgeComponent | Yes | Cell can contain any value or component, except a Table component. |
1 2import ForgeUI, { render, Macro, Table, Head, Cell, Text, Row } from '@forge/ui'; const issues = [ { key: 'XEN-1', status: 'In Progress', }, { key: 'XEN-2', status: 'To Do', }, ]; const App = () => ( <Table> <Head> <Cell> <Text>Issue Key</Text> </Cell> <Cell> <Text>Status</Text> </Cell> </Head> {issues.map(issue => ( <Row> <Cell> <Text>{issue.key}</Text> </Cell> <Cell> <Text>{issue.status}</Text> </Cell> </Row> ))} </Table> ); export const run = render(<Macro app={<App />} />);
An image.
1 2import ForgeUI, { Image } from '@forge/ui';
Make sure that the image URL is added to the app's manifest file to load the image. For more information on how to declare image sources in an application's manifest file, see image permissions documentation.
Example to add an image URL in the manifest
1 2permissions: external: images: - 'https://www.example-dev.com/image.png'
Name | Type | Required | Description |
---|---|---|---|
alt | string | Yes | The alternative text displayed if the image is not loaded. |
src | string | Yes | The URL of the image. |
size | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | The size of the image. Defaults to xlarge . |
1 2<Image src="https://media.giphy.com/media/jUwpNzg9IcyrK/source.gif" alt="homer" />
In UI kit version 0.15.0 and later, the Avatar
component has been removed and is replaced by the User component.
A visual representation of a user (subject to their privacy settings). A row of avatars is displayed in an AvatarStack.
You can access the current user's Atlassian account ID with the useProductContext UI hook.
1 2import ForgeUI, { Avatar } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
accountId | string | Yes | The Atlassian account ID of the user. |
1 2<Avatar accountId="5a1234bc8d12345e3f1g11hi" />
In UI kit version 0.15.0 and later, the AvatarStack
component has been removed and is replaced by the UserGroup component.
A stack of multiple avatars (name and profile picture) for users, subject to their privacy settings.
1 2import ForgeUI, { AvatarStack } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<Avatar> | Yes | The Atlassian account IDs for the users whose avatars are displayed in the AvatarStack. See Avatar for further details on the props. |
1 2import ForgeUI, {render, AvatarStack, Avatar} from '@forge/ui'; const App = () => { return ( <AvatarStack> <Avatar accountId="5a1234bc8d12345e3f1g11hi"/> <Avatar accountId="2a98a42dbc7ab42e12ee360d"/> <Avatar accountId="5d8732lq8jg85a0e3f1g90as"/> <Avatar accountId="2h98a10dbl5ab93e62hja23z"/> <Avatar accountId="7b20f0bc2d05325e3f1g43ty"/> <Avatar accountId="2p72s42dbc7ab42e90gf252d"/> <Avatar accountId="2l01x78mf4pqw42e84fg40ad"/> </AvatarStack> ); }; export const run = render (<App/>);
A component that represents a user, displaying details such as name and profile picture, subject to the user's privacy settings.
The User
component can also be used within a Text component,
appearing as a lozenge with the name of the user when used within this context.
1 2import ForgeUI, { User } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
accountId | string | Yes | The Atlassian account ID of the user. |
Display a user.
1 2<User accountId="5a1234bc8d12345e3f1g11hi" />
Note, you can access the current user's Atlassian account ID in the app product context.
A stack of multiple users (name and profile picture), subject to their privacy settings.
The UserGroup
component can also be used within a Text component,
appearing as lozenges with the names of the users when used within this context.
1 2import ForgeUI, { UserGroup } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<User> | Yes | The users (specified by Atlassian account ID) whose avatars and/or names are displayed in the UserGroup. See User for further details on the props. |
A simple group of seven users using the UserGroup
component.
1 2import ForgeUI, { render, UserGroup, User } from '@forge/ui'; const App = () => { return ( <UserGroup> <User accountId="5a1234bc8d12345e3f1g11hi"/> <User accountId="2a98a42dbc7ab42e12ee360d"/> <User accountId="5d8732lq8jg85a0e3f1g90as"/> <User accountId="2h98a10dbl5ab93e62hja23z"/> <User accountId="7b20f0bc2d05325e3f1g43ty"/> <User accountId="2p72s42dbc7ab42e90gf252d"/> <User accountId="2l01x78mf4pqw42e84fg40ad"/> </UserGroup> ); }; export const run = render (<App/>);
Rate this page: