UI
A set of UI components for Svelte.
Icons
We can pass a Svelte component to the Icon
component in order to render the desired icon, like this:
<script>
import {default as Icon} from '@svizzle/ui/src/icons/Icon.svelte';
import {default as Download} from '@svizzle/ui/src/icons/feather/Download.svelte';
</script>
<Icon
glyph={Download}
size=30
strokeWidth=1.5
/>
Icon
props:
-
glyph
- description: the svelte component of the icon to be rendered (of course you can provide your own)
- type:
svelte component
- default:
null
-
size
:- description: icon size
- type:
number
- default:
24
- style:
-
fill
:- description: the color to be used to fill closed shapes
- type:
string
- default:
'none'
-
stroke
:- description: lines color
- type:
string
- default:
'currentColor'
-
strokeWidth
:- description: lines thickness
- type:
number
- default:
2
-
As a commodity, icons from https://github.com/feathericons/feather/tree/master/icons are automatically turned into Svelte components and provided in ./src/icons/feather
for ease of use.
Note that the makeFeatherIcons
npm script assumes the feather
directory in the root of the Svizzle repository because Lerna is set up to hoist packages in the root node_modules
dir.
LayoutHMF
A component with a header
(H), a main
(M) and a footer
(F).
It has no props, but you can pass up to 3 slots with the correspondent names:
<LayoutHMF>
<h2 slot='header'>{headerText}</h2>
<MyComponent
prop={myProp}
slot='main'
/>
<p slot='footer'>{footerText}</p>
</LayoutHMF>
HyperLink
Props:
-
download
:string
, defaults tonull
; serves as a file name as opposed to the file name provided inhref
; use for files that the browser would otherwise display, in order to get a download dialog instead. For example: - if thehref
is azip
orcsv
file, it's not needed; - if thehref
isdata/foo.png
(which could be displayed), by providingdownload='bar'
we download a file namedbar.png
. Order of precedence of the filename extension offered in save-file dialog: 1. extension in thedownload
attribute 2. mime type of the response (for example when we try to download a picture but we get a 404) 3. extension in thehref
attribute. -
href
:string
, defaults tonull
-
hreflang
:string
, defaults tonull
-
iconSize
:number
, defaults to14
-
isBold
:boolean
, defaults tofalse
-
isUnderlined
:boolean
, defaults tofalse
-
rel
:string
, defaults to'noopener'
-
showIcon
:boolean
, defaults totrue
-
target
:string
, defaults tonull
-
text
:string
, defaults to '' (ifhref
isn't provided it turns into<HyperLink.svelte>: PLEASE PROVIDE A
hrefPROP'
) -
theme
:object
, it gets merged to the default object, that is:{ iconStroke: 'rgb(16, 174, 249)', iconStrokeWidth: 2, textColor: 'black', }
-
type
:string
, defaults tonull
(see https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)
LinkButton
Props:
-
download
:string
, defaults tonull
; seeHyperLink
above. -
glyph
: a Svelte component for an optional icon -
href
:string
, defaults tonull
-
hreflang
:string
, defaults tonull
-
iconSize
:number
, defaults to14
-
rel
:string
, defaults to'noopener'
-
target
:string
, defaults tonull
-
text
:string
, defaults to 'Please providetext
' -
theme
:object
, it gets merged to the default object, that is:{ backgroundColor: 'black', boxShadowColor: 'lightgrey', boxShadowVec: '2px 8px 9px -4px', iconFill: defaultFill, iconStroke: defaultStroke, iconStrokeWidth: defaultStrokeWidth, textColor: 'white', }
-
type
:string
, defaults tonull
(see https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)
LoadingView
An empty view with a rotating icon at its center, with the same props of Icon
so that you can control the displayed icon.
Props:
-
fill
: string, defaults tonull
-
glyph
: Svelte component, defaults toLoader
(Feather'sloader
) -
size
: number, defaults to50
-
stroke
: string, defaults tonull
-
strokeWidth
: number, defaults to0.75
MessageView
An empty view with a text at its center.
Props:
-
backgroundColor
(string, default: 'white') -
color
(string, default: 'black') -
fontSize
(string, default: '14px') -
text
(string, default: 'Please provide a message')
MultiBanner
A component to display multiple banners in a sequence, to be used typically during page loading.
Props:
-
_screen
:ScreenSensor
store, defaults tonull
-
components
: Array of Svelte components, dewfaults to empty array -
currentIndex
: number, defaults to 0
NoScript
Displays a message when Javascript is disabled.
To test this, disable Javascript in your browser and check Svizzle's documentation website.
ResponsiveButton
A button with 2 slots:
-
always
: always renders -
optional
: renders if there's enough room for it or if disabled viaisOptionalHidden
The component measures the container size and if the optional
slot is not disabled it automatically hides it when there's not enough room for it.
Props:
-
doesOverflow
(bool
): if so, doesn't render theoptional
slot -
isActive
(bool
): if so, renders usingtheme.colorBackgroundActive
andtheme.colorTextActive
-
isOptionalHidden
(bool
): if so, doesn't render theoptional
slot -
title
(string
): the HTMLtitle
attribute for the button -
theme
:-
borderBottom
,borderLeft
,borderRight
,borderTop
: borders, useful when we have a row/column of these buttons and want to apply borders in such a way to avoid borders duplication -
colorBackground
,colorBackgroundActive
: default and activebackground-color
-
colorText
,colorTextActive
: default and activecolor
-
colorText
,colorTextActive
: default and activecolor
-
outlineColor
,outlineStyle
,outlineWidth
: values for the correspondentoutline-*
CSS properties
-
ResponsiveFlex
Handles content layout so that its children are aligned:
- horizontally on
medium
and larger displays (according toScreenSensor
) - vertically centered on
small
and smaller displays
Switch
A simple toggle between 2 values.
Sensor components
These are components that we instantiate to measure some feature of the device/browser.
ScreenSensor
Measures screen features reactively, see here.
ScrollbarStyler (Blink & WebKit browsers)
This Svelte component provides a solution to style scrollbars on Blink and WebKit based browsers to allow for easy customization of the scrollbars to better match the design of the webpage.
It uses the ::-webkit-scrollbar
pseudo-element to target the scrollbar and a :global
selector to ensure that the styling is applied globally.
It can be enabled using the isEnabled
prop.
Using the theme
prop you can set:
- the color of the track and the thumb
- the track border color
- the track width
- the thumb radius
Usage
Include this component with the desired theme
in a specific page or, in the main layout to style scrollbars of the entire web app.
Breakpoints
import {breakpoints} from '@svizzle/ui/src/defaults';
A set of breakpoints for responsiveness, expressed in amount of chars fitting the screen width for responsive layouts ([45, 90, 135, 180]
), see here.
The bands among breakpoints can be thought as T-shirt sizes:
45 90 135 180
xSmall | small | medium | large | xLarge