-
- GitHub
- GitLab
- Bitbucket
-
By logging in you accept
our terms of service
and privacy policy
React component wrappers for the Atlassian User Interface (AUI) framework.
npm install aui-react@1.2.1
Javascript behaviour and styles are provided by AUI. You should include the relevant AUI files based on the AUI documentation.
import React, { Component } from 'react';
// You could also use "import AUI from 'aui-react';", but this would increase your bundle size in most cases.
// By consuming the component directly, you ensure only the component and its dependencies are included.
import AUIFontIcon from 'aui-react/lib/AUIFontIcon';
export default class MyApproveIcon extends Component {
return <AUIFontIcon type="approve" />;
}
var AUI = require('aui-react');
var MyApproveIcon = React.createClass({
return <AUI.FontIcon type="approve" />;
});
module.exports = MyApproveIcon;
<div id="container"></div>
<script src="node_modules/aui-react/dist/aui-react.js"></script>
<script type="text/babel">
ReactDOM.render(<AUI.FontIcon type="approve" />, document.getElementById('container'));
</script>
Contributions are encouraged!
Option 1 (recommended).
- In aui-react, run
npm link .andnpm run watch.- Link aui-react to your application using
npm link aui-react.
Option 2.
- Each time you want to test the changes, use
npm install path/to/aui-reactto install them to your application.
$ npm test
$ npm run lint
$ npm run coverage
Releases can be prepared by anyone with access to the code.
Simply bump the version number following semantic versioning and make a commit to a branch
All you need to do is push the commit up and make a pull request, one of the admins will merge it and publish a release.
<AUI.Avatar
src="{string}"
[size="xsmall|small|medium|large|xlarge|xxlarge|xxxlarge"]
[isProject={boolean=false}]
/>
<AUI.ApplicationHeader
product="aui|bamboo|bitbucket|confluence|crowd|fecru|hipchat|jira|stash"
[primaryContent={Component}]
[secondaryContent={Component}]
/>
<AUI.Button
[type="link|primary|subtle"]
[icon={string}]
/>
<AUI.Icon
icon={string}
/>
<AUI.table>
<thead>
<tr>
<th>...</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
...
</tr>
</tbody>
</AUI.table>
<AUI.Tabs>
<AUI.Tab label="First Tab" id="first-tab">
<p>Content of the <strong>first</strong> tab</p>
</AUI.Tab>
<AUI.Tab label={(<span>Second Tab <AUI.Badge text="123" /></span>)} id="second-tab">
You can pass components as a tab label and to the tab content.
It simply <AUI.Lozenge type="success">works</AUI.Lozenge>
</AUI.Tab>
<AUI.Tab label="Last tab" id="last-tab" isActive>
<p>The last tab will be an active tab</p>
</AUI.Tab>
</AUI.Tabs>
The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.
Learn more →Something wrong with this page? Make a suggestion
Export .ABOUT file for this package
Last synced: 2022-06-13 09:20:38 UTC
Login to resync this project