How to use the reflex.html.div function in reflex

To help you get started, we’ve selected a few reflex examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github browserhtml / browserhtml / src / browser / web-preview.js View on Github external
const viewContainer = (styles, ...children) =>
    // Set the width of the previews element to match the width of each card
    // plus padding.
    html.div({
      key: 'preview-container',
      style: styles
    }, [
      html.div({
        key: 'preview-content',
        style: Style(style.previews, style.shrinkable)
      }, children)
    ]);
github browserhtml / browserhtml / src / about / dashboard / dashboard.js View on Github external
return html.div({
      key: 'dashboard',
      className: 'dashboard',
      style: theme && {
        backgroundColor: theme.wallpaper.background,
        color: theme.wallpaper.foreground,
        backgroundImage: theme.wallpaper.posterImage &&
                         `url(${theme.wallpaper.posterImage})`
      }
    }, [
      html.meta({
        name: 'theme-color',
        content: themeColors
      }),
      html.div({
        key: 'dashboard-tiles',
        className: 'dashboard-tiles'
      }, pages.map(page => render(page.url, viewPage, page, address))),
      html.div({
        key: 'wallpaper-swatches',
        className: 'wallpaper-swatches',
      }, themes.entries.map(theme => render(theme.id, viewTheme, theme, address)))
    ]);
  };
  // Exports:
github browserhtml / browserhtml / src / Browser / Sidebar / Tabs.js View on Github external
(model:Model, address:Address, context:Context):DOM =>
  html.div(settings,
   model
    .index
    .map(id =>
      Tab.view(model.cards[id],
       forward(address, ByID(id)),
       context
      )
    )
  )
github mozilla / reflex / examples / gif-viewer / src / random-gif.js View on Github external
export const view = (model/*:Model*/, address/*:Address*/)/*:VirtualElement*/ =>
  html.div({key: "gif-viewer", style: style.viewer}, [
    html.h2({key: "header", style: style.header}, [model.topic]),
    html.div({key: "image", style: style.image(model.uri)}),
    html.button({key: "button", onClick: forward(address, RequestMoreAction)}, [
      "More please!"
    ])
  ])
github mozilla / reflex / examples / counter-set / src / list.js View on Github external
const viewEntry = ({id, model}/*:Entry*/, address/*:Address*/)/*:VirtualElement*/ =>
  html.div({key: id}, [
    Counter.view(model, forward(address, by(id)))
  ])
github mozilla / reflex / examples / counter-set / src / set.js View on Github external
const viewEntry = ({id, model}/*:Entry*/, address/*:Address*/)/*:VirtualElement*/ =>
  html.div({key: id}, [
    Counter.view(model, forward(address, CounterList.by(id))),
    html.button({
      key: 'remove',
      onClick: forward(address, removeForID(id))
    }, 'x')
  ])
github browserhtml / browserhtml / src / About / Newtab / Newtab / Wallpaper.js View on Github external
(model:Model, address:Address):DOM => (
    html.div({
      className: 'wallpaper-choice',
      onClick: forward(address, always(Choose)),
      style: Style.mix(
        styleSheet.base,
        { backgroundColor: model.color }
      )
    })
  )
github browserhtml / browserhtml / src / browser / location-bar.js View on Github external
const viewBar = mode => (address, children) => html.div({
    style: style.container,
  }, [
    html.div({
      key: 'LocationBar',
      className: ClassSet({
        'location-bar': true
      }),
      style: Style(style.bar, style[mode]),
      onClick: forward(address, Focusable.Focus)
    }, children)
  ]);
github browserhtml / browserhtml / src / about / dashboard / dashboard.js View on Github external
const viewPage = ({uri, image, title}, address) => html.a({
    key: uri,
    href: uri,
    className: 'tile tile-large',
    onClick: address.send(Open({uri}))
  }, [
    html.div({
      key: 'tileThumbnail',
      className: 'tile-thumbnail',
      style: {backgroundImage: image && `url(${image})`}
    }),
    html.div({
      key: 'tileTitle',
      className: 'tile-title'
    }, title)
  ]);
github browserhtml / browserhtml / src / browser / preview-box.js View on Github external
const view = (webViews, theme, address) => {
    const {size} = webViews.entries
    const previewed = webViews.entries.get(webViews.previewed).view;

    return html.div({
      style: {
        backgroundColor: theme.shell,
        transition: 'background-color 300ms ease, color 300ms ease'
      },
      className: ClassSet({
        tabstripcontainer: true,
        isdark: theme.isDark
      }),
    }, [
      html.div({
        key: 'tabstrip',
        className: 'tabstrip',
      }, WebViews.order(webViews.entries).map(({view, selected}, index) =>
          render(view.id,
                 viewPreview,
                 view.id,
                 index,
                 view === previewed,
                 view.page.thumbnail,
                 address))),
      html.div({
        key: 'tabstrip-kill-zone',
        className: ClassSet({
          tabstripkillzone: true
        }),
        onMouseEnter: address.pass(Deactivate)

reflex

Functional reactive UI library

MIT
Latest version published 7 years ago

Package Health Score

48 / 100
Full package analysis