TypeScript dom.label函數代碼示例

  render(): void {
    super.render()
    empty(this.el)

    const labelEl = label({for: this.model.id}, this.model.title)
    this.el.appendChild(labelEl)

    let contents: HTMLElement[]
    if (isArray(this.model.options))
      contents = this.build_options(this.model.options)
    else {
      contents = []
      const options = this.model.options
      for (const key in options) {
        const value = options[key]
        contents.push(optgroup({label: key}, this.build_options(value)))
      }
    }

    this.selectEl = select({
      class: "bk-widget-form-input",
      id: this.model.id,
      name: this.model.name,
      disabled: this.model.disabled}, contents)

    this.selectEl.addEventListener("change", () => this.change_input())
    this.el.appendChild(this.selectEl)
  }

  render(): void {
    super.render()
    empty(this.el)

    const labelEl = label({for: this.model.id}, this.model.title)
    this.el.appendChild(labelEl)

    const options = this.model.options.map((opt) => {
      let value, _label
      if (isString(opt))
        value = _label  = opt
      else
        [value, _label] = opt

      return option({value}, _label)
    })

    this.selectEl = select({
      multiple: true,
      class: "bk-widget-form-input",
      id: this.model.id,
      name: this.model.name,
      disabled: this.model.disabled,
    }, options)

    this.selectEl.addEventListener("change", () => this.change_input())
    this.el.appendChild(this.selectEl)

    this.render_selection()
  }

  render(): void {
    super.render()
    empty(this.el)

    const active = this.model.active
    const labels = this.model.labels

    for (let i = 0; i < labels.length; i++) {
      const text = labels[i]

      const inputEl = input({type: `checkbox`, value: `${i}`})
      inputEl.addEventListener("change", () => this.change_input())

      if (this.model.disabled)
        inputEl.disabled = true

      if (includes(active, i))
        inputEl.checked = true

      const labelEl = label({}, inputEl, text)
      if (this.model.inline) {
        labelEl.classList.add("bk-bs-checkbox-inline")
        this.el.appendChild(labelEl)
      } else {
        const divEl = div({class: "bk-bs-checkbox"}, labelEl)
        this.el.appendChild(divEl)
      }
    }
  }

  render(): void {
    super.render()

    if (this._picker != null)
      this._picker.destroy()
    empty(this.el)

    this.labelEl = label({}, this.model.title)
    this.el.appendChild(this.labelEl)

    this.inputEl = input({type: "text", class: "bk-widget-form-input", disabled: this.model.disabled})
    this.el.appendChild(this.inputEl)

    this._picker = new Pikaday({
      field: this.inputEl,
      defaultDate: new Date(this.model.value),
      setDefaultDate: true,
      minDate: this.model.min_date != null ? new Date(this.model.min_date) : undefined,
      maxDate: this.model.max_date != null ? new Date(this.model.max_date) : undefined,
      onSelect: (date) => this._on_select(date),
    })

    // move date picker's element from body to bk-root
    this._root_element.appendChild(this._picker.el)
  }

  render(): void {
    super.render()

    const {title} = this.model
    this.label_el = label({style: {display: title.length == 0 ? "none" : ""}}, title)

    this.group_el = div({class: "bk-input-group"}, this.label_el)
    this.el.appendChild(this.group_el)
  }

  render(): void {
    super.render()

    empty(this.el)
    const divEl = div({class: "bk-bs-btn-group"})
    this.el.appendChild(divEl)

    const active = this.model.active
    for (let i = 0; i < this.model.labels.length; i++) {
      const text = this.model.labels[i]
      const inputEl = input({type: `checkbox`, value: `${i}`, checked: i in active})
      inputEl.addEventListener("change", () => this.change_input())
      const labelEl = label({class: [`bk-bs-btn`, `bk-bs-btn-${this.model.button_type}`]}, inputEl, text)
      if (includes(active, i))
        labelEl.classList.add("bk-bs-active")
      divEl.appendChild(labelEl)
    }
  }

  render(): void {
    // BokehJS Views create <div> elements by default, accessible as @el.
    // Many Bokeh views ignore this default <div>, and instead do things
    // like draw to the HTML canvas. In this case though, we change the
    // contents of the <div>, based on the current slider value.
    super.render()

    if (this.model.title != null) {
      if (this.model.title.length != 0) {
        this.title_el = label({}, `${this.model.title}: `)
        this.el.appendChild(this.title_el)
      }

      this.value_el = input({type: "text", readonly: true})
      this.el.appendChild(this.value_el)
    }

    this.slider_el = input({type: "text", class: "bk-slider"})
    this.el.appendChild(this.slider_el)

    // Set up parameters
    const max = this.model.end
    const min = this.model.start
    const [from, to] = this.model.range || [max, min]
    const opts = {
      type: "double",
      grid: this.model.grid,
      min,
      max,
      from,
      to,
      step: this.model.step || (max - min)/50,
      disable: this.model.disabled,
      onChange: (data: SliderData) => this.slide(data),
      onFinish: (data: SliderData) => this.slidestop(data),
    }

    jQuery(this.slider_el).ionRangeSlider(opts)
    if (this.value_el != null)
      this.value_el.value = `${from} - ${to}`
  }

  render(): void {
    super.render()

    const group = div({class: ["bk-input-group", this.model.inline ? "bk-inline" : null]})
    this.el.appendChild(group)

    const name = uniqueId()
    const {active, labels} = this.model

    for (let i = 0; i < labels.length; i++) {
      const radio = input({type: `radio`, name, value: `${i}`})
      radio.addEventListener("change", () => this.change_active(i))

      if (this.model.disabled)
        radio.disabled = true
      if (i == active)
        radio.checked = true

      const label_el = label({}, radio, span({}, labels[i]))
      group.appendChild(label_el)
    }
  }

  render(): void {
    super.render()

    const group = div({class: ["bk-input-group", this.model.inline ? "bk-inline" : null]})
    this.el.appendChild(group)

    const {active, labels} = this.model

    for (let i = 0; i < labels.length; i++) {
      const checkbox = input({type: `checkbox`, value: `${i}`})
      checkbox.addEventListener("change", () => this.change_active(i))

      if (this.model.disabled)
        checkbox.disabled = true

      if (includes(active, i))
        checkbox.checked = true

      const label_el = label({}, checkbox, span({}, labels[i]))
      group.appendChild(label_el)
    }
  }

  render(): void {
    super.render()

    empty(this.el)
    const divEl = div({class: "bk-bs-btn-group"})
    this.el.appendChild(divEl)

    const name = uniqueId()

    const active = this.model.active
    const labels = this.model.labels

    for (let i = 0; i < labels.length; i++) {
      const text = labels[i]
      const inputEl = input({type: `radio`, name: name, value: `${i}`, checked: i == active})
      inputEl.addEventListener("change", () => this.change_input())
      const labelEl = label({class: [`bk-bs-btn`, `bk-bs-btn-${this.model.button_type}`]}, inputEl, text)
      if (i == active)
        labelEl.classList.add("bk-bs-active")
      divEl.appendChild(labelEl)
    }
  }