-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs(widgets) Custom Widget Developer Guide #9304
Open
chrisgervang
wants to merge
24
commits into
master
Choose a base branch
from
chr/widget-dev-guide
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit
Hold shift + click to select a range
101aaf9
docs(widgets) Widget Developer Guide
chrisgervang ebd2b50
Update docs/developer-guide/custom-widgets/README.md
chrisgervang 70248ce
Update docs/developer-guide/custom-widgets/universal-widgets.md
chrisgervang 026fd27
Update docs/developer-guide/custom-widgets/README.md
chrisgervang 41cdfb3
adding preact page and vanilla example
chrisgervang 077ddd9
onViewportChange
chrisgervang 775c7b8
misc react docs
chrisgervang e68bd41
Styling Your React Widget
chrisgervang 5291a26
TOC
chrisgervang dcb07be
type cleanup
chrisgervang 8daa0c6
Merge branch 'master' into chr/widget-dev-guide
chrisgervang e48c1c9
Adding required class members
chrisgervang 98a82a4
Add reactivity to examples
chrisgervang 5366ae2
[docs] rewrite React widget dev guide
chrisgervang f17de11
Merge branch 'master' into chr/widget-dev-guide
chrisgervang a45ba17
use type instead of interface
chrisgervang 225cd33
Update preact-widgets.md
chrisgervang 2548071
Fix example in preact-widgets.md
chrisgervang 9a1ffe5
Merge branch 'master' into chr/widget-dev-guide
chrisgervang 90e62a8
After testing react-widgets.md
chrisgervang afba3b8
Update react-widgets.md
chrisgervang 5152e49
Use a portal instead of a ref
chrisgervang 1392345
Update preact-widgets.md
chrisgervang 06ef666
Update README.md
chrisgervang File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Styling Your React Widget
- Loading branch information
commit e68bd41781ef5a0736a4f7d57fbb9ef1770f40dc
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 |
---|---|---|
|
@@ -90,11 +90,7 @@ export const RotateReactWidget = (props: RotateWidgetProps) => { | |
const widget = useWidget(RotateWidget, { ref, ...props }); | ||
|
||
return ( | ||
<div | ||
ref={ref} | ||
style={{ padding: '10px', backgroundColor: '#f0f0f0', ...props.style }} | ||
className='custom-rotate-widget' | ||
> | ||
<div ref={ref} style={{ padding: '10px', backgroundColor: '#f0f0f0' }}> | ||
<button onClick={() => widget.handleCCWRotate()} style={{ marginRight: '5px' }}> | ||
Rotate CCW | ||
</button> | ||
|
@@ -108,24 +104,71 @@ export const RotateReactWidget = (props: RotateWidgetProps) => { | |
|
||
This widget controls the bearing of the view its attached to. | ||
|
||
### Styling Your React Widget | ||
#### Styling Your React Widget | ||
|
||
#### Inline Styles | ||
##### Adding Inline Styles | ||
|
||
React widgets can be written to accept `style` props for inline styling. | ||
Add the `style` prop in your React component for inline styling overrides. | ||
|
||
```tsx | ||
export const RotateReactWidget = (props: RotateWidgetProps) => { | ||
... | ||
return <div style={{...props.style}}>...</div> | ||
} | ||
``` | ||
|
||
```tsx | ||
<RotateReactWidget style={{ backgroundColor: 'blue', color: 'white' }} /> | ||
``` | ||
|
||
#### CSS Classes | ||
##### Adding CSS Classes | ||
|
||
Add `className` to your React component and styles to your stylesheet. | ||
|
||
```tsx | ||
import 'style.css'; | ||
|
||
React widgets can use `className` and add styles to their stylesheet. | ||
export const RotateReactWidget = (props: RotateWidgetProps) => { | ||
... | ||
return <div className="custom-rotate-widget">...</div> | ||
} | ||
``` | ||
|
||
```css | ||
/* style.css */ | ||
.custom-rotate-widget { | ||
padding: 10px; | ||
background-color: #333; | ||
color: white; | ||
} | ||
``` | ||
|
||
##### Applying the deck.gl widget design system | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should applying the design system be it's own page? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. +1, the styling system is an important (top-level) part of your design! |
||
|
||
Reuse the built-in deck.gl widget [stylesheet](https://unpkg.com/deck.gl@latest/dist/stylesheet.css) by importing them into your application. This can be useful if you're already theming deck.gl widgets and want to reuse CSS styles and variables. See [Widget Overview](../../api-reference/widgets/overview.md#custom-class-theming) for a full list of built-in variables. | ||
|
||
```tsx | ||
import '@deck.gl/widgets/stylesheet.css'; | ||
import 'style.css'; | ||
|
||
export const RotateReactWidget = (props: RotateWidgetProps) => { | ||
const ref = useRef(); | ||
const widget = useWidget(RotateWidget, { ref, ...props }); | ||
return ( | ||
<div ref={ref} className="deck-widget"> | ||
<div className="deck-widget-button"> | ||
<button className="deck-widget-icon-button"> | ||
... | ||
</button> | ||
</div> | ||
</div> | ||
) | ||
} | ||
``` | ||
|
||
```css | ||
/* style.css */ | ||
.deck-widget { | ||
--button-corner-radius: 4px; | ||
} | ||
``` |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
THis is only true if the widget actually forwards those props as in the example?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
True. I've broken this out into it's own step-by-step section