Moon · Phoenix Framework

Options

Permissions

<Form for={@user_changeset} change="form_update" submit="form_submit">
  <Field name={:permissions}>
    <FieldLabel>Permissions</FieldLabel>
    <Dropdown id="dropdown-options-example-user-permissions" options={User.available_permissions()} is_multi />
  </Field>
</Form>

State

@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

With icons

Permissions

<Form for={@user_changeset} change="form_update" submit="form_submit">
  <Field name={:permissions}>
    <FieldLabel>Permissions</FieldLabel>
    <Dropdown id="dropdown-options-example-user-permissions" options={User.available_permissions()} is_multi />
  </Field>
</Form>

State

@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

With search and footer (markup)

Permissions

<Form for={@user_changeset} change="form_update" submit="form_submit">
  <Field name={:permissions}>
    <FieldLabel>Permissions</FieldLabel>
    <Dropdown
      id="random-id-38943"
      available_options={@options}
      options={@searched_options}
      on_search_change="update_search"
      search_string={@search_string}
      is_multi
    >
      {#for option <- @searched_options}
        <Dropdown.Option value={"#{option.value}"} :let={is_selected: is_selected}>
          <SingleLineItem current={is_selected}>
            <:left_icon><Moon.Icons.ControlsPlus /></:left_icon>
            {option.label}
            <:right_icon>
              <Checkbox
                id={"random-id-38943_#{option.value}"}
                field={:user_permissions_options_checked}
                checked={is_selected}
              />
            </:right_icon>
          </SingleLineItem>
        </Dropdown.Option>
      {/for}
      <:footer>
        <Footer>
          <:cancel>
            <Button variant="secondary" size="sm">Cancel</Button>
          </:cancel>
          <:clear>
            <Button variant="ghost" size="sm" on_click="clear_selections">Clear</Button>
          </:clear>
          <:confirm>
            <Button variant="primary" size="sm">Confirm</Button>
          </:confirm>
        </Footer>
      </:footer>
    </Dropdown>
  </Field>
</Form>

State

@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

With search and footer (data + atom form)

<Form
  id="with_search_and_footer_data_and_form_for_atom_form"
  for={:selected_params}
  change="update_selected"
  submit="apply"
>
  <Field name={:selected}>
    <Dropdown
      id="with_search_and_footer_data_and_form_for_atom_form_dropdown"
      available_options={@options_with_left_icon}
      options={@searched_options_with_left_icon}
      value={@selected}
      on_search_change="update_search"
      search_string={@search_string}
      with="checkbox"
      is_multi
    >
      <:footer>
        <Footer>
          <:cancel>
            <Button variant="secondary" size="sm">Cancel</Button>
          </:cancel>
          <:clear>
            <Button variant="ghost" size="sm" on_click="clear_selections">Clear</Button>
          </:clear>
          <:confirm>
            <Button variant="primary" size="sm">Confirm</Button>
          </:confirm>
        </Footer>
      </:footer>
    </Dropdown>
  </Field>
</Form>

State

@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

With search and footer (data + changeset form)

Permissions

<Form for={@user_changeset} change="form_update" submit="form_submit">
  <Field name={:permissions}>
    <FieldLabel>Permissions</FieldLabel>
    <Dropdown
      id="search_and_footer_data_dropdown"
      available_options={@options_with_left_icon}
      options={@searched_options_with_left_icon}
      on_search_change="update_search"
      search_string={@search_string}
      with="checkbox"
      is_multi
    >
      <:footer>
        <Footer>
          <:cancel>
            <Button variant="secondary" size="sm">Cancel</Button>
          </:cancel>
          <:clear>
            <Button variant="ghost" size="sm" on_click="clear_selections">Clear</Button>
          </:clear>
          <:confirm>
            <Button variant="primary" size="sm">Confirm</Button>
          </:confirm>
        </Footer>
      </:footer>
    </Dropdown>
  </Field>
</Form>

State

@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

With radio button

<Form for={@radio_form_changeset} change="form_radio_update" submit="form_submit">
  <Dropdown id="user-role" field={:role} options={User.available_roles_with_left_icon()} with="radio" />
</Form>

State

@radio_form_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>
@latest_params = nil

With checkbox

Permissions

  <Form for={@user_changeset} change="form_update" submit="form_submit">
    <Field name={:permission}>
      <FieldLabel>Permissions</FieldLabel>
      <Dropdown
        id="dropdown-checkbox-example-user-permissions"
        options={@searchable_options}
        is_multi>
        {#for option <- @searchable_options}
          <Dropdown.Option value="option.value" :let={is_selected: is_selected}>
            <SingleLineItem current={is_selected}>
              <:left_icon><Moon.Icons.ControlsPlus /></:left_icon>
              {option.label}
              <:right_icon>
                <Checkbox checked={is_selected}/>
              </:right_icon>
            </SingleLineItem>
          </Dropdown.Option>
        {/for}
      </Dropdown>
    </Field>
  </Form>

State

@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

With Tabs

Permissions

Link 1

Link 2

Link 3

Link 4

<Form for={@user_changeset} change="form_update" submit="form_submit">
  <Field name={:permission}>
    <FieldLabel>Permissions</FieldLabel>
    <Dropdown
      id="dropdown-tabs-example-user-permissions"
      options={@options}>
      <:header>
        <Tabs>
          <TabLink active={@tab_id == "1"} on_click="clicked_tab" item_id="1">Link 1</TabLink>
          <TabLink active={@tab_id == "2"} on_click="clicked_tab" item_id="2">Link 2</TabLink>
          <TabLink active={@tab_id == "3"} on_click="clicked_tab" item_id="3">Link 3</TabLink>
          <TabLink active={@tab_id == "4"} on_click="clicked_tab" item_id="4">Link 4</TabLink>
        </Tabs>
      </:header>
    </Dropdown>
  </Field>
</Form>

State

@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{permissions: [1, 2], role: 1},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

Components v2

Button

Form

Components v1

Charts

Datepicker

Dialog

Progress

Select

Dropdown

Options

With icons

With search and footer (markup)

With search and footer (data + atom form)

With search and footer (data + changeset form)

With radio button

With checkbox

With Tabs