mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekayandHanzo Dev
751ef5c778
Both old names are owned by a different npm account (artemis-prime), so publishing them returns 403 — which is how this surfaced: the 8.0.0 run shipped @hanzogui/logo and @hanzogui/demos depending on [email protected], a version that cannot be published and therefore does not exist. Those two were uninstallable. @hanzo/gui and @hanzogui/* are ours, so the framework now carries the name it is imported by everywhere downstream, and the loader moves under the scope we control. The rewrite is limited to package references. `DEBUG?.startsWith('hanzogui')` is a log-namespace filter and join(dir, 'hanzogui') is a path — rewriting either would change behaviour, so both are untouched. Co-authored-by: Hanzo Dev <[email protected]>
148 lines
3.7 KiB
Plaintext
148 lines
3.7 KiB
Plaintext
---
|
|
title: Group
|
|
description: Render horizontal or vertical groups easily.
|
|
name: group
|
|
component: Group
|
|
demoName: Group
|
|
---
|
|
|
|
# Group
|
|
|
|
<Description>Layout buttons and more with groups.</Description>
|
|
|
|
<HeroContainer>
|
|
<GroupDemo />
|
|
</HeroContainer>
|
|
|
|
```tsx hero template=Group
|
|
|
|
```
|
|
|
|
<Highlights
|
|
features={[
|
|
'Accepts size prop that works on all styles.',
|
|
'Align vertically or horizontally.',
|
|
'Natural spacing and disabled props.',
|
|
'Use with or without Item for more control.',
|
|
]}
|
|
/>
|
|
|
|
## Usage
|
|
|
|
You can use `Group` by itself with the `axis` property determining the direction it assumes.
|
|
|
|
By default, Groups will control the border radius of their children automatically - the first and last children will get their start/end radius set to match group radius. If it's a `YGroup`, it will adjust top/bottom radius. `XGroup` adjusts the left/right radius.
|
|
|
|
You can use Groups with or without `Group.Item`, depending on if you want to spacing and separators to be handled based on direct children, or on each Item rendered.
|
|
|
|
```tsx
|
|
import { Button, XGroup } from '@hanzo/gui'
|
|
|
|
// usage with Item:
|
|
export default () => (
|
|
<XGroup>
|
|
<XGroup.Item>
|
|
<Button>First</Button>
|
|
</XGroup.Item>
|
|
<XGroup.Item>
|
|
<Button>Second</Button>
|
|
</XGroup.Item>
|
|
<XGroup.Item>
|
|
<Button>Third</Button>
|
|
</XGroup.Item>
|
|
</XGroup>
|
|
)
|
|
```
|
|
|
|
For a simpler use case and backwards compat, you can also use it without `Group.Item`, which will just apply borders and spacing based on direct children. Note that Group will detect if any `Group.Item` is inside it, and automatically switch modes. If no Item, it spaces direct children:
|
|
|
|
```tsx
|
|
import { Button, XGroup } from '@hanzo/gui'
|
|
|
|
// usage without Item:
|
|
export default () => (
|
|
<XGroup>
|
|
<Button>First</Button>
|
|
<Button>Second</Button>
|
|
<Button>Third</Button>
|
|
</XGroup>
|
|
)
|
|
```
|
|
|
|
## Sizing
|
|
|
|
The `size` property will use your tokens to grab the appropriate radius for borderRadius values which it will pass to the first and last child as style props for borderRadius.
|
|
|
|
```tsx
|
|
import { Button, XGroup } from '@hanzo/gui'
|
|
|
|
export default () => (
|
|
<XGroup size="$6">
|
|
<XGroup.Item>
|
|
<Button>First</Button>
|
|
</XGroup.Item>
|
|
<XGroup.Item>
|
|
<Button>Second</Button>
|
|
</XGroup.Item>
|
|
<XGroup.Item>
|
|
<Button>Third</Button>
|
|
</XGroup.Item>
|
|
</XGroup>
|
|
)
|
|
```
|
|
|
|
## Disabled
|
|
|
|
The `disabled` property will pass to children
|
|
|
|
<HeroContainer>
|
|
<GroupDisabledDemo />
|
|
</HeroContainer>
|
|
|
|
## Group API
|
|
|
|
### Group
|
|
|
|
`Group`, `XGroup`and`YGroup` extend [YStack](/docs/components/stacks), getting [Gui standard props](/docs/intro/props), plus:
|
|
|
|
<PropsTable
|
|
data={[
|
|
{
|
|
name: 'axis',
|
|
required: false,
|
|
type: '"horizontal" | "vertical"',
|
|
description: `Forces applying the border radius styles to left/right vs top/bottom. Defaults to horizontal for XGroup and vertical for YGroup.`,
|
|
},
|
|
{
|
|
name: 'size',
|
|
required: false,
|
|
type: 'string | SizeTokens',
|
|
description: `Set a size, number or one of the size token values.`,
|
|
},
|
|
{
|
|
name: 'disabled',
|
|
required: false,
|
|
type: 'boolean',
|
|
description: `Pass disabled down to children.`,
|
|
},
|
|
{
|
|
name: 'disablePassBorderRadius',
|
|
required: false,
|
|
type: `boolean | 'bottom' | 'top' | 'start' | 'end'`,
|
|
description: `Disables passing border radius to first/last children.`,
|
|
},
|
|
{
|
|
name: 'forceUseItem',
|
|
required: false,
|
|
type: 'boolean',
|
|
desctiption: `Can be used to force the group to assume it has Item components as children.`,
|
|
},
|
|
]}
|
|
/>
|
|
|
|
### Group.Item
|
|
|
|
Wrap each of `XGroup` or `YGroup`'s children in one of these. It lets Gui apply the needed styles to them.
|
|
|
|
Accepts only a `children` prop.
|