/layout/section/section-basic
El componente BkSection sirve para representar una sección genérica en añadir contenido destacado.
Hemos dejado expuesto el contenido del componente, children, para tener la libertad de añadir múltiples layouts y elementos según diseño.
¿Qué es Bkool?
El Simulador de Ciclismo Indoor más realista
<BkSection
paddingX="medium"
paddingY="small"
backgroundImage='/static/img/events/banner-event.jpg'
>
{ children }
</BkSection>Modificando la prop backgroundColor, podremos cambiar el conlor de fondo de la section. Esta prop acepta tanto los valores de colores definifos en el theme, como un valor de color CSS "#00FF00".
Añadiendo la prop borderRadius, añadimos un border radius de 8px.
¿Qué es Bkool?
El Simulador de Ciclismo Indoor más realista
<BkSection
paddingX="small"
paddingY="small"
backgroundColor="accent"
borderRadius
>
{ children }
</BkSection>Añadiendo la prop backgroundOverlay, se añade un estilo de capa oscura con opacidad, recomendado para el uso de imágenes de fondo.
¿Qué es Bkool?
El Simulador de Ciclismo Indoor más realista
<BkSection
paddingX="medium"
paddingY="small"
backgroundImage='/static/img/events/banner-event.jpg'
backgroundOverlay
>
{ children }
</BkSection>Modificando la prop wave, se añade un elemento curvo en el bottom del componente. Acepta valores "black" o "white".
¿Qué es Bkool?
El Simulador de Ciclismo Indoor más realista
<BkSection
paddingX="medium"
paddingY="small"
backgroundImage='/static/img/events/banner-event.jpg'
backgroundOverlay
wave="black"
>
{ children }
</BkSection>| Nombre | Type | Default | Reuqerido | Descripción |
|---|---|---|---|---|
| backgroundColor | string - "#000000" or "accent" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | El color del background del componente. | ||
| backgroundImage | string | La imagen del background del componente. | ||
| backgroundOverlay | bool | Añade un overlay al background del componente. Este overlay cambia dependiendo si es el estilo del Giro o de Bkool. | ||
| backgroundPosition | "top", "bottom", "left", "right", "center" | Position de la imagen de background | ||
| backgroundSize | string | Size de la imagen de background. Este string debe ser un valor que acepte esta propiedad CSS | ||
| borderRadius | bool | Señala si tendrá radio el borde del componente. | ||
| children | node | Contenido del componente. | ||
| className | string | Sirve para añadir una clase a un componente. | ||
| paddingX | "none" | "extrasmall" | "small" | "medium" | "large" | "extralarge" | Añade un padding horizontal al componente. | ||
| paddingY | "none" | "extrasmall" | "small" | "medium" | "large" | "extralarge" | Añade un padding vertical al componente. | ||
| wave | "white" | "black" | Añade un elemento curvo en el bottom del componente. |