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]>
85 lines
2.5 KiB
Plaintext
85 lines
2.5 KiB
Plaintext
---
|
|
title: Linear Gradient
|
|
description: Linear gradients that work with Gui style props
|
|
name: html
|
|
component: LinearGradient
|
|
demoName: LinearGradient
|
|
---
|
|
|
|
<HeroContainer>
|
|
<LinearGradientDemo />
|
|
</HeroContainer>
|
|
|
|
```tsx hero template=LinearGradient
|
|
|
|
```
|
|
|
|
<Highlights
|
|
features={[
|
|
'Works on native and web.',
|
|
'Accepts Gui style props and theme colors.',
|
|
'Bundles easily with webpack.',
|
|
]}
|
|
/>
|
|
|
|
## Installation
|
|
|
|
LinearGradient is already installed in `hanzogui`, or you can install it independently:
|
|
|
|
```bash
|
|
npm install @hanzogui/linear-gradient
|
|
```
|
|
|
|
To use this package you'll need to add `expo-linear-gradient` to your app. This works [with vanilla React Native](https://github.com/expo/expo/tree/sdk-47/packages/expo-linear-gradient) or Expo.
|
|
|
|
## Usage
|
|
|
|
Because LinearGradient requires a more complex to install native package, we've left it out of the `hanzogui` export until Metro supports async import. Import it either separately or using the path `/linear-gradient`:
|
|
|
|
```tsx
|
|
import { LinearGradient } from '@hanzogui/linear-gradient'
|
|
import { LinearGradient } from '@hanzo/gui/linear-gradient'
|
|
```
|
|
|
|
LinearGradient is a YStack that accepts all Gui style props as well as theme colors, that places `expo-linear-gradient` inside it set to absoluteFill.
|
|
|
|
## API Reference
|
|
|
|
### LinearGradient
|
|
|
|
See the [expo docs](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) for more complete information.
|
|
|
|
LinearGradient extends YStack, inheriting [Stack props](/docs/components/stacks) and therefore the [Gui standard props](/docs/intro/props), plus:
|
|
|
|
<PropsTable
|
|
data={[
|
|
{
|
|
name: 'colors',
|
|
required: true,
|
|
type: 'string[]',
|
|
description: `Two or more colors.`,
|
|
},
|
|
{
|
|
name: 'locations',
|
|
required: false,
|
|
type: 'number[] | null',
|
|
description: `An array that contains numbers ranging from 0 to 1, inclusive, and is the same length as the colors property. Each number indicates a color-stop location where each respective color should be located.`,
|
|
default: '[0.0, 1.0]',
|
|
},
|
|
{
|
|
name: 'start',
|
|
required: false,
|
|
type: 'LinearGradientPoint | null',
|
|
default: '{ x: 0.5, y: 0.0 }',
|
|
description: `For example, { x: 0.1, y: 0.2 } means that the gradient will start 10% from the left and 20% from the top.`,
|
|
},
|
|
{
|
|
name: 'end',
|
|
required: false,
|
|
type: 'LinearGradientPoint | null',
|
|
default: '{ x: 0.5, y: 1.0 }',
|
|
description: `For example, { x: 0.1, y: 0.2 } means that the gradient will end 10% from the left and 20% from the bottom.`,
|
|
},
|
|
]}
|
|
/>
|