Box

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Box } from '@bigbang/ui';

Kaynak

Box.tsx

Storybook

Box · Playground

Box, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

import { Box } from '@bigbang/ui';

<Box padding="xl" background="raised" border="subtle" radius="md">
  Kart açıklaması burada yer alır.
</Box>;

Özellikler

padding

Açıklama

Dört kenardaki iç boşluk, space.* ölçeğinden.

Tür

SpaceToken

paddingInline

Açıklama

Satır başı ve sonundaki iç boşluk (soldan sağa metinde sol ve sağ); bu kenarlarda padding değerini ezer.

Tür

SpaceToken

paddingBlock

Açıklama

Üst ve alt iç boşluk; bu kenarlarda padding değerini ezer.

Tür

SpaceToken

background

Açıklama

Yüzey rengi. Sayfadaki kartlar için raised, çukur alanlar için sunken, üst üste paneller için layer-*.

Tür

'none' | 'default' | 'raised' | 'sunken' | 'layer-1' | 'layer-2' | 'layer-3'

Varsayılan

'none'

border

Açıklama

Varsayılan ya da silik kenarlık renginde 1 px kenarlık.

Tür

'none' | 'default' | 'subtle'

Varsayılan

'none'

radius

Açıklama

radius.* ölçeğinden köşe yarıçapı.

Tür

'none' | 'sm' | 'md' | 'lg'

Varsayılan

'none'

render

Açıklama

Bölge ya da liste anlamı için başka bir öğe olarak çizer, ör. <section>, <ul>. Varsayılan <div>.

Tür

ReactElement | ComponentRenderFn<HTMLProps, {}>

children

Açıklama

İçerik.

Tür

ReactNode

Bunların dışında yerel <div> öznitelikleri (id, role, aria-*, data-*) doğrudan iletilir. className ve style tür tanımında yoktur; verilirse tür denetimi hata verir. ref oluşturulan öğeye bağlanır.

Veri öznitelikleri

• data-component="box": kök öğe üzerinde.