Skip to content

Commit e72d7c7

Browse files
pip-install-pythonpip-install-python
committed
added dash-planet to the docs
1 parent 0f3c492 commit e72d7c7

File tree

6 files changed

+1072
-0
lines changed

6 files changed

+1072
-0
lines changed

‎docs/dash_planet/introduction.md

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
---
2+
name: DashPlanet Component
3+
description: DashPlanet is an interactive orbital menu component for Dash applications that displays content in a circular orbit around a central element. It provides an engaging and intuitive way to present navigation options or related content items.
4+
endpoint: /pip/dash_planet
5+
package: dash_planet
6+
icon: solar:planet-4-bold
7+
---
8+
9+
.. toc::
10+
11+
### Features
12+
13+
| **Free Tier** | **Premium Features** |
14+
|:-----------------------------------------|:----------------|
15+
| ✓ Up to 3 satellite elements in orbit | 🌟 Unlimited satellite elements |
16+
| ✓ Basic orbital animation | 🌙 Semicircle Menu layout |
17+
| ✓ Customizable orbit radius and rotation | ⚡ Enhanced animation controls |
18+
| ✓ Click-to-toggle functionality | 💎 Supports independent Dash Components development |
19+
20+
### Installation
21+
22+
```bash
23+
pip install dash-planet
24+
```
25+
26+
### Introduction
27+
28+
.. exec::docs.dash_planet.introduction
29+
:code: false
30+
31+
.. sourcetabs::docs/dash_planet/introduction.py
32+
:defaultExpanded: false
33+
:withExpandedButton: true
34+
35+
### Quick Start
36+
37+
```python
38+
from dash import Dash
39+
from dash_planet import DashPlanet
40+
import dash_mantine_components as dmc
41+
from dash_iconify import DashIconify
42+
43+
app = Dash(__name__)
44+
45+
app.layout = DashPlanet(
46+
id='my-planet',
47+
centerContent=dmc.Avatar(
48+
size="lg",
49+
radius="xl",
50+
src="path/to/avatar.png"
51+
),
52+
children=[
53+
# Your satellite elements here...
54+
55+
# Example satellite element
56+
dmc.ActionIcon(
57+
DashIconify(icon="clarity:settings-line", width=20, height=20),
58+
size="lg",
59+
variant="filled",
60+
id="action-icon",
61+
n_clicks=0,
62+
mb=10,
63+
),
64+
],
65+
orbitRadius=80,
66+
rotation=0,
67+
apiKey="your-api-key-here"
68+
)
69+
70+
if __name__ == '__main__':
71+
app.run_server(debug=True)
72+
```
73+
74+
## Props
75+
76+
### Core Props
77+
78+
| Prop | Type | Default | Description |
79+
|-----------------|---------|---------|----------------------------------------------|
80+
| `id` | string | None | Component identifier for Dash callbacks |
81+
| `centerContent` | node | None | Content displayed in the center of the orbit |
82+
| `children` | node | None | Satellite elements to be displayed in orbit |
83+
| `open` | boolean | False | Controls visibility of satellites |
84+
| `orbitRadius` | number | 120 | Radius of the orbit in pixels |
85+
| `rotation` | number | 0 | Initial rotation angle in degrees |
86+
| `hideOrbit` | boolean | False | Toggle orbit line visibility |
87+
88+
### Animation Props
89+
90+
| Prop | Type | Default | Description |
91+
|------------|--------|---------|-------------------------|
92+
| `mass` | number | 1 | Mass for spring physics |
93+
| `tension` | number | 500 | Spring tension |
94+
| `friction` | number | 17 | Spring friction |
95+
96+
### Premium Props (Requires API Key)
97+
98+
| Prop | Type | Default | Description |
99+
|------------------------|---------|-----------|-----------------------------------------------------------------------------|
100+
| `apiKey` | string | None | API key for premium features |
101+
| `dragablePlanet` | boolean | False | Enable center content dragging |
102+
| `dragableSatellites` | boolean | False | Enable satellite dragging |
103+
| `bounce` | boolean | False | Enable bounce animation |
104+
| `bounceDirection` | enum | 'TOP' | Bounce animation direction ('TOP' \| 'BOTTOM' \| 'LEFT' \| 'RIGHT') |
105+
| `satelliteOrientation` | enum | 'DEFAULT' | Satellite rotation style ('DEFAULT' \| 'INSIDE' \| 'OUTSIDE' \| 'READABLE') |
106+
107+
### Callbacks
108+
109+
#### Basic Toggle Example
110+
```python
111+
from dash import Input, Output, callback
112+
113+
@callback(
114+
Output("my-planet", "open"),
115+
Input("my-planet", "n_clicks")
116+
)
117+
def toggle_planet(n_clicks):
118+
if n_clicks is None:
119+
return False
120+
return n_clicks % 2 == 1
121+
```
122+
123+
#### Dynamic Rotation Example
124+
```python
125+
@callback(
126+
Output("my-planet", "rotation"),
127+
Input("rotation-input", "value")
128+
)
129+
def update_rotation(value):
130+
return value
131+
```
132+
133+
#### Satellite Elements
134+
135+
Satellites can be any valid Dash component. Here's an example using icons:
136+
137+
```python
138+
from dash_iconify import DashIconify
139+
140+
satellites = [
141+
html.Div([
142+
DashIconify(
143+
icon="mdi:email",
144+
width=40,
145+
height=40,
146+
color="white"
147+
)
148+
], style={'width': '40px', 'height': '40px'})
149+
for _ in range(3)
150+
]
151+
```
152+
153+
#### Advanced Animation Control
154+
155+
The component supports spring physics-based animations with customizable parameters:
156+
157+
```python
158+
DashPlanet(
159+
mass=4, # Controls animation weight
160+
tension=500, # Controls spring stiffness
161+
friction=19, # Controls damping
162+
)
163+
```
164+
165+
#### Styling
166+
167+
The component accepts standard Dash styling through the `style` prop and CSS classes. Example:
168+
169+
```python
170+
DashPlanet(
171+
style={
172+
'backgroundColor': 'white',
173+
'borderRadius': '50%',
174+
'boxShadow': '0 4px 6px rgba(0, 0, 0, 0.1)'
175+
}
176+
)
177+
```
178+
179+
### Semicircle Menu Example
180+
.. exec::docs.dash_planet.semicircle_example
181+
:code: false
182+
183+
.. sourcetabs::docs/dash_planet/semicircle_example.py
184+
:defaultExpanded: false
185+
:withExpandedButton: true
186+
187+
### API Key Validation
188+
To use premium features, provide a valid API key:
189+
190+
191+
```python
192+
DashPlanet(
193+
apiKey="your-api-key-here",
194+
)
195+
```
196+
197+
### Browser Support
198+
DashPlanet is compatible with modern browsers that support CSS transforms and React Spring animations:
199+
200+
Chrome (latest)
201+
Firefox (latest)
202+
Safari (latest)
203+
Edge (latest)
204+
205+
### Dependencies
206+
207+
dash ≥ 2.0.0
208+
react ≥ 18.3.1

0 commit comments

Comments
 (0)