attachment

Attachments: a file shown as a card with its name, details, a picture or its type, where its upload has got to, and actions such as remove or download.

attachment.group([
  attachment.attachment(
    words: attachment.english(),
    name: "report.pdf",
    detail: "PDF · 2.4 MB",
    status: attachment.Uploading(64),
    media: None,
    actions: [ui.sized_button(Ghost, IconSmall, [attribute.aria_label("Remove report.pdf")], [text("×")])],
  ),
  attachment.styled(attachment.english(), attachment.Tile, name: "photo.jpeg", detail: "820 KB",
    status: attachment.Done,
    media: Some(html.img([attribute.src(thumbnail), attribute.alt("")])),
    actions: []),
])

Receiving and storing the file is the application’s job; an attachment shows the state it reports. A failure is announced to screen readers.

words say what an upload in progress is called; howdy/ui/words holds them for a locale as its attachment field.

Types

Layout

</>

How an attachment is laid out.

pub type Layout {
  Row
  Compact
  Tile
}

Constructors

```
Row
```
A row: picture or type, then name and details, then actions.
```
Compact
```
A smaller row, for a composer or a dense list.
```
Tile
```
A tile with the picture on top, for images.

Status

</>

Where a file has got to.

pub type Status {
  Uploading(percent: Int)
  Processing
  Failed(reason: String)
  Done
}

Constructors

```
Uploading(percent: Int)
```
Sending, with the percentage sent so far.
```
Processing
```
Sent, and being checked or converted.
```
Failed(reason: String)
```
It could not be sent or processed, and why.
```
Done
```
In place.

Words

</>

What an attachment says about an upload in progress: uploading names the progress bar of a file, given its name.

pub type Words {
  Words(uploading: fn(String) -> String, processing: String)
}

Constructors

Words(uploading: fn(String) -> String, processing: String)

Values

actions_class

</>

pub fn actions_class(layout: Layout) -> css.Class

attachment

</>

pub fn attachment(
  words words: Words,
  name name: String,
  detail detail: String,
  status status: Status,
  media media: option.Option(element.Element(msg)),
  actions actions: List(element.Element(msg)),
) -> element.Element(msg)

An attachment as a row.

attachment_class

</>

pub fn attachment_class(layout: Layout) -> css.Class

bar_class

</>

pub fn bar_class() -> css.Class

classes

</>

pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

detail_class

</>

pub fn detail_class() -> css.Class

english

</>

pub fn english() -> Words

failed_class

</>

pub fn failed_class() -> css.Class

group

</>

pub fn group(
  attachments: List(element.Element(msg)),
) -> element.Element(msg)

Attachments side by side, wrapping onto new lines.

group_class

</>

pub fn group_class() -> css.Class

icon_class

</>

pub fn icon_class(layout: Layout) -> css.Class

media_class

</>

pub fn media_class(layout: Layout) -> css.Class

name_class

</>

pub fn name_class() -> css.Class

state_class

</>

pub fn state_class() -> css.Class

styled

</>

pub fn styled(
  words: Words,
  layout: Layout,
  name name: String,
  detail detail: String,
  status status: Status,
  media media: option.Option(element.Element(msg)),
  actions actions: List(element.Element(msg)),
) -> element.Element(msg)

An attachment in another layout. media, such as a thumbnail <img>, takes the place of the file type.

text_class

</>

pub fn text_class() -> css.Class

track_class

</>

pub fn track_class() -> css.Class