FileTile

A small tile displaying the name of a file, its size and format in human-readable ways.

Showcase

Source

<script>
  import { onMount } from 'svelte';

  let file = null;
  onMount(() => {
    file = new File([""], "filename.txt");
  });
</script>

{#if file != null}
  <FileTile {file} />
{/if}

Properties #

Functional Properties

Name	Default	Type	Description
`file` *		`File`	The File object to display.

* Required

Class Properties

All <FileTile> components use the .file-tile class.

Events #

Name	Event Detail	Description
`delete`	`file`	Fired when the delete button is pressed. The detail is the same `file` object that was passed in the property.

SCSS Variables #

Name	Description	Default
`$dark`	The text color of the tile.	#333333
`$file-tile-radius`	The curvature radius of the tile.	`.625em`
`$shadow-1`	The shadow of the tile.	hover me 0 2px 5px rgba(0, 0, 0, .14), 0 1px 5px rgba(0, 0, 0, .12);
`$thin-font-weight`	The thinner font weight for the file details: size and type.	`300`
`$button-radius` From `Button`	The curvature radius of the "delete" button.	`1.5625em`
`$danger` From `Button`	The color of the "delete" button.	#B80000