Reusable Components: Panel
See original GitHub issueDescription
We need a Panel
component that we can use anywhere in our application. It should be able to accept a title, content and components in the footer.
const classes = {
root: styles.classNameForRootElement,
title: styles.classForTheTitle,
close: styles.classForTheCloseButton,
body: styles.classForTheBodyContainer,
footer: 'custom-class-for-the-footer-container',
};
<Panel closable={false} onClose={onClose} classes={classes} modal={true}>
<Panel.Header>Some title here</Panel.Header>
<Panel.Content>
<img src="something.png" />
<div>
<p>We should be able to add anything as the content<.p>
</div>
</Panel.Content>
<Panel.Footer>
<CustomFooterComponent />
</Panel.Footer>
</Panel>
If the modal
property is set to false
, the panel should render in place. For example in a sidebar or anywhere else.
Properties
- title A string with for the main title (Optional)
- closable If
true
the panel should display a close icon at the top, defaults tofalse
(Optional) - onClose A callback when use clicks the close icon (Optional)
- modal If
true
it shows the panel like a modal window, defaults tofalse
- classes An object with custom classes to apply to the inner elements of the panel (Optional)
Design
The Panel
component should only need the title
and background
styles from the design, The content will be provided by others.
Issue Analytics
- State:
- Created 5 years ago
- Comments:16 (7 by maintainers)
Top Results From Across the Web
Chapter 8. Developing reusable components - Wicket in Action
In this chapter, we'll look at creating reusable components. ... Imagine a component that combines a search panel, a pageable results list, filters, ......
Read more >Creating Reusable ASCX Panels and Components
Reusable panels are simply fragments of a page and are created as ASCX controls instead of ASPX pages. Just like a page, they...
Read more >How Do You Use Reusable Components in Figma?
You can use reusable components just like any other element in Figma. Simply drag and drop them from the “Components” or “Global Components” ......
Read more >Reusable Components
It allows you to create reusable components that can be used multiple times ... the Component name from the Layers & Components panel...
Read more >Discovering reusable components in a screen
On the right panel under the Reusable Component section, click on the “See all components” link—this will list all the components used in...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I am fine with closable. 😃
No, the content should be independent of the Panel. We are going to add a placeholder for loading large images, I have a PR where I’m going to include that.