FLIN App

With Files and Folders

File manager populated with a mix of folders and file types.

Projects

Documents

notes.txt

photo.png

app.flin

readme.md

Project Files

File manager showing a typical project directory structure.

app

components

entities

layouts

index.flin

config.toml

Empty State

File manager showing an empty folder with a helpful message.

This folder is empty

Usage

<FileManager> <div><Icon name="folder" size="28" color="#c9952c" /><span>Projects</span></div> <div><Icon name="file-text" size="28" color="#17a2b8" /><span>notes.txt</span></div> <div><Icon name="file-code" size="28" color="#6f42c1" /><span>app.flin</span></div></FileManager>

Props

Prop	Type	Default	Description
`children`	content	-	File and folder items displayed in the grid

FileManager

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } With Files and Folders

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Project Files

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Empty State

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Usage

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Props

With Files and Folders

Project Files

Empty State

Usage

Props