-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
29099f2
commit f19887e
Showing
10 changed files
with
7,802 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -102,3 +102,6 @@ dist | |
|
||
# TernJS port file | ||
.tern-port | ||
|
||
# Built assets | ||
lib/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
# @nteract/dropdown-menu | ||
|
||
This package contains a React component for rendering the drop-down element on a single cell. This drop-down provides users with the ability to hide and show cells, convert cells between different types, and more. | ||
|
||
## Installation | ||
|
||
``` | ||
$ yarn add @nteract/dropdown-menu | ||
``` | ||
|
||
``` | ||
$ npm install --save @nteract/dropdown-menu | ||
``` | ||
|
||
## Usage | ||
|
||
The example below showcases how we can use the components within this package to create a drop-down menu with actions specific to code cells. | ||
|
||
```javascript | ||
import { | ||
DropdownMenu, | ||
DropdownTrigger, | ||
DropdownContent | ||
} from "@nteract/dropdown-menu"; | ||
|
||
export default () => { | ||
return ( | ||
<DropdownMenu> | ||
<DropdownTrigger> | ||
<button title="show additional actions"> | ||
<span className="octicon toggle-menu"> | ||
<ChevronDownOcticon /> | ||
</span> | ||
</button> | ||
</DropdownTrigger> | ||
{type === "code" ? ( | ||
<DropdownContent> | ||
<li | ||
onClick={this.props.clearOutputs} | ||
className="clearOutput" | ||
role="option" | ||
aria-selected="false" | ||
tabIndex="0" | ||
> | ||
<a>Clear Cell Output</a> | ||
</li> | ||
<li | ||
onClick={this.props.toggleCellInputVisibility} | ||
className="inputVisibility" | ||
role="option" | ||
aria-selected="false" | ||
tabIndex="0" | ||
> | ||
<a>Toggle Input Visibility</a> | ||
</li> | ||
</DropdownContent> | ||
) : null} | ||
</DropdownMenu> | ||
); | ||
}; | ||
``` | ||
|
||
## Documentation | ||
|
||
We're working on adding more documentation for this component. Stay tuned by watching this repository! | ||
|
||
## Support | ||
|
||
If you experience an issue while using this package or have a feature request, please file an issue on the [issue board](https://github.com/nteract/nteract/issues/new/choose) and add the `pkg:dropdown-menu` label. | ||
|
||
## License | ||
|
||
[BSD-3-Clause](https://choosealicense.com/licenses/bsd-3-clause/) |
Oops, something went wrong.