Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maartenbreddels/ipymaterialui
Jupyter Widgets based on React Material UI components
https://github.com/maartenbreddels/ipymaterialui
Last synced: about 2 months ago
JSON representation
Jupyter Widgets based on React Material UI components
- Host: GitHub
- URL: https://github.com/maartenbreddels/ipymaterialui
- Owner: maartenbreddels
- License: mit
- Created: 2018-11-23T18:33:20.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T02:57:55.000Z (over 1 year ago)
- Last Synced: 2024-07-16T09:52:36.485Z (2 months ago)
- Language: Jupyter Notebook
- Size: 702 KB
- Stars: 84
- Watchers: 10
- Forks: 14
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-jupyter-resources - GitHub - 70% open · ⏱️ 29.10.2019): (交互式小部件和可视化)
README
ipymaterialui
===============================
[](https://www.npmjs.com/package/jupyter-materialui)
[](https://pypi.python.org/mariobuikhuizen/ipymaterialui)
[](https://anaconda.org/conda-forge/ipymaterialui)
Jupyter Widgets based on [Material-UI](https://material-ui.com/) which implement Google's
[Material Design Spec](https://material.io/) with [React](https://reactjs.org/).
Installation
------------
Prerequisites:
https://ipywidgets.readthedocs.io/en/stable/user_install.html
To install use pip:
$ pip install ipymaterialui
$ jupyter labextension install jupyter-materialui # for lab
For a development installation (requires npm),
$ git clone https://github.com/maartenbreddels/ipymaterialui.git
$ cd ipymaterialui
$ pip install -e .
$ jupyter nbextension install --py --symlink --sys-prefix ipymaterialui
$ jupyter nbextension enable --py --sys-prefix ipymaterialui
$ jupyter labextension install ./js
Usage
-----
For examples see the [example notebook](Core%20examples.ipynb).
The [Material-UI documentation](https://material-ui.com/components/buttons/) can be used to find all available
components and attributes (on the left side bar). Click the <> icon to see the source code of the examples. Scroll to
the bottom of the page to access a link to the API of the component. Ipymaterialui tries to stay close to the React and
Material-UI API, but the syntax is different:
| | Description | Material-UI | ipymaterialui |
|---|-------------|-------------|---------------|
|1| Components are classes instead of HTML | `` | `Button(...)` |
|2| Child components and text are defined in the children traitlet| `text ` | `Button(children=['text', Icon(...)])` |
|3| Flag attributes require a boolean value | `...` | `Html(tag='div', children=[...])` |
|8| The attributes class and style need to be suffixed with an underscore | `` | `Button(class_='mr-3', style_={...})` |
|9| Icon uses the lowercase name from [Material icons](https://material.io/tools/icons/?style=baseline) | `` | `Icon(children='alarm_on' ...)` |
Examples
--------
### Aspect 1, 2, 3, 4, 6, 8 and 9
This example demonstrates aspect 1, 2, 3, 4, 6, 8 and 9 of the table above.
#### React/Material-UI
```typescript jsx
const useStyles = makeStyles(theme => ({ (8)
alarmOnIcon: {
marginRight: theme.spacing(1),
},
}));
export default function MyButton() {
const classes = useStyles(); (8)
const [btnText, setBtnText] = React.useState('Primary'); (6)
function someMethod() { (6)
setBtnText(() => new Date().toLocaleTimeString());
}
return (
(1) (3)(4) (6)
(2)(9) (8)
{btnText}
);
}
```
#### ipymaterialui
```python
import ipymaterialui as mui
import datetime
(1) (3)(4) (2)
button = mui.Button(variant='contained', color='primary', center_ripple=True, children=[
(8) (9)
mui.Icon(style_={'marginRight': '8px'}, children='alarm_on'),
'Primary'
])
def some_method(widget, event, data): (6)
time = datetime.datetime.now().strftime("%X")
button.children = [button.children[0], time]
button.on_event('onClick', some_method) (6)
button
```
### Aspect 5
This example demonstrates aspect 5 of the table above.
#### React/Material-UI
```typescript jsx
export default function MySwitch() {
const [state, setState] = React.useState(true);
const handleChange = event => {
setState(event.target.checked);
};
return (
);
}
```
#### ipymaterialui
```python
import ipymaterialui as mui
mui.Switch(checked=True)
```
### Aspect 7
This example demonstrates aspect 7 of the table above.
#### React/Material-UI
```typescript jsx
export default function MyHtml() {
return (
some HTML
);
}
```
#### ipymaterialui
```python
import ipymaterialui as mui
mui.Html(tag='div', children='some HTML')
```