How to use the @pnp/spfx-property-controls/lib/PropertyFieldHeader.CalloutTriggers.Hover function in @pnp/spfx-property-controls

To help you get started, we’ve selected a few @pnp/spfx-property-controls 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 SharePoint / sp-dev-fx-webparts / samples / react-calendar-feed / src / webparts / calendarFeedSummary / CalendarFeedSummaryWebPart.ts View on Github external
// use CORS toggle
                PropertyFieldToggleWithCallout("useCORS", {
                  disabled: isMock,
                  calloutTrigger: CalloutTriggers.Hover,
                  key: "useCORSFieldId",
                  label: strings.UseCORSFieldLabel,
                  //calloutWidth: 200,
                  calloutContent: React.createElement("p", {}, isMock ? strings.UseCORSFieldCalloutDisabled : strings.UseCORSFieldCallout),
                  onText: strings.CORSOn,
                  offText: strings.CORSOff,
                  checked: useCORS
                }),
                // cache duration slider
                PropertyFieldSliderWithCallout("cacheDuration", {
                  calloutContent: React.createElement("div", {}, strings.CacheDurationFieldCallout),
                  calloutTrigger: CalloutTriggers.Hover,
                  calloutWidth: 200,
                  key: "cacheDurationFieldId",
                  label: strings.CacheDurationFieldLabel,
                  max: 1440,
                  min: 0,
                  step: 15,
                  showValue: true,
                  value: cacheDuration
                }),
                // how many items are we diplaying in a page
                PropertyFieldNumber("maxEvents", {
                  key: "maxEventsFieldId",
                  label: strings.MaxEventsFieldLabel,
                  description: strings.MaxEventsFieldDescription,
                  value: maxEvents,
                  minValue: 0,
github SharePoint / sp-dev-fx-webparts / samples / react-calendar-feed / src / webparts / calendarFeedSummary / CalendarFeedSummaryWebPart.ts View on Github external
displayGroupsAsAccordion: true,
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.FeedSettingsGroupName,
              groupFields: [
                // feed type drop down. Add your own types in the drop-down list
                PropertyPaneDropdown("feedType", {
                  label: strings.FeedTypeFieldLabel,
                  options: feedTypeOptions
                }),
                // feed url input box -- only if not using a mock provider
                !isMock && PropertyFieldTextWithCallout("feedUrl", {
                  calloutTrigger: CalloutTriggers.Hover,
                  key: "feedUrlFieldId",
                  label: strings.FeedUrlFieldLabel,
                  calloutContent:
                    React.createElement("div", {}, strings.FeedUrlCallout),
                  calloutWidth: 200,
                  value: feedUrl,
                  placeholder: "https://",
                  deferredValidationTime: 200,
                  onGetErrorMessage: this._validateFeedUrl.bind(this)
                }),
                // how days ahead from today are we getting
                PropertyPaneDropdown("dateRange", {
                  label: strings.DateRangeFieldLabel,
                  options: [
                    { key: DateRange.OneWeek, text: strings.DateRangeOptionWeek },
                    { key: DateRange.TwoWeeks, text: strings.DateRangeOptionTwoWeeks },
github pnp / FilterPack / src / webparts / dynamicValue / DynamicValueWebPart.ts View on Github external
case "bool":
        displayPaneFields.push(...[
          PropertyPaneTextField('displayBoolTrue',{
            label: 'Value when true'
          }),
          PropertyPaneTextField('displayBoolFalse',{
            label: 'Value when false'
          }),
        ]);
        break;
    }

    //Advanced Display Template
    displayPaneFields.push(...[
      PropertyFieldTextWithCallout('displayTemplate', {
        calloutTrigger: CalloutTriggers.Hover,
        key: 'displayTemplate',
        label: 'Template (Advanced)',
        calloutWidth: 200,
        value: this.properties.displayTemplate,
        calloutContent: displayTemplateCallout(),
      }),
      PropertyPaneDropdown('displayUndefined', {
        label: 'When value is undefined',
        options: [
          {key:'blank', text:'Show blank value'},
          {key:'undefined', text:'Show "undefined"'},
          {key:'custom', text:'Use custom value'}
        ]
      })
    ]);

@pnp/spfx-property-controls

Reusable property pane controls for SharePoint Framework solutions

MIT
Latest version published 3 months ago

Package Health Score

70 / 100
Full package analysis