jsx-slack
Version:
Build JSON object for Slack Block Kit surfaces from JSX
106 lines (105 loc) • 3.53 kB
TypeScript
import { JSXSlack } from '../../jsx';
import { LayoutBlockProps } from './utils';
export interface SectionProps extends LayoutBlockProps {
children: JSXSlack.ChildElements;
}
interface FieldProps {
children: JSXSlack.ChildElements;
}
export declare const availableSectionAccessoryTypes: ("input" | "button" | "overflow" | "image" | "checkboxes" | "datepicker" | "users_select" | "multi_users_select" | "static_select" | "multi_static_select" | "conversations_select" | "multi_conversations_select" | "channels_select" | "multi_channels_select" | "external_select" | "multi_external_select" | "radio_buttons" | "timepicker" | "workflow_button")[];
/**
* Generate the field for `<Section>` block element.
*
* By using 1 to 10 `<Field>` components in immediate child of `<Section>`, you
* can insert the additional two-column text(s) after the main message.
*
* Of course, you can format the text through HTML-like elements.
*
* ```jsx
* <Blocks>
* <Section>
* Informations about jsx-slack are here.
* <Field>
* <b>GitHub:</b>
* </Field>
* <Field>
* <a href="https://github.com/yhatt/jsx-slack">yhatt/jsx-slack</a>
* </Field>
* <Field>
* <b>npm:</b>
* </Field>
* <Field>
* <a href="https://npm.im/jsx-slack">jsx-slack</a>
* </Field>
* </Section>
* </Blocks>
* ```
*
* @return The JSON of text composition object suited to section's field
*/
export declare const Field: import("../../jsx-internals").BuiltInComponent<FieldProps>;
/**
* [The `section` layout block](https://api.slack.com/reference/messaging/blocks#section)
* to display text message, and optional fields / the accessory block element.
*
* You can style text contents through HTML-like formatting. For example, insert
* a line break by `<br />`, style text as bold with `<b>`, make paragraph
* through `<p>`, and create hyperlink via `<a>`.
*
* ```jsx
* <Blocks>
* <Section>
* <p><i>Hello, world!</i></p>
* <p>
* <b><a href="https://github.com/yhatt/jsx-slack/">jsx-slack</a></b>
* <br />
* Helps to create an amazing Slack app, with familiar HTML syntax!
* </p>
* </Section>
* </Blocks>
* ```
*
* **NOTE**: Basic characters for styling text, `*bold*`, `_italic_`,
* `~strike~`, `` `code` ``, ` ```code block``` `, and `> quote` _still can
* use_. Consider using `<Escape>` to sanitize them if you want.
*
* ### Accessory
*
* A one of supported accessory component can show in side-by-side (or just
* below) of the message by placing it in immediate child of `<Section>`.
*
* ```jsx
* <Blocks>
* <Section>
* You can add an image of so cute kitten :cat:
* <Image src="https://placekitten.com/256/256" alt="Kitten" />
* </Section>
* </Blocks>
* ```
*
* You can pick one as an accessory from following:
*
* - `<Image>` (`<img>`)
* - `<Button>` (`<button>`)
* - `<Select>` (`<select>`)
* - `<ExternalSelect>`
* - `<UsersSelect>`
* - `<ConversationsSelect>`
* - `<ChannelsSelect>`
* - `<Overflow>`
* - `<DatePicker>`
* - `<TimePicker>`
* - `<CheckboxGroup>`
* - `<RadioButtonGroup>`
*
* ### Fields
*
* By using `<Field>` component(s) in immediate child of `<Section>`, you can
* insert the additional two-column text(s) after the main content of message.
*
* `<Section>` allows containing up to 10 fields.
*
* @return The partial JSON for `section` layout block
*/
export declare const Section: import("../../jsx-internals").BuiltInComponent<SectionProps>;
export {};