Liking cljdoc? Tell your friends :D
ClojureScript only.

tincture.typography

Typography component implementing Material Design guidelines.

Inspiration:

Typography component implementing [Material Design](https://material.io/design/typography/the-type-system.html#) guidelines.

**Inspiration**:

- [Material-ui Typography](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Typography/Typography.js)
raw docstring

default-font-familycljs

source

typographycljsdeprecated

source

Typographycljs

(Typography {:keys [variant align class elevation font-style on-click direction
                    component gutter-bottom paragraph color no-wrap id]
             :or {paragraph false
                  direction :ltr
                  font-style :normal
                  no-wrap false
                  align :left
                  elevation 0
                  color :light
                  variant :body2
                  component :div
                  gutter-bottom false}})

Typography component. It contains reusable categories of text, each with an intended application and meaning according to material design guidelines.

Properties

  • :variant. Pred: #{:h1 :h2 :h3 :h4 :h5 :h6 :subtitle1 :subtitle2 :body1 :body2 :caption :button :overline :sr-only :inherit}. Default :body1. Apply chosen variant style.

  • :align. Pred: #{:inherit :left :right :center :justify}. Default: :left. Set text alignment.

  • :class. Pred: string?. Default: nil. Classname to be applied to the typography component.

  • :elevation. Pred: #{0 1 2 3}. Default: 0. Height of text shadow.

  • :font-style. Pred: #{:normal :italic}. Default: :normal. Sets the CSS property font-style.

  • :on-click. Pred: fn?. Default: nil. On click handler to be attached to the typography component.

  • :direction. Pred: #{:ltr :rtl}. Default: :ltr. Sets the CSS property direction.

  • :component. Pred: (or string? fn? keyword?). Default :div. The component used for the root node. It can either be hiccup keywords or string, or another component like tincture.paper/Paper

  • :gutter-bottom. Pred boolean?. Default false. Toggles bottom margin.

  • :paragraph. Pred boolean?. Default false. Toggles bottom margin and changes root node to a <p> element.

  • :color. Pred: #{:light :dark :secondary-light :secondary-dark :inherit}. Default: :light. Choose a color matching either a dark theme or a light theme. Shortcut to setting a sensible color based on light or dark. If any other color is required just add a class and don't set this.

  • :no-wrap. Pred: boolean?. Default: false. If true, the text will not wrap, but instead will truncate with an ellipsis.

Example usage:

[:div
  [Typography {:variant :h3
               :gutter-bottom true}
    "my headline"]
  [Typography
    "My body text"]]

Typography component. It contains reusable categories of text, each with an
intended application and meaning according to material design guidelines.

**Properties**

* `:variant`. Pred: `#{:h1 :h2 :h3 :h4 :h5 :h6 :subtitle1 :subtitle2 :body1 :body2 :caption :button
 :overline :sr-only :inherit}`. Default `:body1`. Apply chosen variant style.

* `:align`. Pred: `#{:inherit :left :right :center :justify}`. Default:
`:left`. Set text alignment.

* `:class`. Pred: `string?`. Default: `nil`. Classname to be applied to the
typography component.

* `:elevation`. Pred: `#{0 1 2 3}`. Default: `0`. Height of text shadow.

* `:font-style`. Pred: `#{:normal :italic}`. Default: `:normal`. Sets the CSS
property `font-style`.

* `:on-click`. Pred: `fn?`. Default: `nil`. On click handler to be attached to
the typography component.

* `:direction`. Pred: `#{:ltr :rtl}`. Default: `:ltr`. Sets the CSS property
direction.

* `:component`. Pred: `(or string? fn? keyword?)`. Default `:div`. The
component used for the root node. It can either be hiccup keywords or string,
or another component like `tincture.paper/Paper`

* `:gutter-bottom`. Pred `boolean?`. Default `false`. Toggles bottom margin.

* `:paragraph`. Pred `boolean?`. Default `false`. Toggles bottom margin and
changes root node to a &lt;p&gt; element.

* `:color`. Pred: `#{:light :dark :secondary-light :secondary-dark :inherit}`.
Default: `:light`. Choose a color matching either a `dark` theme or a `light`
theme. Shortcut to setting a sensible color based on light or dark. If any
other color is required just add a class and don't set this.

* `:no-wrap`. Pred: `boolean?`. Default: `false`. If `true`, the text will not
wrap, but instead will truncate with an ellipsis.

Example usage:
```clojure
[:div
  [Typography {:variant :h3
               :gutter-bottom true}
    "my headline"]
  [Typography
    "My body text"]]
```
sourceraw docstring

cljdoc is a website building & hosting documentation for Clojure/Script libraries

Keyboard shortcutsReport a problemcljdoc on GitHub
× close