Skip to content

Latest commit

 

History

History
145 lines (128 loc) · 3.14 KB

Select.mdx

File metadata and controls

145 lines (128 loc) · 3.14 KB
name menu
Select
Components

import { Playground, Props } from 'docz';

import Select from './Select' import Window from '../Window/Window' import WindowContent from '../WindowContent/WindowContent' import Cutout from '../Cutout/Cutout'

Select

Usage

Fixed Width

{() => { const items = [ { value: 1, label: '⚡ Pikachu' }, { value: 2, label: '🌿 Bulbasaur' }, { value: 3, label: '💦 Squirtle' }, { value: 4, label: '🔥 Charizard' }, { value: 5, label: '🎤 Jigglypuff' }, { value: 6, label: '🛌🏻 Snorlax' }, { value: 7, label: '⛰ Geodude' } ]; return ( console.log(value)} width={150} /> ); }} Fixed Height {() => { const items = [ { value: 1, label: '⚡ Pikachu' }, { value: 2, label: '🌿 Bulbasaur' }, { value: 3, label: '💦 Squirtle' }, { value: 4, label: '🔥 Charizard' }, { value: 5, label: '🎤 Jigglypuff' }, { value: 6, label: '🛌🏻 Snorlax' }, { value: 7, label: '⛰ Geodude' } ]; return ( console.log(value)} height={100} width={150} /> ); }}

With shadow

{() => { const items = [ { value: 1, label: '⚡ Pikachu' }, { value: 2, label: '🌿 Bulbasaur' }, { value: 3, label: '💦 Squirtle' }, { value: 4, label: '🔥 Charizard' }, { value: 5, label: '🎤 Jigglypuff' }, { value: 6, label: '🛌🏻 Snorlax' }, { value: 7, label: '⛰ Geodude' } ]; return ( console.log(value)} /> ); }} Flat {() => { const items = [ { value: 1, label: '⚡ Pikachu' }, { value: 2, label: '🌿 Bulbasaur' }, { value: 3, label: '💦 Squirtle' }, { value: 4, label: '🔥 Charizard' }, { value: 5, label: '🎤 Jigglypuff' }, { value: 6, label: '🛌🏻 Snorlax' }, { value: 7, label: '⛰ Geodude' } ]; return ( When you want to use Select on a light background (like scrollable content), just use the flat variant: console.log(value)} height={100} width={150} /> ); }}

API

Import

import { Select } from 'react95'

Props