amethyst-layout v0.6.0
How to install π
Open your terminal, navigate to your project, and enter the following command.
npm install amethyst-layout
How to use β¨
You can see the description and example components in our Storybook page.
Samples π¦
Container
Container
component is designed to center-align its inner elements, making it particularly useful when placing text content inside this component.
import { Container } from 'amethyst-layout';
const App = () => {
return (
<Container maxWidth={720} verticalPadding={30} horizontalPadding={10}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
vulputate arcu, nec semper est.
</Container>
);
};
export default App;
Flex
Flex
component is designed for effortless flex element implementation, typically used in complex and responsive layouts. We recommend using Grid if you want to use fixed layouts.
import { Container } from 'amethyst-layout';
const App = () => {
return (
<Flex gap={5} justify="center" align="center" wrap="wrap">
<Item /> {/* Your item components */}
<Item />
<Item />
<Item />
{/* ...more items */}
</Flex>
);
};
export default App;
Grid
Grid
component is designed for effortless grid element implementation, typically used in fixed layouts.
import { Grid } from 'amethyst-layout';
const App = () => {
return (
<Grid rows={3} columns={4} gap={5}>
<Item /> {/* Your item components */}
<Item />
<Item />
<Item />
{/* ...more items */}
</Grid>
);
};
export default App;
SplitPane
SplitPane
component is a component that allows users to adjust the sizes of two or more child components. Use the resize bar to change these sizes.SplitPane
μ»΄ν¬λνΈλ λ κ° μ΄μμ μμ μ»΄ν¬λνΈλ₯Ό μ¬μ©μκ° μμ λ‘μ΄ μ‘°μ ν μ μλ μ»΄ν¬λνΈμ λλ€.
Properties
If the property is optional, a ?
will be appended after the name.
μμ±μ΄ νμκ°μ΄ μλ κ²½μ° μ΄λ¦ λ€μ ?
κ° λΆμ΅λλ€.
| Name | Type | Description | Default |
|:-:|:-:|---|:-:|
|defaultRatios|number[]
|Ratios of the child on first render. The unit of the ratio is %. Note that sum of the ratios must be 100, and the length of the number array must same with children count. otherwise it will not work as you expected.μ²μμΌλ‘ μμ μμλ€μ λλλ§ν λ κ° μμ μμκ° μ°¨μ§νκ² λ λΉμ¨μ
λλ€. λΉμ¨μ λ¨μλ %μ
λλ€. λ°λμ λΉμ¨μ ν©μ 100μ΄ λμ΄μΌ νλ©°, λΉμ¨μ κ°μ κ°μλ μμ μμμ κ°μμ μΌμΉν΄μΌ ν©λλ€. κ·Έλ μ§ μμ κ²½μ° μ»΄ν¬λνΈκ° μ€μλν μ μμ΅λλ€.|-|
|direction?|'row' \| 'column'
|Alignment direction of children.μμ μ»΄ν¬λνΈλ€μ΄ λ°°μΉλλ λ°©ν₯μ
λλ€.|row
|
|resizerThickness?|number
| Thickness of the resizers for resizing child components. You can use only number
type, which means the pixels of thickness.μμ μ»΄ν¬λνΈμ ν¬κΈ°λ₯Ό μ‘°μ ν μ μλ μμ‘μ΄μ κ΅΅κΈ°μ
λλ€. px
λ¨μλ§ μ¬μ©ν μ μμ΅λλ€.|15
|
|borderThickness?|number
|Thickness of the border of the component. You can use only number
type, which means the pixels of thickness.μ€κ³½μ μ κ΅΅κΈ°μ
λλ€. px
λ¨μλ§ μ¬μ©ν μ μμ΅λλ€.|2
|
|minimumRatio?|number
|The minimum ratio of the child components. Child components will not shrink below this value.κ° μμ μ»΄ν¬λνΈκ° κ°μ§κ² λ μ΅μ ν¬κΈ°(λΉμ¨)μ
λλ€. μμ‘μ΄λ₯Ό μ‘°μ νλλΌλ μ΅μ ν¬κΈ° λ―Έλ§μΌλ‘λ μ€μ΄λ€μ§ μμ΅λλ€.|0
|
|maximumRatio?|number
|The maximum ratio of the child components. Child components will not expand above this value.κ° μμ μ»΄ν¬λνΈκ° κ°μ§κ² λ μ΅λ ν¬κΈ°(λΉμ¨)μ
λλ€. μμ‘μ΄λ₯Ό μ‘°μ νλλΌλ μ΅λ ν¬κΈ°λ³΄λ€ λμ΄λμ§ μμ΅λλ€.|100
|
horizontalMargin?|${number}px \| ${number}% \| number
|The margins for the left and right sides. Useful when you want to align multiple SplitPane
components in a horizontal arrangement. You can use the unit of %
, px
, or numeric values.μ»΄ν¬λνΈμ μ’μ° marginμ μλ―Έν©λλ€. μ¬λ¬ κ°μ SplitPane
μ»΄ν¬λνΈλ₯Ό κ°λ‘λ‘ λ°°μΉν λ νΉν μ μ©ν©λλ€. %
, px
λ¨μμ κ°μ μ¬μ©νκ±°λ μ μ κ°μ μ¬μ©ν μ μμ΅λλ€.|0
|
verticalMargin?|${number}px \| ${number}% \| number
|The margins for the top and bottom sides. Useful when you want to align multiple SplitPane
components in a vertical arrangement. You can use the unit of %
, px
, or numeric values.μ»΄ν¬λνΈμ μν marginμ μλ―Έν©λλ€. μ¬λ¬ κ°μ SplitPane
μ»΄ν¬λνΈλ₯Ό μΈλ‘λ‘ λ°°μΉν λ νΉν μ μ©ν©λλ€. %
, px
λ¨μμ κ°μ μ¬μ©νκ±°λ μ μ κ°μ μ¬μ©ν μ μμ΅λλ€.|0
|
width?|${number}px \| ${number}% \| number
|The width of the component. You can use the unit of %
, px
, or numeric values.μ»΄ν¬λνΈμ κ°λ‘ κΈΈμ΄μ
λλ€. %
, px
λ¨μμ κ°μ μ¬μ©νκ±°λ μ μ κ°μ μ¬μ©ν μ μμ΅λλ€.|100%
|
height?|${number}px \| ${number}% \| number
|The height of the component. You can use the unit of %
, px
, or numeric values.μ»΄ν¬λνΈμ μΈλ‘ κΈΈμ΄μ
λλ€. %
, px
λ¨μμ κ°μ μ¬μ©νκ±°λ μ μ κ°μ μ¬μ©ν μ μμ΅λλ€.|100%
|
themeColor?|$#{string}
|The theme color of the component. While the SplitPane
component doesn't directly provide color-related properties, you can use the theme color to define the overall design of the component. If you specify the theme color, the appropriate design will be automatically applied. You can use Hex format to apply theme using a color.μ»΄ν¬λνΈμ ν
λ§ μμ
λλ€.SplitPane
μ»΄ν¬λνΈλcolor
κ΄λ ¨ νλ‘νΌν°λ₯Ό μ§μ μ μΌλ‘ μ 곡νμ§λ μμ§λ§, ν
λ§ μμ μ΄μ©νμ¬ μ»΄ν¬λνΈμ μ 체μ μΈ λμμΈμ μ ν μ μμ΅λλ€. ν
λ§ μλ§ μ¬λ¬λΆμ΄ μ ν΄μ£Όμ λ€λ©΄ κ·Έμ κ±Έλ§λ λμμΈμ΄ μμμ μ μ©λ©λλ€. Hex λ¨μμ κ°μ μ¬μ©ν΄ μ£ΌμΈμ.|#be33ff
|
Examples
<Item />
component is not included in this library, use your own children.<Item />
μ»΄ν¬λνΈλ μ΄ λΌμ΄λΈλ¬λ¦¬μ ν¬ν¨λμ΄ μμ§ μμ΅λλ€. μ¬λ¬λΆμ μ©λμ λ§κ² μ΄ μ리μ μ¬λ¬λΆμ μμ μ»΄ν¬λνΈλ₯Ό μ¬μ©ν΄ μ£ΌμΈμ.
- A Simple way to use the
SplitPane
component - κ°μ₯ κ°λ¨ν λ°©μμ
SplitPane
μ»΄ν¬λνΈ μ¬μ© λ°©λ² μμμ λλ€.
import { SplitPane } from 'amethyst-layout';
import { Item } from 'your-awesome-component';
const App = () => {
return (
<SplitPane defaultRatios={[50, 50]}>
<Item />
<Item />
</SplitPane>
);
};
export default App;
SplitPane
component with various props- λ€μν propsκ° ν¬ν¨λμ΄ μλ
SplitPane
μ»΄ν¬λνΈ μμμ λλ€.
import { SplitPane } from 'amethyst-layout';
import { Item } from 'your-awesome-component';
const App = () => {
return (
<SplitPane
defaultRatios={[20, 30, 50]}
direction="column"
resizerThickness={30}
borderThickness={4}
minimumRatio={10}
maximumRatio={90}
horizontalMargin={5}
verticalMargin={20}
width={400}
height={300}
themeColor="#0004ff"
>
<Item />
<Item />
<Item />
</SplitPane>
);
};
export default App;
- Nested
SplitPane
components - μ€μ²©λ
SplitPane
μ»΄ν¬λνΈμ μ¬μ©λ κ°λ₯ν©λλ€. μ΄λ₯Ό νμ©ν΄ λ 볡μ‘ν λ μ΄μμμ λ§λ€ μ μμ΅λλ€.
import { SplitPane } from 'amethyst-layout';
import { Item } from 'your-awesome-component';
const App = () => {
return (
<SplitPane defaultRatios={[30, 70]}>
<Item />
<SplitPane defaultRatios={[50, 50]} direction="column">
<Item />
<Item />
</SplitPane>
</SplitPane>
);
};