ReactJS Semantic UI Rail 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 rail element in ReactJS Semantic UI.

Rail element is used to show accompanying content outside the boundaries.

Properties:

• Internal: rail can attach itself to the inside of the container.
• Dividing: rail can create a division between itself and the container.

Creating React Application And Installing Module:

• Step 1: Create a React application using the following command.

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command.

  cd foldername

• Step 3: After creating the ReactJS application, Install the required module using the following command:

  npm i semantic-ui-react

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:

App.js

import React from 'react'
import {Rail, Segment,Grid, List} from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

const Btt = () =>(
<div>
<Grid centered columns={3}>
    <Grid.Column>
        <br/>
      <Segment>
        <List>
            <List.Item>GeeksforGeeks</List.Item>
        </List>

        <Rail position='left'>
          <Segment>Left Rail Content</Segment>
        </Rail>

        <Rail position='right'>
          <Segment>Right Rail Content</Segment>
        </Rail>

      </Segment>
    </Grid.Column>
</Grid>
</div>
)


export default Btt

Output:

Example 2:

App.js

import React from 'react'
import { Rail, Segment, List } from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

const Btt = () => (
    <div>
        <br />
        <Segment textAlign='center'>

            <List>
                <List.Item>GeeksforGeeks</List.Item>
            </List>

            <Rail internal position='left'>
                <Segment>Left</Segment>
            </Rail>

            <Rail internal position='right'>
                <Segment>Right</Segment>
            </Rail>
        </Segment>
    </div>
)


export default Btt

Output:

Reference: https://react.semantic-ui.com/elements/rail