the-section v2.0.20

the-section

Section of the-components

Installation

$ npm install the-section --save

Usage

Live Demo is hosted on GitHub Page

'use strict'

import React from 'react'
import { TheSection, TheAccordionSection, TheSectionStyle } from 'the-section'
import { TheSpinStyle } from 'the-spin'
import { TheButtonStyle } from 'the-button'

class ExampleComponent extends React.PureComponent {
  render () {
    return (
      <div>
        <TheSectionStyle/>
        <TheButtonStyle/>
        <TheSpinStyle/>

        <h3>Normal section</h3>
        <TheSection>
          <TheSection.Header>This is header</TheSection.Header>
          <TheSection.Body>This is content</TheSection.Body>
        </TheSection>

        <br/>

        <h3>Lined header section</h3>
        <TheSection>
          <TheSection.Header lined
                             actionText='edit'
                             actionIcon='fa fa-pencil'
                             onAction={() => console.log('Edit button pressed')}
          >This is lined header</TheSection.Header>
          <TheSection.Body>This is content</TheSection.Body>
        </TheSection>

        <h3>Spinning section</h3>
        <TheSection spinning>
          <TheSection.Header lined>This is lined header</TheSection.Header>
          <TheSection.Body>This is content</TheSection.Body>
        </TheSection>

        <br/>

        <TheAccordionSection heading='Try me!'>
          <p>
            This is the accordion body
          </p>
        </TheAccordionSection>
        <br/>
        <br/>
        <br/>
      </div>

    )
  }
}

export default ExampleComponent

Components

TheAccordionSection

Accordion section

Props

TheSection

Section of the-components

Props

TheSectionStyle

Style for TheSection

Props

License

This software is released under the MIT License.

Links

• THE Labo