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]>
120 lines
3.3 KiB
Plaintext
120 lines
3.3 KiB
Plaintext
---
|
|
title: Linear Gradient
|
|
description: Linear gradients that work with Gui style props
|
|
name: linear-gradient
|
|
component: LinearGradient
|
|
package: linear-gradient
|
|
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
|
|
```
|
|
|
|
### Native Setup
|
|
|
|
On native, LinearGradient uses `expo-linear-gradient` for rendering. This works with vanilla React Native or Expo.
|
|
|
|
#### Step 1: Install expo-linear-gradient
|
|
|
|
```bash
|
|
npm install expo-linear-gradient
|
|
```
|
|
|
|
#### Step 2: Import the setup module
|
|
|
|
In your app's entry file (index.js or App.tsx), before any Gui imports:
|
|
|
|
```tsx
|
|
import '@hanzogui/native/setup-expo-linear-gradient'
|
|
```
|
|
|
|
That's it! LinearGradient will automatically detect and use expo-linear-gradient when available.
|
|
|
|
#### Without expo-linear-gradient
|
|
|
|
If you don't set up expo-linear-gradient, LinearGradient will log a warning on native. On web, LinearGradient uses CSS gradients and doesn't require any additional setup.
|
|
|
|
## Usage
|
|
|
|
Because LinearGradient requires a native package, it is not included in the main `hanzogui` export. 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. It places `expo-linear-gradient` inside set to `absoluteFill`.
|
|
|
|
## API Reference
|
|
|
|
### LinearGradient
|
|
|
|
See the [expo docs](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) for more complete information.
|
|
|
|
#### Alternative: backgroundImage style prop
|
|
|
|
For most gradients, use the [`backgroundImage` style prop](/docs/intro/styles#backgroundimage):
|
|
|
|
```tsx
|
|
<View backgroundImage="linear-gradient(to bottom, $background, $color)" />
|
|
```
|
|
|
|
Use `<LinearGradient>` for precise color stop control.
|
|
|
|
---
|
|
|
|
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.`,
|
|
},
|
|
]}
|
|
/>
|