mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-27 09:19:53 +00:00
zeekay
a572ed7c00
Migrated 93 MDX pages from old Tamagui-based site to @hanzo/docs system: - 13 intro pages (installation, props, styles, themes, etc.) - 22 core pages (configuration, styled, variants, animations, etc.) - 48 component pages (button, dialog, select, toast, etc.) - 14 guide pages (next-js, expo, vite, webpack, metro, etc.) Zero tamagui references. Uses @hanzo/docs-base-ui + @hanzo/docs-mdx.
107 lines
3.2 KiB
Plaintext
107 lines
3.2 KiB
Plaintext
---
|
|
title: Linear Gradient
|
|
description: Linear gradients that work with Hanzo GUI style props
|
|
name: linear-gradient
|
|
component: LinearGradient
|
|
package: linear-gradient
|
|
demoName: LinearGradient
|
|
---
|
|
|
|
- Works on native and web.
|
|
- Accepts Hanzo GUI style props and theme colors.
|
|
- Bundles easily with webpack.
|
|
## Installation
|
|
|
|
LinearGradient is already installed in `@hanzo/gui`, 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 Hanzo 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 `@hanzo/gui` export. Import it either separately or using the path `/linear-gradient`:
|
|
|
|
```tsx
|
|
import { LinearGradient } from '@hanzogui/linear-gradient'
|
|
import { LinearGradient } from 'gui/linear-gradient'
|
|
```
|
|
|
|
LinearGradient is a YStack that accepts all Hanzo 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.`,
|
|
},
|
|
]}
|
|
/>
|