ReactJS Semantic UI Placeholder Element
Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.
In this article we will know how to use Placeholder element in ReactJS Semantic UI. Placeholder element is used to make a space for content that will come after some time.
Syntax:
<Placeholder/>
Creating React Application And Installing Module:
Project Structure: It will look like the following.
Step to Run Application: Run the application from the root directory of the project, using the following command.
npm start
Example 1: In this example, we have used the default size placeholder without Fluid and inverted variations. We have displayed the three placeholders one after another and each has a long length.
App.js
import React from 'react'
import { Placeholder } from 'semantic-ui-react'
const styleLink = document.createElement( "link" );
styleLink.rel = "stylesheet" ;
styleLink.href =
document.head.appendChild(styleLink);
const App = () => (
<div>
<br />
<Placeholder>
<Placeholder.Header image>
<Placeholder.Line length= 'long' />
<Placeholder.Line length= 'long' />
<Placeholder.Line length= 'long' />
</Placeholder.Header>
<Placeholder.Paragraph>
<Placeholder.Line length= 'long' />
<Placeholder.Line length= 'long' />
<Placeholder.Line length= 'long' />
</Placeholder.Paragraph>
<Placeholder.Header image>
<Placeholder.Line length= 'long' />
<Placeholder.Line length= 'long' />
<Placeholder.Line length= 'long' />
</Placeholder.Header>
</Placeholder>
</div>
)
export default App
|
Output:
Example 2: In this example, we have changed the size of the placeholder and used Fluid and inverted variations. We have displayed the three placeholders one after another and each has a very short length.
App.js
import React from 'react'
import { Placeholder } from 'semantic-ui-react'
const styleLink = document.createElement( "link" );
styleLink.rel = "stylesheet" ;
styleLink.href =
document.head.appendChild(styleLink);
const App = () => (
<div>
<br />
<Placeholder inverted fluid>
<Placeholder.Header image>
<Placeholder.Line length= 'very short' />
<Placeholder.Line length= 'very short' />
<Placeholder.Line length= 'very short' />
</Placeholder.Header>
<Placeholder.Paragraph>
<Placeholder.Line length= 'very short' />
<Placeholder.Line length= 'very short' />
<Placeholder.Line length= 'very short' />
</Placeholder.Paragraph>
<Placeholder.Header image>
<Placeholder.Line length= 'very short' />
<Placeholder.Line length= 'very short' />
<Placeholder.Line length= 'very short' />
</Placeholder.Header>
</Placeholder>
</div>
)
export default App
|
Output:
Reference: https://react.semantic-ui.com/elements/placeholder
Last Updated :
21 Jun, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...