Ractive Ez Panel

Panel component for ractive.js

Demo

Install

npm i ractive-ez-panel

Usage

<EzContainer>
    <EzPanel size="300px" mode="fixed" class="aside">
        <EzContainer align="vertical">
            <EzPanel mode="maximized">Maximize the panel</EzPanel>
            <EzPanel>Panel 1B {{ value }}</EzPanel>
        </EzContainer>
    </EzPanel>
    <EzPanel>
        <EzContainer align="vertical">
            <EzPanel mode="fixed" size="100px">This panel is exactly 100px high</EzPanel>
            <EzPanel mode="minimized" class="footer">Minimize the panel to the space required by the contents</EzPanel>
            <EzPanel />
        </EzContainer>
    </EzPanel>
</EzContainer>

EzContainer

• align: horizontal or vertical

EzPanel

• size: A css measurement (including unit) for the panel (width in case of a horizontal container, height in case of a vertical container)
• mode: The sizing mode
  • auto: Adjust the size of all the panels in the container automatically
  • fixed: Adjust the size to be exactly that of the size property
  • minimized: Use as little space as possible to display the content of the panel
  • maximized: Use as much space as possible to display the content of the panel