react-layout-pane

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #llm #android #machine-learning #linux #java #kubernetes #vue #security #ios #openai #open-source

react-layout-pane

(★ 98)

React layout component using flexbox

react-layout-pane 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Layout Pane

React layout component using flexbox.

Check out the [demo](http://damaged-turn.surge.sh)

## Example 1

```html
   <Layout type="column">
       <Fixed className="header">
           Fixed Header
       </Fixed>
       <Flex className="content">
           Flex Body
       </Flex>
   </Layout>
```

## Example 2

```html
   <Layout type="column">
       <Fixed className="header">Fixed Header</Fixed>
       <Flex>
           <Layout type="row">
               <Fixed className="sidebar">Fixed Sidebar</Fixed>
               <Flex className="content">Flex Body</Flex>
           </Layout>
       </Flex>
   </Layout>
```

## Example 3

```html
    <Layout type="row">
        <Fixed className="sidebar">Fixed Sidebar</Fixed>
        <Flex>
            <Layout type="column">
                <Fixed className="header">Fixed Header</Fixed>
                <Flex className="content">Flex Body</Flex>
            </Layout>
        </Flex>
    </Layout>
```

## Example 4

```html
    <Layout type="row">
        <Fixed className="sidebar">
            <Layout type="column">
                <Fixed>
                    Top Left
                </Fixed>
                <Flex>
                </Flex>
                <Fixed>
                    Bottom Left
                </Fixed>
            </Layout>
        </Fixed>
        <Flex>
            <Layout type="column">
                <Fixed className="header">
                    Fixed Header
                </Fixed>
                <Flex className="content">
                    Flex Body
                </Flex>
                <Fixed className="header">
                    Fixed Footer
                </Fixed>
            </Layout>
        </Flex>
        <Fixed className="sidebar">
            <Layout type="column">
                <Fixed>
                    Top Right
                </Fixed>
                <Flex>
                </Flex>
                <Fixed>
                    Bottom Right
                </Fixed>
            </Layout>
        </Fixed>
    </Layout>
```

## Example 5

```html
    <Layout type="column">
        <Fixed className="header">
            Fixed Header
        </Fixed>
        <Flex>
            <Layout type="row">
                <Fixed className="sidebar">
                    <Layout type="column">
                        <Fixed>
                            Top Left
                        </Fixed>
                        <Flex>
                        </Flex>
                        <Fixed>
                            Bottom Left
                        </Fixed>
                    </Layout>
                </Fixed>
                <Flex className="content">
                    Flex Body
                </Flex>
                <Fixed className="sidebar">
                    <Layout type="column">
                        <Fixed>
                            Top Right
                        </Fixed>
                        <Flex>
                        </Flex>
                        <Fixed>
                            Bottom Right
                        </Fixed>
                    </Layout>
                </Fixed>
            </Layout>
        </Flex>
        <Fixed className="header">
            Fixed Footer
        </Fixed>
    </Layout>
 ```

## CSS

```css
    *, *:before, *:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    html, body {
        font-size: 16px;
        line-height: 1.5rem;
        height: 100%;
        min-height: 100%;
    }

.header {
        padding: 1rem;
        background: #111;
        height: 4rem;
        color: #fff;
    }

.sidebar {
        padding: 1rem;
        background: #2980B9;
        width: 8rem;
        color: #fff;
    }

.content {
        padding: 1rem;
        background: #ECF0F1;
    }
```

react-layout-pane

react-layout-pane 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-layout-pane

react-layout-pane 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README